Статьи

Що таке Bootstrap і як його використовувати?

  1. Цілі
  2. Що таке Bootstrap?
  3. Чому важлива структура? Чи потрібно використовувати один?
  4. Створення основного шаблону з Bootstrap
  5. Привіт Світ!
  6. Сітка
  7. Ікони
  8. Додавання спеціальних стилів до Bootstrap
  9. Висновок

Якщо у вас є якийсь інтерес до веб-розробки, ви, напевно, чули про це   Bootstrap

Якщо у вас є якийсь інтерес до веб-розробки, ви, напевно, чули про це Bootstrap . Згідно з офіційним веб-сайтом, Bootstrap є найпопулярнішою HTML, CSS, і JS рамкою для розробки адаптивних, мобільних перших проектів в Інтернеті. Гарно звучить! Тепер як його використовувати?

Було б легко відправити вас до своїх Починаємо сторінки і назвіть його на день. Їх керівництво по встановленню дійсно є численною корисною інформацією - посиланнями на CDN, поясненнями щодо встановлення з Bower, npm і Composer, інформацію про інтеграцію з Autoprefixer і LESS, купу шаблонів, ліцензій і перекладів - але це, звичайно, не крок за кроком керівництво для початку (що дуже добре може бути в дусі автодидактизму).

Коли я відкрив Bootstrap кілька років тому, адаптивний дизайн все ще набирав популярності, а не обов'язково очікуваної норми. Маючи лише колись веб-сайти з нуля, я був трохи заплутаний щодо всієї концепції рамки. Я вважаю, що це ще більше заплутано для початківців, яких тепер очікують вивчення адаптивних дизайнерських концепцій і бібліотек Bootstrap і JavaScript, на додаток до HTML, CSS і JS.

Цей посібник призначений як перший погляд на Bootstrap для початківців, так що не буде вдаватися до інтеграції LESS та Sass, які є більш проміжними / просунутими поняттями. Хоча це написано для поточної, стабільної версії Bootstrap 3, поняття залишиться незмінними для майбутніх версій.

Цілі

  • Дізнайтеся, що таке фронтальний фреймворк і як він може бути корисним
  • Зрозумійте, як правильно включити CSS і JavaScript у Bootstrap і почати налаштування

Передумови

  • Базові знання та розуміння HTML та CSS

Що таке Bootstrap?

Bootstrap можна звести до трьох основних файлів:

Крім того, потрібна програма Bootstrap jQuery функціонувати. jQuery є надзвичайно популярною і широко використовуваною бібліотекою JavaScript, яка одночасно спрощує і додає сумісність з перехресними браузерами в JavaScript.

Все інше, що може трапитися під час вивчення документації Bootstrap - Grunt, Gulp, Sass, LESS, bower, npm, і т.д. - не є необхідним для початку роботи з Bootstrap. Це бігувачі завдань, препроцесори, допоміжні засоби для встановлення та менеджери пакунків, тому не варто знеохочуватися, якщо ви ще не знаєте, як використовувати їх.

Чому важлива структура? Чи потрібно використовувати один?

Вам зовсім не потрібно використовувати рамки - я нещодавно написав статтю Вам не потрібні рамки: Розуміння основ чуйного дизайну , які я рекомендував би прочитати, якщо ви хочете дізнатися більше про адаптивний дизайн. Однак рамки дуже популярні і мають багато переваг, тому важливо навчитися працювати з ними.

Деякі способи допомоги рамкам:

  • Запобігання повторення між проектами
  • Використовуйте адаптивний дизайн, щоб ваш веб-сайт адаптувався до різних розмірів екрану - мобільний, настільний і все між ними
  • Додайте послідовність до розробки та коду між проектами та між розробниками
  • Швидко і легко прототип нових конструкцій
  • Забезпечте сумісність між браузерами

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

Сітка це, мабуть, один з найважливіших аспектів цієї структури. Це основа, на якій створюється весь макет. Крім того, Bootstrap основний CSS також додасть корисний стиль для форм, таблиць, кнопок, списків і зображень, а також повнофункціональних панелей навігації, у той час як ядро JavaScript додасть корисний код для створення модальних моделей, каруселей, сповіщень, спливаючих вікон, випадаючих списків і акордеонів.

Крім того, Bootstrap   основний CSS   також додасть корисний стиль для форм, таблиць, кнопок, списків і зображень, а також повнофункціональних панелей навігації, у той час як   ядро JavaScript   додасть корисний код для створення модальних моделей, каруселей, сповіщень, спливаючих вікон, випадаючих списків і акордеонів

Давайте почнемо!

Створення основного шаблону з Bootstrap

Завантажувальний пристрій постачається з кілька дуже простих прикладів щоб почати з, але це так само легко почати з "нуля", так що ми зробимо. По-перше, я буду використовувати Bootstrap, щоб викласти фундамент, тоді ми додамо власний стиль, щоб зробити щось цікавим і модним.

Перший крок - це завантажити Bootstrap . Файл zip прийде з каталогами css , шрифтів і js . Розпакуйте і збережіть файли в певному каталозі. Bootstrap не поставляється з будь-яким HTML-кодом, але вони мають "Привіт, Світ!" для запуску документації, тому ми будемо використовувати її як index.html .

Привіт Світ!

<! DOCTYPE html> <html lang = "en"> <голова> <meta charset = "utf-8" /> <meta http-equiv = "сумісний з X-UA" content = "IE = edge" /> < meta name = "viewport" content = "width = device-width, initial-scale = 1" /> <title> Шаблон Bootstrap 101 </ title> <link href = "css / bootstrap.min.css </> </ head> <body> <h1> Привіт, світ! </ h1> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </ script> <script src = "js / bootstrap.min .js "> </ script> </ body> </ html>

Досить легко почати. У нас є основні теги doctype, html, head і body. Тег meta name = "viewport" особливо важливий для адаптивного дизайну - він гарантує, що ваш веб-сайт має співвідношення 1: 1 з екраном (розмір екрану).

Крім того, ми просто додаємо основний CSS Bootstrap у <head> ...

<link href = "css / bootstrap.min.css" rel = "stylesheet" />

jQuery за допомогою Google CDN до закриття тегу </body> ...

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </ script>

і ядро ​​завантаження Bootstrap.

<script src = "js / bootstrap.min.js"> </ script>

Завантажувальний JavaScript і спеціальний JavaScript повинні піти нижче jQuery, щоб функціонувати! Крім того, ми можемо посилатися на jQuery через URL-адресу Google, оскільки це зменшує навантаження на наш сервер, але ви можете завантажити його якщо ви хочете працювати локально.

Ну, це все, що потрібно для початку роботи з Bootstrap! Давайте перевіримо наш дивовижний новий сайт.

Давайте перевіримо наш дивовижний новий сайт

... відмінно!

Незважаючи на те, що ми нічого не маємо, ми в найкоротші терміни можемо отримати копіювання та вставлення з документів і мати хороший, функціонуючий веб-сайт. Перш за все, ми додаємо в типову Bootstrap верхню навігаційну панель. Я зробив їх спрощену версію приклад NavBar . Розмістіть цей код прямо під тегом <body>.

<nav class = "navbar-обернена навігація-navbar-static-top"> <div class = "container"> <div class = "navbar-header"> <кнопка type = "button" class = "navbar-перемикання згорнутих" даних -toggle = "collapse" data-target = "# bs-example-navbar-collapse-1" aria-expanded = "false"> <span class = "sr-only"> Перемикати навігацію </ span> <span class = "icon-bar"> </ span> <span class = "icon-bar"> </ span> <span class = "icon-bar"> </ span> </ кнопка> <a class = "navbar-бренд "href =" # "> Баланс Веб-розробка </ a> </ div> <div class =" згорнути навідник-колапс "id =" bs-example-navbar-collapse-1 "> <ul class =" nav navbar- nav navbar-right "> <li> <a href =" # "> Про </ a> </ li> <li class =" dropdown "> <a href =" # "class =" dropdown-toggle "дані toggle = "dropdown" role = "button" aria-haspopup = "true" aria-expanded = "false"> Послуги <span class = "caret"> </ span> </ a> <ul class = "випадаюче меню "> <li> <a href =" # "> Оформлення <</ a> </ li> <li> <a href = "#"> Розробка </ a> </ li> <li> <a href = "#"> Консалтинг </ a> </ li> < / ul> </ li> <li> <a href = "#"> Контакти </ a> </ li> </ ul> </ div> </ div> </ nav>

<nav class = navbar-обернена навігація-navbar-static-top> <div class = container> <div class = navbar-header> <кнопка type = button class = navbar-перемикання згорнутих даних -toggle = collapse data-target = # bs-example-navbar-collapse-1 aria-expanded = false> <span class = sr-only> Перемикати навігацію </ span> <span class = icon-bar> </ span> <span class = icon-bar> </ span> <span class = icon-bar> </ span> </ кнопка> <a class = navbar-бренд href = # > Баланс Веб-розробка </ a> </ div> <div class = згорнути навідник-колапс id = bs-example-navbar-collapse-1 > <ul class = nav navbar- nav navbar-right > <li> <a href = # > Про </ a> </ li> <li class = dropdown > <a href = # class = dropdown-toggle дані toggle = dropdown role = button aria-haspopup = true aria-expanded = false> Послуги <span class = caret> </ span> </ a> <ul class = випадаюче меню > <li> <a href = # > Оформлення  <</ a> </ li> <li> <a href = #> Розробка </ a> </ li> <li> <a href = #> Консалтинг </ a> </ li> < / ul> </ li> <li> <a href = #> Контакти </ a> </ li> </ ul> </ div> </ div> </ nav>

Здається, це незрозумілий безлад, але це не так складно. У першому рядку я визначаю всю панель як навігаційну панель, вибираючи темну кольорову схему з оберненою навігацією, і обираю використовувати navbar-static-top, на відміну від фіксованого (липкого) заголовка.

<nav class = "навігаційна панель навігаційної панелі Navbar-static-Top"> </ nav>

Контейнер встановлює максимальну ширину вмісту в повній ширині навігаційної панелі.

<div class = "container"> </ div>

Клас navbar-header містить інформацію "бренд", де можна помістити логотип або назву компанії. Ми робимо веб-сайт для вигаданої технічної компанії Balance Web Development (ну, це краще, ніж їхній старий сайт! ).

Кнопка прихована на робочому столі і стає меню випадаючого гамбургера на мобільному телефоні (кожен <span class = "icon-bar"> - рядок у гамбургері).

<div class = "navbar-header"> <кнопка типу = "кнопка" class = "navbar-toggle collapsed" data-toggle = "згорнути" data-target = "# bs-example-navbar-collapse-1" aria- expanded = "false"> <span class = "sr-only"> Увімкнути навігацію </ span> <span class = "icon-bar"> </ span> <span class = "icon-bar"> </ span> <span class = "icon-bar"> </ span> </ button> <a class = "navbar-бренд" href = "#"> Баланс Веб-розробка </ a> </ div>

Інша частина коду - це невпорядкований список, який вирівнюється праворуч.

Я вирішив, що хочу одне з тих великих заголовків, які захоплюють простір, що привертають увагу, і який називається jumbotron в термінах Bootstrap. Тут нема чого бачити, тільки джамботрон з контейнером і деякою копією.

<div class = "jumbotron"> <div class = "container"> <h1> Готовий. Набір Код. &lt;/ h1> <p> Чи готові ви встановити заклик до крос-сумісного модного слова? Ми Sassy, ​​плоскі і семантичні, так що ви чекаєте? <br>> <p> <a class = "btn btn-primary btn-lg" href = "#" роль = "кнопка"> Завантажити безкоштовну пробну версію "</ a> <a class =" btn btn -primary btn-lg "href =" # "role =" button "> Докладніше» </ a> </ p> </ div> </ div>

Є якийсь додатковий простір, який ми не хочемо, але я хочу побачити, наскільки далеко Bootstrap може отримати нас без перевизначення стилів. Як ви можете бачити, ми вже маємо досить гарний, адаптований макет без написання однієї лінії CSS.

Як ви можете бачити, ми вже маємо досить гарний, адаптований макет без написання однієї лінії CSS

Сітка

Останнє, що я зроблю, це додати в деякий основний вміст, який буде мати форму сітки. Сітки є рядками ...

, які містять стовпці.

<div class = "row"> <div class = "col-md-6"> </ div> <div class = "col-md-6"> </ div> </ div>

Bootstrap працює на 12-колонній системі, тому, поки ви додаєте до 12, ви золотисті. Наведений вище приклад буде містити дві колонки ширини 50% (6/12), які будуть складатися на мобільні пристрої та становитимуть 100% ширину.

<div class = "container"> <div class = "рядок"> <div class = "col-md-4"> <span class = "glyphicon glyphicon-cloud" aria-hidden = "true"> </ span> <h3> Cloud Computable </ h3> <p> Враховуйте, якщо не вказуєте, щоб отримати доступ до eget. Fusce dapibus, телус ac cursus commodo, tortor mauris condimentum nibh. </ div> <div class = "col-md-4"> <span class = "glyphicon glyphicon-floppy-disk" aria-hidden = "true"> </ span> <h3> Сумісний назад / h3> <p> Etiam porta sem malesuada magna mollis euismod. Донедавна. Lorem ipsum dolor. </ div> <div class = "col-md-4"> <span class = "glyphicon glyphicon-консоль" aria-hidden = "true"> </ span> <h3> Безкоштовний GUI </ h3 > <p> Vestibulum id ligula porta felis euismod semper. Fusce dapibus, телус ac cursus commodo, tortor mauris condimentum nibh. </ div> </ div> </ div> </ div>

Тут ви можете побачити, що я маю три колонки з чотирьох з дванадцяти, і, як 3 x 4 = 12, все працює.

Ікони

Я також додав до декількох гліфікони для прикраси. Glyphicons - це вбудований набір іконок, який постачається з Bootstrap. Якщо ви не завантажуєте шрифти або переміщуєте їх у інший каталог, ці іконки не працюватимуть.

<span class = "glyphicon glyphicon-floppy-disk" aria-hidden = "true"> </ span>

Використання гліфікону завжди буде таким самим кодом, і змінюватиметься лише клас гліф-дискети.

Зараз я задоволений фундаментом мого макета.

Зараз я задоволений фундаментом мого макета

Додавання спеціальних стилів до Bootstrap

Не поганий для того, щоб приїхати так далеко без того, щоб торкатися лінія стиля. Це професійний, чуйний і дружній до браузера. Це, безумовно, не творчий або унікальний. Після встановлення фундаменту, ви хочете додати свій власний дизайн.

Якщо ви знаєте LESS або Sass, ви можете зіграти Обширна область налаштування Bootstrap та завантажте власну версію Bootstrap. Ми використовуємо "vanilla CSS", який є CSS без препроцесора. На щастя, ви можете просто додати додаткову таблицю стилів нижче ядра Bootstrap

Не змінюйте ядро ​​завантажувального диска - краще замінити існуючі стилі.

<link href = "css / bootstrap.min.css" rel = "stylesheet" /> <link href = "css / custom.css" rel = "stylesheet" /> <link href = "https: //fonts.googleapis .com / css? family = Монтсеррат: 400,700 "rel =" stylesheet "type =" text / css "/>

Я додав посилання на назву шрифту Google Монтсеррат . Якщо ви ніколи раніше не користувалися шрифтом Google, вам потрібно лише додати таблицю стилів шрифту до голови і змінити сімейство шрифтів потрібного елемента.

Тепер ми, нарешті, починаємо стиль. Лише через кілька хвилин я зможу перетворити свою нудну, загальну макет Bootstrap у веселу, плоску компонування. По-перше, я збираюся позбутися від того набридливого простору між навігаційною стрічкою і jumbotron.

.navbar {margin-bottom: 0; }

Кілька простих стилів до основних тегів. Я завантажую шрифт Монтсеррат на всю сторінку, я зробив заголовки напівжирними, і я зробив фон темним і світлом тексту.

тіло {фон: # 3e4649; колір: # f7f7f7; сімейство шрифтів: 'Монсеррат', sans-serif; } h1, h2 {font-weight: bold; } p {розмір шрифту: 16px; колір: #cdcdcd; }

Я збираюся зробити джамботрон зеленим і по центру.

.jumbotron {фон: # 27a967; колір: білий; text-align: center; } .jumbotron p {колір: білий; розмір шрифту: 26px; }

Я збираюся перетворити кнопки на "кнопки-примари", які є прозорими з кордоном. Я також додаю маржу, щоб вони містилися на мобільному телефоні.

.btn-primary {color: #fff; фон-колір: прозорий; колір кордону: білий; margin-bottom: 5px; } .btn-primary: hover {color: # 27a967; фоновий колір: білий; колір кордону: білий; }

Я збираюся зробити навігатор іншим відтінком темряви, зробити посилання більш світлим і змінити колір фону на наведенні.

.navbar-inverse {фон: # 2e2f31; кордон: 0; } .navbar-inverse .navbar-nav li {{color: # f7f7f7; розмір шрифту: 16px; } .navbar-inverse .navbar-nav li a: hover {фон: # 27a967; }

У випадаючому меню є свої власні класи, тому я також збираюся змінити колір тла на них і додати невелику оббивку.

.dropdown-меню {фон: # 2e2f31; кордон-радіус: 0; кордон: 0; } .dropdown-меню li a {padding: 10px; } .navbar-inverse .navbar-nav .dropdown-меню li a: hover {background: # 2c463c; }

Назад до мого HTML, я збираюся обернути розділ тега навколо моєї сітки, і називати це заклик до дії. Я також збираюся створити клас великого гліфікону і додати його до кожного значка.

<section class = "call-to-action"> <span class = "glyphicon гліфікон-хмара glyphicon-large" aria-hidden = "true"> </ span> </ section>

Останні штрихи до мого коду будуть центром нижнього виклику, додаючи маржу-дно до міток p, щоб вони правильно складалися на мобільний, і роблячи мої гліфікони більшими.

.call-to-action {text-align: center; } .call-to-action p {margin-bottom: 30px; сімейство шрифтів: sans-serif; } .glyphicon-великий {font-size: 100px; }

З однією невеликою сторінкою коду, я повністю перетворив свій макет. Звідси ви можете бути набагато більш творчими.

Звичайно, я також поставив демо як Codepen.

Висновок

Сподіваюся, ви дізналися трохи про Bootstrap і фреймворки з цього підручника. Це навряд чи подряпати поверхню того, на що здатний Bootstrap - але ви можете взяти його звідси. Документація величезна, і якщо ви ніколи не зможете зрозуміти, як зробити щось, швидше за все, швидкий пошук Google вкаже вам у правильному напрямку.

Я б заохочував вас грати і створювати власні рамки для особистих проектів, щоб допомогти вам зрозуміти реагування дизайну.

Я пишу про JavaScript, програмування і дизайн інтерфейсу. Приєднуйтесь до більш ніж 6 000 інших розробників у відповідності до мого вмісту Скасувати підписку щоразу. Ніколи жодного спаму, оголошень або партнерських посилань.

Чому важлива структура?
Чи потрібно використовувати один?
Тепер як його використовувати?
Чому важлива структура?
Чи потрібно використовувати один?
Lt;/ h1> <p> Чи готові ви встановити заклик до крос-сумісного модного слова?
Ми Sassy, ​​плоскі і семантичні, так що ви чекаєте?
Com / css?

Новости