it-swarm.com.ru

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

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

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

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

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

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

76
Edward Ruchevits

Я думаю, это то, что вы ищете: 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);
}
65
Danil Speransky

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

92
Swade

Bootstrap - это большой, полезный, но простой файл CSS - не фреймворк или что-то, что вы не можете переопределить. Я говорю это потому, что заметил, что многие разработчики увлеклись BS-классами и стали ленивыми программистами «я-не-писать-CSS-код-больше» (конечно, это не ваш случай!).

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

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

17
moonwave99

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

10
Michael Scheper

Согласно документации по начальной загрузке 3.0. закругленные углы class или id для div tag отсутствуют. 

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

<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

10
Sanket Shembekar

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

В css: 

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

В HTML:

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

С bootstrap4 вы можете легко сделать это так:

class="rounded" 

или же 

class="rounded-circle"
4
Natesh bhat

В 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"

Чтобы использовать Bootstrap 4 CSS-файлы, вы можете просто использовать 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 слева и справа. 

0
cmprogram