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

Ответ 1

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

* {
  border-radius: 0 !important;
}

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

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

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

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

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

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

$enable-rounded:   false;

Ответ 2

Загрузите исходные файлы .less и запустите микс .border-radius().

Ответ 3

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

С sass/scss

$baseBorderRadius: 0;

С меньшим

@baseBorderRadius: 0;

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

Обновление

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

Ответ 4

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

Ответ 5

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;
}

Ответ 6

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

Или определите mixin и включите его везде, где вы хотите, чтобы кнопка не была окружена.

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

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

Ответ 7

При использовании исходных файлов 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

Ответ 8

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

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

$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

Ответ 9

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

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

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

* {
  border-radius: 0 !important;
}

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

Ответ 10

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

• Просто перейдите к http://getbootstrap.com/customize/
• Найти все "радиус" и изменить их по своему усмотрению.
• Нажмите "Скомпилировать и загрузить" и воспользуйтесь собственной версией Bootstrap.

Ответ 11

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

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

Ответ 12

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

Ответ 13

Я создаю еще один 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;
}

Ответ 14

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

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