Позбавлення всіх закруглених кутів у Twitter Bootstrap

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

Це дуже багато CSS, щоб перебрати. Чи є глобальний перемикач, або що було б найкращим способом знайти та замінити всі округлені?

Я встановлюю граничний радіус всіх елементів на "0", як це:

* {
  border-radius: 0 !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;

У завантажувальній програмі 4, якщо ви її компілюєте, ви можете відключити радіус взагалі у _custom.scssфайлі:

$enable-rounded:   false;

Завантажте вихідні .lessфайли і зробіть .border-radius()мікс пустим.

Якщо ви використовуєте версію Bootstrap <3 ...

З sass / scss

$baseBorderRadius: 0;

З меншою

@baseBorderRadius: 0;

Вам потрібно буде встановити цю змінну перед імпортом завантажувальної програми. Це позначиться на всіх свердловинах і наверхах.

Оновлення

Якщо ви використовуєте Bootstrap 3 baseBorderRadius повинен бути базовим радіусом

Якщо ви хочете уникнути перекомпіляції всього, просто додайте .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успадкуватимуться інші налаштування, як- от, якщо не вказані інші значення.

Для переліку всіх змінних ознайомтеся з змінними.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-Style для CSS Bootstrap без закруглених кутів, градієнтів і тіней для падіння.

якщо ви використовуєте bootstrap, ви можете просто використовувати bootstrap class = "rounded-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;
}