Правильный способ создания закругленных углов в Twitter Bootstrap

69

Я только начал с Twitter Bootstrap, и вот один вопрос.

Я создаю собственный блок <header>, и я хочу, чтобы его нижние углы округлялись.

Есть ли какой-либо "правильный" способ сделать это, используя предопределенные классы, или я должен указать его вручную, например:

border-radius: 10px;               // and all that cross-browser trumpery

В настоящее время я использую стили css. Может быть, лучше использовать less для этой проблемы?

  • 0
    проверить это недавно, я попробовал влево в квадрате вправо округлено, надежда помогает кому-то
  • 0
    Я предполагаю, что с помощью «предопределенных классов» вы просто хотите добавить класс в свой <header> и задать ему закругленные углы, и, как правило, сделать его загрузочным. Вот как это происходит: stackoverflow.com/a/29383075/1450294
Теги:
less

8 ответов

65
Лучший ответ

Я думаю, это то, что вы ищете: http://blogsh.de/tag/bootstrap-less/

@import 'bootstrap.less';
div.my-class {
    .border-radius( 5px );
}

Вы можете использовать его, потому что есть mixin:

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

Для Bootstrap 3 есть 4 микшина, которые вы можете использовать...

.border-top-radius(@radius);
.border-right-radius(@radius);
.border-bottom-radius(@radius);
.border-left-radius(@radius);

или вы можете сделать свой собственный mixin, используя верхний 4, чтобы сделать это за один снимок.

.border-radius(@radius){
    .border-top-radius(@radius);
    .border-right-radius(@radius);
    .border-bottom-radius(@radius);
    .border-left-radius(@radius);
}
Поделиться
  • 6
    Итак, я должен использовать less для этого, и это невозможно с bootstrap.css ?
  • 0
    Хорошо, спасибо! Я буду использовать less тогда.
Показать ещё 5 комментариев
89

<div class="img-rounded"> даст вам закругленные углы.

Поделиться
  • 2
    Это работает только для изображений.
  • 15
    @EdwardRuchevits Нет. Это прекрасно работает и на div. Я не люблю его использовать, потому что это немного сбивает с толку, но оно работает.
Показать ещё 1 комментарий
17

Bootstrap - это просто большой, полезный, но простой CSS файл - не фреймворк или все, что вы не можете переопределить. Я говорю об этом, потому что я заметил, что многие разработчики стали придерживаться классов BS и стали ленивыми "I-can't-write-CSS-code-more" кодеры [это не ваш случай, конечно!].

Если у вас есть что-то, что вам нужно, пойдите с классами Bootstrap - если нет, напишите свой дополнительный код в добром ol style.css.

Чтобы иметь лучшее из обоих миров, вы можете написать свои собственные объявления в LESS и перекомпилировать все это по вашим потребностям, минимизируя запрос сервера в качестве бонуса.

Поделиться
  • 8
    Да, конечно. :) Просто не хочу изобретать велосипед.
  • 8
    ты имеешь в виду заново изобрести колесо :)
Показать ещё 4 комментария
10

В соответствии с документацией bootstrap 3.0. для тега div нет закругленных углов class или id.

вы можете использовать поведение круга для изображения с помощью

<img class="img-circle">

или просто использовать пользовательское свойство border-radius css3 в css

для использования только нижнего закругленного конуса, следующего за

border-bottom-left-radius:25%; // i use percentage  u can use pix.
border-bottom-right-radius:25%;// i use percentage  u can use pix.

если вы хотите отзывчивый круговой div, затем попробуйте это

из Отзывчивые круги CSS

Поделиться
9

Что вы хотите, это Bootstrap panel. Просто добавьте класс panel, и ваш заголовок будет выглядеть однородным. Вы также можете добавлять классы panel panel-info, panel panel-success и т.д. Он работает практически для любого элемента блока и должен работать с <header>, но я ожидаю, что он будет использоваться в основном с <div> s.

Поделиться
6

Без меньше, просто для данного div:

В css:

.footer {
background-color: #ab0000;
padding-top: 40px;
padding-bottom: 10px;
border-radius:5px;
}

В html:

 <div class="footer">
        <p>blablabla</p>
      </div>
Поделиться
0

С помощью bootstrap4 вы можете сделать это следующим образом: -

class="rounded"

или

class="rounded-circle"
Поделиться
-1

Если вы используете Bootstrap Sass, здесь другой способ, который позволяет не добавлять дополнительные классы к разметке вашего элемента:

@import "bootstrap/mixins/_border-radius";
@import "bootstrap/_variables";

.your-class {
  $r: $border-radius-base; // or $border-radius-large, $border-radius-small, ...
  @include border-top-radius($r);
  @include border-bottom-radius($r);
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню