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

Загрузите исходные файлы .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 >= 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

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

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

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

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

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

* {
  border-radius: 0 !important;
}

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

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

Этот вопрос довольно старый, но он очень заметен в поисковых системах даже в 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

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

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

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

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