Избавляемся от всех закругленных углов в Twitter Bootstrap

Я люблю Twitter Bootstrap 2.0 - мне нравится, как это такая полная библиотека ... но я хочу сделать глобальную модификацию для очень квадратного сайта, который должен избавиться от всех закругленных углов в Bootstrap ...

Это много CSS, чтобы пережить. Есть ли глобальный переключатель, или что будет лучшим способом найти и заменить все округленные?

Я установил для border-radius всех элементов значение "0" следующим образом:

* {
  border-radius: 0 !important;
}

Как я уверен, я не хочу перезаписывать это позже, я просто использую!

Если вы не компилируете меньше файлов, просто сделайте:

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

В начальной загрузке 3, если вы ее компилируете, теперь вы можете установить радиус в файле variables.less:

@border-radius-base:        0px;
@border-radius-large:       0px;
@border-radius-small:       0px;

В начальной загрузке 4, если вы ее компилируете, вы можете полностью отключить радиус в _custom.scssфайле:

$enable-rounded:   false;

Скачайте исходные .lessфайлы и .border-radius()оставьте миксин пустым.

Если вы используете Bootstrap версии <3 ...

С sass / scss

$baseBorderRadius: 0;

Менее

@baseBorderRadius: 0;

Вам нужно будет установить эту переменную перед импортом начальной загрузки. Это повлияет на все скважины и навигационные панели.

Обновить

Если вы используете Bootstrap 3, baseBorderRadius должен быть border-radius-base

Если вы хотите избежать перекомпиляции всего, просто добавьте .btn {border-radius: 0;}в свой CSS.

code,
kbd,
pre,
.img-rounded,
.img-thumbnail,
.img-circle,
.form-control,
.btn,
.btn-link,
.dropdown-menu,
.list-group-item,
.input-group-addon,
.input-group-btn,
.nav-tabs a,
.nav-pills a,
.navbar,
.navbar-toggle,
.icon-bar,
.breadcrumb,
.pagination,
.pager *,
.label,
.badge,
.jumbotron,
.thumbnail,
.alert,
.progress,
.panel,
.well,
.modal-content,
.tooltip-inner,
.popover,
.popover-title,
.carousel-indicators li {
    border-radius:0 !important;
}

Этот вопрос довольно старый, однако он хорошо виден в поисковых системах даже в поисках, связанных с Bootstrap 4 . Я думаю, что стоит добавить ответ для отключения закругленных углов, путь BS4.

В _variables.scssсуществует несколько глобальных модификаторов существует , чтобы быстро изменить вещи , такие , как включение или отключение гибкая система ГИРД, закругленные углы, градиенты и т.д.:

$enable-flex:          false !default;
$enable-rounded:       true !default; // <-- This one
$enable-shadows:       false !default;
$enable-gradients:     false !default;
$enable-transitions:   false !default;

Закругленные углы enabledпо умолчанию.

Если вы предпочитаете компилировать Bootstrap 4, используя Sass и свой собственный, _custom.scssтакой как я (или используя официальный настройщик), достаточно переопределить связанную переменную:

$enable-rounded : false

.btn {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

Или определите миксин и включите его там, где вы хотите, чтобы кнопка была без заземления.

@mixin btn-round-none {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

.btn.btn_1 {
@inlude btn-round-none
}

При использовании Bootstrap> = 3.0исходные файлы ( SASSили LESS) вам не нужно избавляться от закругленных углов на всем, если есть только один элемент, который вас беспокоит, например, просто избавиться от закругленных углов на панели навигации, использовать:

С SCSS:

$navbar-border-radius: 0;

Менее:

@navbar-border-radius: 0;

Однако, если вы хотите избавиться от закругленных углов на всем, вы можете сделать то, что упомянуло @ adamwong246, и использовать:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

Эти две настройки являются «корневыми» настройками, от которых navbar-border-radiusнаследуются другие настройки, например , если не указаны другие значения.

Для списка всех переменных проверьте variables.less или variables.scss

Код, размещенный выше @BrunoS, не работает для меня,

* {
  .border-radius(0) !important;
}

что я использовал

* {
  border-radius: 0 !important;
}

Я надеюсь, что это поможет кому-то

Существует очень простой способ настроить Bootstrap:

1. Просто зайдите на http://getbootstrap.com/customize/
2. Найдите все «радиусы» и измените их по своему желанию.
3. Нажмите «Скомпилировать и скачать» и наслаждайтесь собственной версией Bootstrap.

Или вы можете добавить это в html элемента, из которого вы хотите удалить радиус границы (таким образом вы не удалили бы его из всех кнопок / элементов):

style="border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;"

С SASS Bootstrap - если вы сами компилируете Bootstrap - вы можете установить весь радиус границы (или более конкретный) просто на ноль:

$border-radius:               0;
$border-radius-lg:            0;
$border-radius-sm:            0;

Bootstrap имеет свои собственные классы для границ, включая .rounded-0избавление от закругленных углов на любом элементе, включаяbuttons

https://getbootstrap.com/docs/4.4/utilities/borders/#border-radius

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-primary">Regular Rounded Corners</a>
<a class="btn btn-primary rounded-pill">Pill Corners</a>
<a class="btn btn-primary rounded-0">Square Corners</a>

Вы также можете взглянуть на FlatStrap . Он обеспечивает замену в стиле Metro для Bootstrap CSS без закругленных углов, градиентов и теней.

если вы используете bootstrap, вы можете просто использовать bootstrap class = "roundnded-0", чтобы сделать границу с острыми краями без закругленных углов <button class="btn btn-info rounded-0"">Generate</button></span>

Я создал еще один CSS-файл и добавил следующий код. Не все элементы включены

/* Flatten das boostrap */
.well, .navbar-inner, .popover, .btn, .tooltip, input, select, textarea, pre, .progress, .modal, .add-on, .alert, .table-bordered, .nav>.active>a, .dropdown-menu, .tooltip-inner, .badge, .label, .img-polaroid, .panel {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
    border-collapse: collapse !important;
    background-image: none !important;
}