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

173

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

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

в
источник
Вы хотите удалить все или только несколько закругленных углов?
Андрес Ильич
Если вы не можете изменить то, что у вас есть на месте, я создал файл мода, у которого все радиусы границ установлены на 0: mkamyszek.tumblr.com/post/61791361233/…
Марк Камышек
1
Инна, мой ответ сработал для вас? Вы бы отметили это как правильный?
BrunoS
да. Спасибо! .. почему понижение хотя
ина

Ответы:

331

Я установил для 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;
Brunos
источник
2
Это действительно хорошее решение, если вы пытаетесь настроить начальную загрузку, не затрагивая основные файлы. Отличный ответ!
Март
4
Черт, да, быстро и грязно!
программист
1
Я использовал это, * { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }и он отлично работает для Bootstrap 3.2. Спасибо за исправление человек!
Тодор Тодоров
1
Это решение не работает для входных данных <select> в стиле начальной загрузки. Вероятно, из-за использования -webkit-appearance: menulist.
johnsorrentino
Это, вероятно, хорошее решение, но не лучшее. Это создаст большое количество избыточных CSS для каждого элемента без необходимости. Я думаю, что это одно из лучших решений, предоставляемых @ymakux. Вы можете попробовать это
MB Parvez Rony
25

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

SLaks
источник
Это, пожалуй, лучшее решение с точки зрения эффективности при освоении Bootstrap CSS.
Klewis
20

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

С sass / scss

$baseBorderRadius: 0;

Менее

@baseBorderRadius: 0;

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

Обновить

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

adamwong246
источник
18

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

Ив Амселлем
источник
1
Это повлияет только на кнопки и где бы вы ни добавили.btn
zVictor
18
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;
}
ymakux
источник
7

Этот вопрос довольно старый, однако он хорошо виден в поисковых системах даже в поисках, связанных с 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
Едигей
источник
1
Вы качаетесь;) Это должен быть принятый ответ, как только Bootstrap 4 станет вирусным ... извините, публично. Это хорошо спрятано здесь для тех, кто уже использует его в альфа-версии.
kub1x
5
.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
}
tomruss
источник
4
pxизбыточно, нет?
ta.speot.is
1
Я обычно сохраняю «px», поэтому, если мне нужно изменить значение, мне не нужно снова вводить «px».
nkkollaw
1
но лишние байты данных
Энтони Шоу
5

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

УХО
источник
4

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

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

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

* {
  border-radius: 0 !important;
}

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

кузнец
источник
3
@brunos использовалLESS
afaolek
4

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

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

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

style="border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;"
Надя
источник
2

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

$border-radius:               0;
$border-radius-lg:            0;
$border-radius-sm:            0;
Blackbam
источник
Именно. Поместите эти объявления перед eg, @import "../node_modules/bootstrap/scss/bootstrap";и bootstrap не переопределит их, так как они объявлены с !defaultключевым словом в bootstrap-source.
Jeppe
2

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>

Ergec
источник
1

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

Флориан Фельдхаус
источник
Проблема с Flatstrap в том, что у них пока нет поддержки SCSS для v3 :(
HP.
1

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

Раджеш Марадана
источник
какая версия бутстрапа
ина
0

Я создал еще один 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;
}
Руберандинда Терпение
источник