Alle abgerundeten Umrandungen in Bootstrap ausschalten.

Bootstrap

Ich nutze für meine Projekte gerne das Framework Bootstrap.
Allerdings gefallen mir die abgerundeten Elemente nicht besonders.

Fügt man diesen CSS-Code nach dem Einbinden von Bootstrap, werden alle Abrundungen abgeschalten:

.alert,.breadcrumb,.btn,.btn-group-lg>.btn,.btn-group-sm>.btn,.btn-group-vertical>.btn-group:not(:first-child):not(:last-child)>.btn,.btn-group-vertical>.btn:not(:first-child):not(:last-child),.btn-group-xs>.btn,.btn-group>.btn-group:not(:first-child):not(:last-child)>.btn,.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle),.btn-lg,.btn-link,.btn-sm,.btn-xs,.container .jumbotron,.dropdown-menu,.form-control,.form-horizontal .form-group-lg .form-control,.form-horizontal .form-group-sm .form-control,.img-rounded,.img-thumbnail,.input-group .form-control:not(:first-child):not(:last-child),.input-group-addon,.input-group-addon.input-lg,.input-group-addon.input-sm,.input-group-addon:not(:first-child):not(:last-child),.input-group-btn:not(:first-child):not(:last-child),.input-group-lg>.form-control,.input-group-lg>.input-group-addon,.input-group-lg>.input-group-btn>.btn,.input-group-sm>.form-control,.input-group-sm>.input-group-addon,.input-group-sm>.input-group-btn>.btn,.input-lg,.input-sm,.label,.modal-content,.nav-pills>li>a,.nav-tabs-justified>li>a,.nav-tabs.nav-justified>li>a,.nav-tabs>li>a,.navbar-toggle,.pager li>a,.pager li>span,.pagination,.panel,.panel-group .panel,.panel>.list-group .list-group-item,.popover,.progress,.thumbnail,.tooltip-inner,.well,.well-lg,.well-sm,code,kbd,pre,pre code{border-radius:0}@media (min-width:768px){.nav-tabs.nav-justified>li>a,.navbar,.navbar-fixed-bottom,.navbar-fixed-top,.navbar-static-top,.list-group-item:first-child,.list-group-item:last-child{border-radius:0}}

Oder ausführlich:

.img-thumbnail,
code,
kbd,
pre,
pre code,
.form-control,
.input-sm,
.form-horizontal .form-group-sm .form-control,
.input-lg,
.form-horizontal .form-group-lg .form-control,
.btn,
.btn-link,
.btn-lg,
.btn-group-lg > .btn,
.btn-sm,
.btn-group-sm > .btn,
.btn-xs,
.btn-group-xs > .btn,
.dropdown-menu,
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn,
.btn-group-vertical > .btn:not(:first-child):not(:last-child),
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn,
.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn,
.input-group-sm > .form-control,
.input-group-sm > .input-group-addon,
.input-group-sm > .input-group-btn > .btn,
.input-group-addon:not(:first-child):not(:last-child),
.input-group-btn:not(:first-child):not(:last-child),
.input-group .form-control:not(:first-child):not(:last-child),
.input-group-addon,
.input-group-addon.input-sm,
.input-group-addon.input-lg,
.nav-tabs > li > a,
.nav-tabs.nav-justified > li > a,
.nav-pills > li > a,
.nav-tabs-justified > li > a,
.navbar-toggle,
.breadcrumb,
.pagination,
.pager li > a,
.pager li > span,
.container .jumbotron,
.thumbnail,
.alert,
.progress,
.panel,
.panel > .list-group .list-group-item,
.panel-group .panel,
.well,
.well-lg,
.well-sm,
.modal-content,
.tooltip-inner,
.popover,
.nav-pills > li > a,
.label,
.img-rounded,
.list-group-item:first-child,
.list-group-item:last-child {
  border-radius: 0;
}

@media (min-width: 768px) {
    .nav-tabs.nav-justified > li > a {
        border-radius: 0 0 0 0;
    }
    
    .navbar-static-top,
    .navbar-fixed-top,
    .navbar-fixed-bottom,
    .navbar {
        border-radius: 0 0 0 0;
    }
}

Update am 09.04.2015: Die Elemente .list-group-item:first-child und .list-group-item:last-child wurden hinzugefügt.

Schreibe einen Kommentar