Я люблю Twitter Bootstrap 2.0 - мне нравится, как это такая полная библиотека ... но я хочу сделать глобальную модификацию для очень квадратного сайта, который должен избавиться от всех закругленных углов в Bootstrap ...
Это много CSS, чтобы пережить. Есть ли глобальный переключатель, или что будет лучшим способом найти и заменить все округленные?
Ответы:
Я установил для border-radius всех элементов значение "0" следующим образом:
Как я уверен, я не хочу перезаписывать это позже, я просто использую!
Если вы не компилируете меньше файлов, просто сделайте:
В начальной загрузке 3, если вы ее компилируете, теперь вы можете установить радиус в файле variables.less:
В начальной загрузке 4, если вы ее компилируете, вы можете полностью отключить радиус в
_custom.scss
файле:источник
* { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; }
и он отлично работает для Bootstrap 3.2. Спасибо за исправление человек!-webkit-appearance: menulist
.Скачайте исходные
.less
файлы и.border-radius()
оставьте миксин пустым.источник
Если вы используете Bootstrap версии <3 ...
С sass / scss
Менее
Вам нужно будет установить эту переменную перед импортом начальной загрузки. Это повлияет на все скважины и навигационные панели.
Обновить
Если вы используете Bootstrap 3, baseBorderRadius должен быть border-radius-base
источник
Если вы хотите избежать перекомпиляции всего, просто добавьте
.btn {border-radius: 0;}
в свой CSS.источник
.btn
источник
Этот вопрос довольно старый, однако он хорошо виден в поисковых системах даже в поисках, связанных с Bootstrap 4 . Я думаю, что стоит добавить ответ для отключения закругленных углов, путь BS4.
В
_variables.scss
существует несколько глобальных модификаторов существует , чтобы быстро изменить вещи , такие , как включение или отключение гибкая система ГИРД, закругленные углы, градиенты и т.д.:Закругленные углы
enabled
по умолчанию.Если вы предпочитаете компилировать Bootstrap 4, используя Sass и свой собственный,
_custom.scss
такой как я (или используя официальный настройщик), достаточно переопределить связанную переменную:источник
Или определите миксин и включите его там, где вы хотите, чтобы кнопка была без заземления.
источник
px
избыточно, нет?При использовании Bootstrap> =
3.0
исходные файлы (SASS
илиLESS
) вам не нужно избавляться от закругленных углов на всем, если есть только один элемент, который вас беспокоит, например, просто избавиться от закругленных углов на панели навигации, использовать:С SCSS:
Менее:
Однако, если вы хотите избавиться от закругленных углов на всем, вы можете сделать то, что упомянуло @ adamwong246, и использовать:
Эти две настройки являются «корневыми» настройками, от которых
navbar-border-radius
наследуются другие настройки, например , если не указаны другие значения.Для списка всех переменных проверьте variables.less или variables.scss
источник
Код, размещенный выше @BrunoS, не работает для меня,
что я использовал
Я надеюсь, что это поможет кому-то
источник
LESS
Существует очень простой способ настроить Bootstrap:
источник
Или вы можете добавить это в html элемента, из которого вы хотите удалить радиус границы (таким образом вы не удалили бы его из всех кнопок / элементов):
источник
С SASS Bootstrap - если вы сами компилируете Bootstrap - вы можете установить весь радиус границы (или более конкретный) просто на ноль:
источник
@import "../node_modules/bootstrap/scss/bootstrap";
и bootstrap не переопределит их, так как они объявлены с!default
ключевым словом в bootstrap-source.Bootstrap имеет свои собственные классы для границ, включая
.rounded-0
избавление от закругленных углов на любом элементе, включаяbuttons
https://getbootstrap.com/docs/4.4/utilities/borders/#border-radius
источник
Вы также можете взглянуть на FlatStrap . Он обеспечивает замену в стиле Metro для Bootstrap CSS без закругленных углов, градиентов и теней.
источник
если вы используете bootstrap, вы можете просто использовать bootstrap class = "roundnded-0", чтобы сделать границу с острыми краями без закругленных углов
<button class="btn btn-info rounded-0"">Generate</button></span>
источник
Я создал еще один CSS-файл и добавил следующий код. Не все элементы включены
источник