Як створити кнопки, оформити текст і картинки в Bootstrap 3
- Як створити кнопки, оформити текст і картинки в Bootstrap 3 Доброго дня! Продовжуємо серію статей...
- заголовки
- Тема h2, 30px
- Тема h2 пояснювальний текст
- вирівнювання тексту
- Цитата, <blockquote>
- трансформація тексту
- <Dl>
- <Code>
- Контекстні кольору і фони
- Огляд класів для тексту
- Як створити кнопки на Bootstrap 3.
- типи елементів
- розміри кнопок
- блокові кнопки
- Активні і заблоковані кнопки
- Повна довідка по кнопках в Bootstrap
- Як стилізувати картинки на бутстрапа 3.
- Як зробити зображення адаптивним
- Як змінити форму зображення
- Як змінити розташування зображення
- Використання чуйних класів в бутстрапа 3.
Як створити кнопки, оформити текст і картинки в Bootstrap 3
Доброго дня! Продовжуємо серію статей про фреймворк Бутстрап3 і якщо в минулій статті розмова йшла про як задати зсув між клонкамі , Що може бути корисно вам надалі.
У цій статті ми равссмотрім можливості оформлення тексту засобами Bootstrap а також про використання чуйних класів, які дозволяють приховувати або показувати елементи веб-сторінки, коли змінюється ширина екрана браузера. І ще ми розглянемо, як за допомогою цього фреймворка ви можете створити кнопки і налаштовувати їх. Ну і наконц розберемо як в бутстрапа 3 зробити картинки адаптівнімі (міняють розмір при зміні ширини екрану) і які класи до них для стилізації. Ну що готові. Тоді починаємо.
стилізація тексту
Крім того, фреймворк додає нові стилі для звичайного тексту і малих елементів. Він визначає стандартний розмір будь-якого тексту всередині тега <body> в 14px і висоту рядка в 1,428. Для абзаців змінюються зовнішні відступи (margin) зверху і знизу: тепер це половина висоти рядка, за замовчуванням 10px.
Давайте подивимося на приклади і розберемося з текстом в бутстрапа.
заголовки
Заголовки в бутстрапа виглядають так:
Тема h2, 30px
Тема h3, 24px
Тема h4, 18px
Тема h5, 14px
Тема h6, 12px
Елемент <small> в заголовку
Також можна додати пояснювальний текст в тезі <small> і розмістити його в заголовку, він буде виглядати так:
Тема h2 пояснювальний текст
Тема h3 пояснювальний текст
Тема h4 пояснювальний текст
Тема h5 пояснювальний текст
Тема h6 пояснювальний текст
Тег <mark>
Елемент <mark> буде оформлений в такому стилі:
Ваня кома все пішло не так кома подробиці листом точка
вирівнювання тексту
У бутстрапа є набір класів для вирівнювання тексту:
<P class = "text-left"> Рівняння по лівому краю </ p> <p class = "text-center"> Текст по центру </ p> <p class = "text-right"> Рівняння по правому краю < / p> <p class = "text-justify"> Рівняння по обох краях </ p> <p class = "text-nowrap"> Текст без переносів </ p>
Більше не потрібно додавати додаткові класи для рівняння з різними варіантами text-align в css.
Текст зліва (ну, як завжди)
відцентрувати текст
текст справа
Цитата, <blockquote>
Цитати в Bootstrap виглядають так:
Цілий рік між нами відбувалося щось на зразок інтелектуальної близькості. З відтінком ворожнечі і розпусти.
Код прикладу:
<Blockquote> Цілий рік між нами відбувалося щось на зразок інтелектуальної близькості. З відтінком ворожнечі і розпусти <footer> Сергій Довлатов </ footer> </ blockquote>
Щоб додати цитаті рівняння по правому краю, додайте їй клас .blockquote-reverse:
Танцювать риба з раком, риба з раком, а петрушка з пастернаком, з пастернаком!
А цибуля з часником, а дівчина з козаком!
трансформація тексту
Трансформувати текст можна простим додаванням класів: нижній, верхній регістр і великі літери.
нижній регістр
верхній регістр
заголовні букви
<P class = "text-lowercase"> нижній регістр </ p> <p class = "text-uppercase"> великі букви </ p> <p class = "text-capitalize"> заголовні букви </ p>
<Dl>
Список описів - не самий популярний тег, але його можна зручно використовувати для швидкого створення списків з поясненнями.
Beatles - Liverpool, Great Britain Bon Jovi - New Jersey, USA <dl> <dt> Beatles </ dt> <dd> - Liverpool, Great Britain </ dd> <dt> Bon Jovi </ dt> <dd> - New Jersey, USA </ dd> </ dl>
<Code>
Bootstrap додає рядковим елементам <code> контрастний стиль, фон і червоний колір:
Приклади блокових елементів: pre, div і p.
Код прикладу:
Приклади блокових елементів: <code> pre </ code>, <code> div </ code> і <code> p </ code>.
Контекстні кольору і фони
У бутстрапа є набір класів для виділення тексту кольором або фоном: .text-muted, .text-primary, .text-success, .text-info, .text-warning, і .text-danger.
Сум печаль туга.
Важливий текст.
Добре там, де?
Іноді ви їсте тигра, а іноді тигр їсть вас.
У Польщі є пам'ятник Вікіпедії.
Ми знайдемо вас і зробимо щасливими.
<P class = "text-muted"> Грусть-печаль-туга. </ P> <p class = "text-primary"> Важливий текст. </ P> <p class = "text-success"> Добре там, де? </ p> <p class = "text-info"> іноді ви їсте тигра, а іноді тигр є вас. </ p> <p class = "text-warning"> У Польщі є пам'ятник Вікіпедії. </ p > <p class = "text-danger"> Ми знайдемо вас і зробимо щасливими. </ p>
Класи для контекстного фону такі: .bg-primary, .bg-success, .bg-info, .bg-warning, і .bg-danger.
Ніколи не довіряйте людям, які не вміють писати грамотно.
Ви успішно прочитали попередні абзаци.
Будь ласка, закрийте рот з іншого боку.
Ви і справді вважаєте, що вимкнули праску?
Увага: всі ваші коровани розграбовані.
Огляд класів для тексту
Ось вам загальний список класів, якими можна користуватися в бутстрапа для оформлення текстів і інших елементів.
Клас Опис .lead Виділяє параграф збільшенням розміру тексту .small Зменшує розмір тексту до 85% від батьківського елемента .text-left Вирівнювання тексту по лівому краю .text-center Центрування тексту .text-right Вирівнювання тексту по правому краю .text-justify Вирівнювання тексту по лівому і правому краях .text-nowrap Текст без переносів рядків .text-lowercase Текст в нижньому регістрі .text-uppercase Текст у верхньому регістрі .text-capitalize Кожне Слово з Заголовною Букви .list-unstyled Прибирає стандартне оформлення для списку і відступи для його елементів. Працює як для <ul>, так і для <ol>. Стилі заберуться тільки для елементів першого рівня вкладеності. Щоб прибрати стилі для іншої вкладеності, використовуйте це клас знову для їх батьківських елементів. .list-inline Показує всі елементи списку в один рядок, перетворюючи їх на малі .dl-horizontal Використовується для terms (<dt>) і descriptions (<dl>) в <dl> (списку описів, description list). Замість вертикального відображення опису під заголовком пари розташовуються горизонтально. У випадках невеликих екранів списки описів з таким класом будуть відображатися як зазвичай, вертикально орієнтованими.
Як створити кнопки на Bootstrap 3.
Bootstrap включає оформлення для семи видів кнопок:
Щоб кнопка відображалася в потрібному вам стилі, надайте їй відповідний клас:
- .btn-default
- .btn-primary
- .btn-success
- .btn-info
- .btn-warning
- .btn-danger
- .btn-link
Даний приклад показує, яким повинен бути код для кнопок з прикладу:
<Button type = "button" class = "btn btn-default"> Стандартна </ button> <button type = "button" class = "btn btn-primary"> Основна </ button> <button type = "button" class = "btn btn-success"> Підтвердити </ button> <button type = "button" class = "btn btn-info"> Повідомлення </ button> <button type = "button" class = "btn btn-warning"> Увага </ button> <button type = "button" class = "btn btn-danger"> Скасування </ button> <button type = "button" class = "btn btn-link"> Посилання </ button>
типи елементів
Стилі кнопок в Bootstrap можуть застосовуватися до елементів <button> і <input type = "button">, а також до посилань <a>. Кнопці потрібно присвоїти клас .btn і один з класів, щоб додати їй стиль. Для прикладу візьмемо .btn-default.
<a class="btn btn-default" href="#" role="button"> Кнопка </a> <button class = "btn btn-default" type = "submit"> Кнопка </ button> <input class = "btn btn-default" type = "button" value = "Кнопка">
В результаті ми отримаємо три однаково виглядають елемента.
розміри кнопок
Bootstrap дозволяє змінювати розмір кнопки за допомогою додаткового класу. За замовчуванням у вас є вибір з чотирьох розмірів кнопки:
Код кнопок з прикладу:
<Button type = "button" class = "btn btn-primary btn-lg"> Велика </ button> <button type = "button" class = "btn btn-primary btn-md"> Середня </ button> <button type = "button" class = "btn btn-primary btn-sm"> Маленька </ button> <button type = "button" class = "btn btn-primary btn-xs"> Ще менше </ button>
Класи, які визначають розміри кнопок:
- .btn-lg
- .btn-md
- .btn-sm
- .btn-xs
блокові кнопки
Ви можете перетворити рядкові кнопки в блокові елементи. Для цього надайте їм клас .btn-block.
<Button type = "button" class = "btn btn-primary btn-lg btn-block"> Блокова кнопка </ button> <button type = "button" class = "btn btn-default btn-lg btn-block"> блокова кнопка </ button>
Активні і заблоковані кнопки
Кнопці можна призначити активний (натиснутий) вид, а також їхній заблокований статус. Клас .active відображає, як кнопка виглядає під час натискання, а клас .disabled робить її неактивною.
Повна довідка по кнопках в Bootstrap
Клас Опис .btn Додає базове оформлення до кнопки .btn-default Стандартний вид кнопки .btn-primary Основна кнопка .btn-success Підтвердження .btn-info Кнопка для інформаційних повідомлень .btn-warning Кнопка для попереджувальних повідомлень .btn-danger Кнопка скасування, очищення форми .btn-link Кнопка, яка виглядає як посилання .btn-lg Великий розмір кнопки .btn-sm Маленька розмір .btn-xs Ще менший розмір .btn-block Блочний вид кнопки (вона займає всю ширину батьківського елемента) .active Кнопка виглядає натиснутою .disabled неактивна кнопка
Як стилізувати картинки на бутстрапа 3.
Адаптивне зображення - це зображення, яке підлаштовується під ширину елемента, в якому воно розташоване.
Тобто воно відповідає таким умовам:
- якщо ширина зображення менше ширини елемента, в якому воно розташоване, то розміри цього зображення не змінюються.
- якщо ширина зображення більше ширини елемента, в якому воно розташоване, то ширина зображення прирівнюється до доступної ширині батьківського елемента. При цьому висота даного зображення зменшується пропорційно щодо його ширини.
Як зробити зображення адаптивним
Додання зображенню адаптивності здійснюється:
- в Twitter Bootstrap 3 за допомогою додавання класу .img-responsive до тегу img.
- в Twitter Bootstrap 4 за допомогою додавання класу .img-fluid до тегу img.
Ці класи застосовує до зображення CSS властивості max-width: 100% і height: auto.
- <! - Bootstrap 3 ->
<Img src = "...» class = "img-responsive»>
<! - Bootstrap 4 ->
<Img src = "...» class = "img-fluid»>
Якщо необхідно зробити адаптивними відразу все зображення, розташовані на сторінці або в деякому блоці, то для цього необхідно скористатися одним з ніжепредставленних правил CSS:
- / * 1 Спосіб - Надати адаптивність всіх зображень. При цьому дані зображення будуть себе ввести як рядково-блокові елементи (inline-block) * /
img {
display: inline-block;
height: auto;
max-width: 100%;
}
- / * 2 Спосіб - Надати адаптивність всіх зображень. При цьому дані зображення будуть себе ввести як блокові елементи (block) * /
img {
display: block;
height: auto;
max-width: 100%;
}
- / * 3 Спосіб - Надати адаптивність всіх зображень, розташованих в елементі з id = "main». При цьому дані зображення будуть себе ввести як блокові елементи (block) * /
#main img {
display: block;
height: auto;
max-width: 100%;
}
Дане правило необхідно додати в CSS файл, який повинен бути підключений після файлу bootstrap.css.
Як змінити форму зображення
У Twitter Bootstrap 3 і 4 можна за допомогою відповідних класів зробити зображення з закругленими кутами (.img-rounded), укласти його в рамку (.img-thumbnail) або надати йому форму кола (.img-circle).
<Img src = "...» alt = »...» class = "img-rounded»>
<Img src = "...» alt = »...» class = "img-circle»>
<Img src = "...» alt = »...» class = "img-thumbnail»>
Як змінити розташування зображення
Змінити розташування зображення в Twitter Bootstrap можна за допомогою допоміжних класів float (.pull-left і .pull-right), класу .center-block і класів для вирівнювання тексту (.text-left, .text-center і .text-right) .
Увага:
Класи .pull-left, .pull-right і .center-block можуть застосовуватися для вирівнювання зображень, які ведуть себе як блокові (block) або рядково-блокові (inline-block) елементи. Після їх застосування зображення стає блоковими.
Класи .text-left, .text-center і .text-right можуть бути використані тільки для зміни розташування зображень, які ведуть себе як рядково-блокові (inline-block) елементи.
Наприклад, для того щоб розташувати зображення по лівому краю до нього необхідно додати клас .pull-left:
<Img src = "...» class = "pull-left» alt = »...»>
Наприклад, для того щоб розташувати зображення по правому краю до нього необхідно додати клас .pull-right:
<Img src = "...» class = "pull-right» alt = »...»>
Наприклад, для того щоб вирівняти зображення по центру до нього необхідно додати клас .center-block або помістити його в контейнер div з класом .text-center:
<! - 1 Спосіб. Додати до зображення клас .center-block->
<! - Застосовується для центрування зображень, які ведуть себе як блокові (block) або рядково-блокові (inline-block) елементи->
<! - Після застосування даного класу зображення стає блоковим (display: block) ->
<Img src = "...» class = "img-rounded center-block» alt = »...»>
<! - 2 Спосіб. Помістити зображення в елемент div, який має клас .text-center->
<! - Застосовується для центрування зображень, які ведуть себе як рядково-блокові (inline-block) елементи->
<Div class = "text-center»>
<Img src = "...» class = "img-rounded» alt = »...»>
</ Div>
Використання чуйних класів в бутстрапа 3.
До сих пір ми з вами розглядали випадки, коли розташування елементів практично не змінюється відносно один одного. Але як бути, якщо раптом буде потрібно переставити елементи місцями або дещо прибрати для маленьких екранів? Напряму це зробити не вийде, тому підемо на невелику хитрість - додамо два однакових елемента в різних місцях і будемо один ховати, а інший відображати. Bootstrap пропонує два набори класів для приховування і показу елементів в залежності від ширини вікна - hidden-xs і visible-xs-block. Принцип той же, що і при роботі з колонками, замість xs підставляємо потрібне ключове слово. У прикладі 2 показано як «переміщати» таким чином заголовок.
Приклад. Зміна положення заголовка
<Div class = "container"> <div class = "row"> <div class = "col-xs-12 hidden-xs"> Заголовок </ div> <div class = "col-xs-12 col-sm- 8 col-md-8 "> Колонка 1 </ div> <div class =" col-xs-12 col-sm-4 col-md-3 col-md-offset-1 "> Колонка 2 </ div> < div class = "col-xs-12 visible-xs-block"> Заголовок </ div> </ div> </ div>
Результат даного прикладу показаний на малюнку.
Тема внизу колонок при вузькій ширині вікна
В даному прикладі клас hidden-xs означає, що колонку для смартфонів слід ховати, а visible-xs-block - навпаки, показувати. При перегляді на широкому екрані заголовок буде завжди вгорі, а на вузькому внизу.
Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту і натисніть Ctrl + Enter.
також читайте
Добре там, де?Ви і справді вважаєте, що вимкнули праску?
Але як бути, якщо раптом буде потрібно переставити елементи місцями або дещо прибрати для маленьких екранів?