Як використовувати bootstrap для верстки сайтів
Вітаю вас на своєму блозі, який присвячений веб-технологій. Зокрема, сьогодні я хотів би вам розповісти про css фреймворку bootstrap. як використовувати його, як встановити та навіщо це взагалі потрібно веб-розробнику.
За кілька років в інтернеті я знайшов для себе ряд корисних сайтів і сервісів, які не мають прямого відношення до сайтобудування і взагалі темі цього блогу, але я просто хотів би порекомендувати їх і вам:
Кешбек сервіси. такі як Epn.bz і Летішопс. Перший дозволить заощадити до 15% на Аліекспресс, а другий скупитися з Кешбек більш ніж в 1000 інтернет-магазинів. Пошук авіаквитків, просто відмінний сервіс - Aviasales.ru. Шукає по сотням сайтів і видає всі варіанти авіаквитків, можна вибирати найдешевші або ті, де менше час у дорозі. Також у них відмінне моб. додаток і браузерні плагін.
Що таке Bootstrap
Це css фреймворк. По суті, це готовий конструктор, з якого вам потрібно вибрати необхідні елементи і внести їх в свій проект. Він був створений для того, щоб в кілька разів прискорити процес верстки сайту, щоб розробник не писав вручну необхідні стилі. Якщо вміло використовувати фреймворк, то можна робити менше, а отримувати більше.
переваги Bootstrap
Крім підвищення швидкості розробки, фреймворк має ще ряд явних переваг, серед яких хотів би виділити такі:
- Кросбраузерність і адаптивність. Те, що без фреймворку доводиться реалізовувати самостійно, з Bootstrap набагато простіше, тому що він, по суті, бере на себе реалізацію цих важливих аспектів. Створені в ньому сайти будуть добре відображатися на всіх пристроях, і навіть в старих браузерах все буде нормально виглядати.
- Відкритий вихідний код. Таким чином, досвідчені веб-разработчкі отримують можливість доопрацювати фремворк під свої потреби, включити в нього свої компоненти і т.д.
- Простота. Щоб опанувати фреймворком, не потрібно бути зубасті профі, якого можна розбудити вночі, і він зверстає тобі крутий сайт. Досить володіти знаннями по HTML і CSS, непогано буде знати JS на початковому рівні.
недоліки
- Bootstrap громіздкий. Так, є таке, навіть стислі по максимуму файли фреймворку все-таки містять в собі тисячі рядків коду, якого не додає швидкості готовим проектом.
- Він не підходить для всіх сайтів. Неможливо написати універсальні стилі, які підходили б під абсолютно різні дизайни. Якщо і можливо, на це пішли б роки. Bootstap годиться для шаблонних сайтів, якщо у вас супер екзотичний дизайн, доведеться частково міняти фреймворк під себе, але це буде навіть складніше, ніж розробка з нуля.
Отже, з плюсами і мінусами розібралися, але я все-таки скажу, що Bootstrap швидше хороший інструмент, ніж поганий.
установка фреймворка
Завантажити Bootstrap ви можете на офіційному сайті
Як працювати з ним
Підходимо до найголовнішого питання. Фреймворк повністю складається з готових стилів, які прив'язані до різних класів. Це означає, що вся робота з ним полягає в тому, щоб потрібних елементів на сторінці дописувати потрібні стильові класи. Я приведу вам всього лише один приклад, щоб було зрозуміло.
Створення інформативного блоку в тексті за допомогою Bootstrap
Уявімо, що нам потрібно до статті вставити врізку, так називають блок, який притиснутий до лівого або правого краю, виділений іншим кольором і містить якусь важливу інформацію. Отже, за створення таких блоків в Bootstrap відповідають класи pull-left і pull-right. Відповідно, для лівосторонніх і правобічних блоків.
Отже, перед нами стоїть завдання: створити лівобічний блок червоного кольору, шириною 250 пікселів. Що ми робимо? Створюємо div, даємо йому такі класи:
Отже, перші два класи браузер візьме з фреймворка, тому що вони вже в ньому описані. Pull-left зробить наш блок плаваючим і притисне його до лівого краю, а bg-danger зробить його фоновий колір блідо-червоним, так виводяться повідомлення про помилки.
А клас custom створений нами для того, щоб ми вже вручну додали певні стилі. Створюємо свій власний style.css і пишемо в ньому:
custom Width: 250px;
>
Ось так ось ми і добилися потрібного завдання. Нам не потрібно вручну визначати для блоку все властивості, просто задавайте потрібні класи і все. Відповідно, вивчення Bootstap полягає у вивченні класів, які в ньому є і їх використанні.
Як навчитися працювати з фреймворком?
А як мені стати профі по Bootstrap?
Як ви розумієте, безкоштовно вас ніхто вчити не буде. Вміючи працювати з даними фреймворком, ви зможете заробляти більше грошей, ніж ваші колеги, які роблять все вручну. Тому, якщо ви хочете швидко навчитися, я рекомендую взяти крутий навчальний курс від команди Webformyself У ньому ви дізнаєтеся всі тонкощі роботи з фреймворком, а заодно навчитеся створювати адаптивні сайти, причому набагато швидше, ніж без Bootstrap.