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

Я щойно розпочав роботу з Twitter Bootstrap, і ось одне питання.

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

Чи існує якийсь "правильний" спосіб зробити це за допомогою заздалегідь визначених класів, або я повинен вказати це вручну, як:

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

На даний момент я використовую cssстилі. Може, краще буде використовувати lessдля цього випуску?

Я думаю, це те, що ви шукаєте: http://blogsh.de/tag/bootstrap-less/

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

Ви можете використовувати його, оскільки існує міксин:

.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);

або ви можете зробити свій власний мікшин, використовуючи верхні 4, щоб зробити це одним пострілом.

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

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

Bootstrap - це просто великий, корисний, але простий CSS-файл - не фреймворк або щось, що ви не можете замінити. Я кажу це, тому що я помітив, що багато розробників стикаються з класами BS і стають ледачими кодерами "Я не можу більше писати CSS-код" (звичайно, це не ваш випадок!

Якщо в ньому є щось, що вам потрібно, перейдіть до класів Bootstrap - якщо ні, напишіть свій додатковий код в добрий ol ' style.css.

Щоб мати найкраще з обох світів, ви можете писати власні декларації МЕНШЕ і перекомпілювати все це відповідно до своїх потреб, мінімізуючи запит сервера як бонус.

Відповідно до документації bootstrap 3.0. немає ні закруглені кути клас або ідентифікатор для сну тега .

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

<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, спробуйте це

посилається з Responsive CSS Circles

Вам потрібна панель Bootstrap . Просто додайте panelклас, і ваш заголовок буде виглядати однорідним. Ви можете також додавати класи panel panel-info, panel panel-successі т.д. Це працює для майже будь-якого елементу блоку, і повинен працювати з <header>, але я очікую , що це буде використовуватися в основному з <div>с.

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

У css:

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

У html:

 <div class="footer">
        <p>blablabla</p>
      </div>

За допомогою bootstrap4 ви можете легко зробити це так: -

class="rounded" 

або

class="rounded-circle"

Якщо ви використовуєте 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);
}

У Bootstrap 4 правильним способом обмежувати ваші елементи є називати їх наступним чином у списку класів ваших елементів:

For a slight rounding effect on all corners; class="rounded"
For a slight rounding on the left; class="rounded-left"
For a slight rounding on the top; class="rounded-top"
For a slight rounding on the right; class="rounded-right"
For a slight rounding on the bottom; class="rounded-bottom" 
For a circle rounding, i.e. your element is made circular; class="rounded-circle"
And to remove rounding effects; class="rounded-0"

Щоб використовувати CSS-файли Bootstrap 4, ви можете просто скористатися CDN і скористатися таким посиланням у вашому файлі HTML:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Це забезпечить вас основами Bootstrap 4. Однак, якщо ви хочете використовувати більшість компонентів Bootstrap 4, включаючи підказки, поповери та випадаючі меню, тоді вам краще використовувати такий код:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Крім того, ви можете встановити Bootstrap, використовуючи NPM, або Bower, і посилатись на файли там.

* Зверніть увагу, що нижній тег із трьох збігається з першим тегом на шляху першого посилання.

Повним робочим прикладом може бути:

<img src="path/to/my/image/image.jpg" width="150" height="150" class="rounded-circle mx-auto">

У наведеному вище прикладі зображення центрується за допомогою автоматичного поля Bootstrap ліворуч та праворуч.