Bootstrap Бутстрап 4 Button Groups
❮ Назад Дальше ❯
Группы кнопок
Bootstrap 4 позволяет группировать ряд кнопок вместе (в одной строке) в группе кнопок:
<div> для создания группы кнопок используйте элемент с классом .btn-group:
Пример
<div>
<button type=»button»>Apple</button>
<button type=»button»>Samsung</button>
<button type=»button»>Sony</button>
</div>
Совет: Вместо применения размеров кнопок к каждой кнопке в группе используйте класс .btn-group-lg для большой группы кнопок или .btn-group-sm для небольшой группы кнопок:
Large Buttons:
Default Buttons:
Small Buttons:
Пример
<div>
<button type=»button»>Apple</button>
<button type=»button»>Samsung</button>
<button type=»button»>Sony</button>
</div>
Вертикальные группы кнопок
Bootstrap 4 также поддерживает вертикальные группы кнопок:
Использовать класс . чтобы создать вертикальную группу кнопок:
btn-group-vertical
Пример
<div>
<button type=»button»>Apple</button>
<button type=»button»>Samsung</button>
<button type=»button»>Sony</button>
</div>
Вложенные группы кнопок и раскрывающееся меню
Вложенные группы кнопок для создания раскрывающихся меню (вы узнаете больше о раскрывающихся списках в более поздней главе):
Пример
<div>
<button type=»button»>Apple</button>
<button type=»button»>Samsung</button>
<div>
<button type=»button» data-toggle=»dropdown»>
Sony
</button>
<div
class=»dropdown-menu»>
<a
class=»dropdown-item» href=»#»>Tablet</a>
<a
class=»dropdown-item» href=»#»>Smartphone</a>
</div>
</div>
</div>
Раскрывающиеся списки кнопок разделения
Пример
<div>
<button type=»button»>Sony</button>
<button type=»button»
data-toggle=»dropdown»>
<span></span>
</button>
<div>
<a
class=»dropdown-item» href=»#»>Tablet</a>
<a
class=»dropdown-item» href=»#»>Smartphone</a>
</div>
</div>
Вертикальная группа кнопок w/раскрывающийся список
Пример
<div>
<button type=»button»>Apple</button>
<div>
<button type=»button» data-toggle=»dropdown»>
Sony
</button>
<div class=»dropdown-menu»>
<a class=»dropdown-item» href=»#»>Tablet</a>
<a class=»dropdown-item» href=»#»>Smartphone</a>
</div>
</div>
</div>
Группы кнопок бок о бок
Группы кнопок «inline» по умолчанию, что делает их появляться бок о бок, когда у вас есть несколько групп:
Пример
<div>
<button type=»button»>Apple</button>
<button type=»button»>Samsung</button>
<button type=»button»>Sony</button>
</div>
<div>
<button type=»button»>BMW</button>
<button type=»button»>Mercedes</button>
<button type=»button»>Volvo</button>
</div>
❮ Назад Дальше ❯
Можете ли вы стилизовать кнопки HTML-формы с помощью CSS?
спросил
Изменено 6 лет, 9 месяцев назад
Просмотрено 179 тысяч раз
Мне не нравится стиль кнопки по умолчанию.
Это действительно скучно. Я использую
9Кнопки типа 0002. Могу ли я как-то стилизовать их в css? Если нет, я думаю, что другим способом сделать это было бы использовать вместо этого div и сделать его ссылкой. Как заставить их работать с формами?
- HTML
- CSS
- формы
Вы можете легко добиться желаемого с помощью CSS: —
HTML
ДЕМО
2
Да, это довольно просто:
input[type="submit"]{ фон: #fff; граница: 1px сплошная #000; тень текста: 1px 1px 1px #000; }Я рекомендую присвоить ему идентификатор или класс, чтобы вам было легче ориентироваться на него.
2
Да, вы можете настроить таргетинг на тех, кто специально использует
input[type=submit]например..myFormClass input[type=submit] { поле: 10 пикселей; цвет белый; цвет фона: синий; }1
Вы можете напрямую создать свой собственный стиль следующим образом:
input[type=button] { // Измените стиль по своему усмотрению }1
Вы можете добавить:
-webkit-внешний вид: нет;, если вам нужно, чтобы он выглядел одинаково в Mobile Safari…
запишите приведенный ниже стиль в тот же раздел заголовка html-файла или запишите в файл .css
