Як виглядає верстка сайту на Bootstrap?

21

Від автора: я вітаю вас. У минулих статтях ми розглянули підключення та компоненти фреймворку Bootstrap, а також його сітку. Настав час підсумувати наші знання і зверстати який-небудь простий сайт. Відповідно, сьогодні ви побачите, як виглядає на Bootstrap верстка сайту, нехай і схематично, а не з PSD-макету. Але спочатку ще раз повторимо, чим відрізняється верстка на бутстрапе від стандартної верстки з допомогою CSS.

Верстка за допомогою фреймворку: переваги

Як виглядає верстка сайту на Bootstrap?

Bootstrap, як і будь-який інший фреймворк, значно спрощує процес верстки веб-сторінок. Це css і js-фреймворк, тобто в ньому є як готові стилі, так і веб-сценарії. Ці готові компоненти прискорюють верстку в 3-10 разів, тому що вам достатньо практично прописати потрібні класи і data-атрибути для активації цих стилів і сценаріїв.

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

Наприклад, при використанні медіа-запитів може знадобитися врахувати купу нюансів, щоб ваш сайт не «поплив». З допомогою бутстрапа ж верстка спочатку буде дуже акуратною, тому що ви взагалі не будете чіпати css, а якщо і буде, то тільки для зміни зовнішнього вигляду елементів, що ніяк не зламає сайт.

Друге, дуже важливе перевагу – відкритий вихідний код Bootstrap. Ви повністю усвідомлюєте, наскільки це важлива перевага вже після того, як створите з допомогою фреймворку свої перші сайти.

За замовчуванням ви завантажуєте повну версію фреймворку – файли bootstrap.css, bootstrap.js, а також иконочный шрифт. Але ніхто не заважає вам самим вибрати, які компоненти фреймворку включити у власну збірку, а які ні. Ви навіть можете вимкнути взагалі всі компоненти і залишити, наприклад, тільки сітку, таби і карусель. І тоді ви значно зменшуєте розмір файлів і підключаєте до проекту тільки що, що буде на ньому використовуватися.

Це професійний підхід до використання bootstrap. Насправді більшість css-стилів, описані в ньому, вам просто може не знадобитися. Наприклад, для кнопок, таблиць, зображень і т. д. ви самі можете описати якісь стилі. По суті, по-справжньому цінним у фреймворку Bootstrap є сітка, а також деякі javascript-компоненти.

Як створити простий схематичний сайт на bootstrap

На ділі ви можете створювати шаблони-схеми буквально за пару хвилин, коли добре потренуєтесь працювати з фреймворком. Давайте створимо типовий простий двухколоночный макет, у якому буде шапка, блок контенту, бічна колонка і футер.

Для початку необхідно визначитися з тим, чи контейнер сайту мати фіксовані розміри, або ж буде повністю гумовим. У разі, якщо обшему контейнера ви поставите клас container, його максимальна ширина буде обмежена 1170 пікселями. Якщо ж ви вкажете container-fluid, ширину сайту ніщо не обмежуватиме. Наприклад, на моніторах шириною 1920 пікселів його ширина буде такою ж – на всі 100% вікна.

Відповідно, цей момент ви повинні вирішити для себе ще на етапі дизайну сайту, щоб розуміти, потрібна хоч якась прив’язка до пікселям чи ні.

Відмінно, в нашому шаблоні буде три ряди – це шапка, контент + сайдбар і футер. Загалом-то, це стандартний вигляд простих двухколоночных сайтів. Давайте подивимося на розмітку:

Шапка

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

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

Загальна формула для зсуву вліво сайдбара проста: зрушити саму бічну колонку вліво на ширину контент, а контент – вправо на ширину сайдбара. Але для початку потрібно природно вирішити, якою буде ця ширина. Нехай у нас основний блок буде займати 75% ширини, а бічна колонка 25%. Тоді нам потрібен такий код:

Природно, вкладіть це в один ряд.

Створюємо сайдбар

У бічній колонці розмістимо вертикальне меню. Для цього ви можете подивитися в документації, які є класи для стилізації списків. Клікайте на «компоненти» – «групи списків».

Сайдбар

  • Автосалони
    19
  • Автомайстерні
    178
  • Ремонт
  • Оголошення

Ось таке вийшло меню, зі значками:

Як виглядає верстка сайту на Bootstrap?

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

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

Створюємо блок контенту

Контент, як ми пам’ятаємо, повинен у нашому випадку стояти вище по розмітці, так що наступний код вставляйте над сайдбаром. Обидва цих блоку поміщаються в один ряд. Ось такий код я вставив поки в свій контент:

Content

Header

Як виглядає верстка сайту на Bootstrap?

Lorem ipsum doloret yuio ffghgf fdfgfhf ttyuytg gjgfj gfgjgf ghgfjgf gfgugf ghjkghkhg gfjgj utytiytik fdhbfbvcv fdhfdhfh gngnggf fdhfdhfdhfd fdhfdhfdhfdhffd hfdhfdhfdhfd hdfhfdhfdhf hfdhfd fdhfdhfdhdf fdhfdhfdhhfd hfdhd

Як бачите, тут ми застосовуємо систему вкладеної сітки. За задумом в контенті 3 анонсу статей повинно розташовуватися в ряд. Щоб цього легко домогтися, ми будемо приймати блок col-md-9 col-md-push-3, тобто блок контенту, за контейнер для сітки. В такому разі ми створюємо в ньому ряд, де, в свою чергу, нам знову стає доступна 12-ти колоночная сітка. Класом col-sm-4 ми даємо одному анонсу статті ширину рівне 33,33%. Таким чином, в один рядок у контенті ідеально помістяться 3 анонсу. Просто скопіюйте та вставте цей блок ще 2 рази, щоб перевірити, як вони з’являться.

Ось так відображуються наші блоки з анонсами статей:

Як виглядає верстка сайту на Bootstrap?

Ідеально рівно. Взагалі без яких-небудь питань. У 3 колонки анонси будуть розташовуватися на всіх пристроях, крім найменших, де все буде в одну колонку.

Я сподіваюся, цей приклад вам зрозумілий. Тепер пропоную розібрати трохи більш нестандартний приклад. Створимо в контенті ще один ряд. На цей раз задумка така – відобразити в ряді одну статтю і слайдер, між ними зробити невеликий відступ. Припустимо, стаття буде зліва, а слайдер – праворуч. Між ними невеликий зазор + все це, природно, має бути адаптивним.

Код анонсу статті ви можете просто скопіювати і вставити в наш новий ряд. Нам залишається зробити слайдер. Власне, я не буду тут наводити його код, тому що він дуже громіздкий. Перейдіть на офіційний сайт Бутстрапа або на російськомовну версію, перейдіть в розділ Javascript і шукайте там Карусель (Carousel).

Перегляньте приклад, наведений у документації. Ви повинні в ньому розібратися, нічого складного там немає. По суті, для того, щоб слайдер почав працювати, необхідно лише взяти свої зображення і прописати шлях до них в атрибутах src для тегів image.

Справа не в тому, як вам зробити сам слайдер – цю інформацію можна без проблем знайти в документації. А наше завдання зараз – зрозуміти, блок яких розмірів потрібно обернути слайдер. У нас в ряді вільно ще 8 клітинок, але оскільки між анонсом статті і слайдером повинен бути невеликий відступ, я оберну слайдер ось у такий блок:

Тобто сам слайдер отримує ширину 7 колонок на великих, середніх і маленьких пристроях, а також відступ в одну колонку, теж на всіх цих пристроях. Підсумок:

Як виглядає верстка сайту на Bootstrap?

Ось тепер у нас в одному рядку анонс статті і слайдер, а нижче ще 3 анонсу, і все це розташовується в блоці контенту.

Так, ну футер я, мабуть, взагалі не буду створювати, тому що ви і самі тепер можете зрозуміти, як його створити. За таким же принципом, що і шапку. Ці елементи нас не особливо цікавлять сьогодні, тому що ми працювали з бічної колонкою і особливо з основним блоком.

Якщо ви повторювали всі за мною, тільки зображення використовували свої, то змушені будете визнати, що у нас вийшла досить рівна верстка (якщо не враховувати жахливий зовнішній вигляд блоків, але нам ніколи зараз їх поправляти). Спробую, «сфотографувати» весь сайт:

Як виглядає верстка сайту на Bootstrap?

Ніяких горизонтальних скроллов не утворюється, сайт зручно переглядати на будь-яких дозволи екранів, нічого не сповзає, нічого не вивалюється і т. д.

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

Чи готові ви?

Що ж, ми розглянули, як виглядає верстка на Bootstrap 3. Ну а тепер скажіть мені одну просту річ? Ви хочете вивчити фреймворк Bootstrap в наступні 5-10 днів на професійному рівні і почати створювати адаптивні шаблони будь-якого рівня складності?

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

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

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

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