Най-добрите уроци за Bootstrap за отзивчив уеб дизайн

Bootstrap е популярна интерфейсна рамка за уеб разработка. Той съдържа предварително изградени компоненти и дизайнерски елементи за оформяне на HTML съдържание. Съвременните браузъри като Chrome, Firefox, Opera, Safari и Internet Explorer поддържат Bootstrap.

Bootstrap включва адаптивна мрежа мрежа за различни оформления. Това е чудесна отправна точка за изграждане на мобилен приятелски уебсайт. Той също така включва незадължителна функционалност на JavaScript като сгъваемо съдържание, въртележки и модали.

История на версиите

Twitter първоначално разработи рамката Bootstrap като вътрешен инструмент. Те го пуснаха като проект с отворен код през август 2011 г.

Bootstrap 2 беше пуснат през януари 2012 г. Една от основните характеристики беше въвеждането на 12-колонна система с отзивчиви мрежи. Bootstrap 3 се появи през август 2013 г., преминавайки към плосък дизайн и мобилен подход. Bootstrap 4 се предлага в бета версия от август 2017 г. и вече включва Sass и Flexbox.

Bootstrap 4 се разработва в продължение на две години, преди да пусне някои бета версии през 2017 г., докато първата стабилна версия излезе през януари 2018 г. Някои забележителни промени включват:

  • Преместено от Less в Sass;
  • Преместено във Flexbox и подобрена мрежа мрежа;
  • Добавени карти (заместване на кладенци, миниатюри и панели);
  • И още много!

По време на писането последната версия на Bootstrap е 4.1.3. Ако искате да сте в крак с новини за съобщения, следвайте ги тук.

Инсталация

Има две основни опции за добавяне на Bootstrap към вашия уеб проект. Можете да направите връзка към публично достъпни източници или директно да изтеглите рамката.

Връзка към друг източник

Можете да добавите Bootstrap CSS, като използвате елемент във вашата уеб страница, който препраща към мрежа за доставка на съдържание (CDN):

Добавянето на JavaScript елементите на Bootstrap е подобно на елементите, обикновено поставени в долната част на вашия таг. Може да се наложи първо да включите някои зависимости. Обърнете специално внимание на изброената поръчка:

Забележка: Това са само примери и могат да се променят без предизвестие. Моля, обърнете се към CDN за актуални връзки, които да включите във вашия проект.

Изтеглете / инсталирайте

Можете да изтеглите и инсталирате изходните файлове на Bootstrap с Bower, Composer, Meteor или npm. Това позволява по-голям контрол и възможност за включване или изключване на модули, ако е необходимо.

npm install bootstrap

gem 'bootstrap', '~> 4.1.3'

Забележка: Това са само примери и могат да се променят без предизвестие. Моля, обърнете се към празния уебсайт „rel = 'nofollow'> Bootstrap за най-актуалните връзки.

Решетъчната система Bootstrap

Мрежовата система е първа мобилна флексбокс система за бързо изграждане на оформления с всякакви форми и размери, подходящи за всички устройства. Базира се на оформление от 12 колони и има множество нива, по един за всеки диапазон на медийни заявки.

Bootstrap се предлага с предварително дефинирани мрежови класове за вашето използване при маркиране. Вижте повече подробности и примери на //getbootstrap.com/docs/4.1/layout/grid/

Boostrap функции

Повече информация:

Bootstrap има задълбочена документация с много примери и HTML шаблон за започване (този шаблон има само скрипт; той не съдържа настройка на мрежата, ако това е, което търсите).

Освен това можете да намерите както безплатни, така и платени теми, които се основават на рамката на Bootstrap, за да осигурят по-персонализиран и стилен външен вид.

Bootstrap ресурси:

Официалният блог на Bootstrap

Вдъхновение за сайта на Bootstrap

Витрина на сайтове, изградени с помощта на Bootstrap

HTML линтер за проекти, използващи Bootstrap

Дизайн елементи и кодови фрагменти за Bootstrap

Код, тема и добавки за Bootstrap

Първи стъпки с урок за Bootstrap

Използването на Bootstrap улеснява проектирането на напълно отзивчив уебсайт и е рамка, която си заслужава да се научи.

Какво е отзивчив уебсайт?

Отзивчивият уебсайт е уебсайт, който преоразмерява и пренарежда тези елементи на страницата в зависимост от размера на вашия браузър. С адаптивния уебсайт, ако преоразмерите браузъра си, можете да видите промените да се случват в реално време. Bootstrap прави вашия уебсайт отзивчив за вас.

Как да добавите Bootstrap към вашата страница

Добавянето на bootstrap към вашата страница е бърз процес, просто добавете следното към маркерите в кода си.

Също така ще трябва да добавите следното между bodyтаговете в кода си. С bootstrap ще използвате тагове. Когато използвате много от функциите на Bootstrap, всеки маркер ще има свой собствен уникален набор от класове, които позволяват на маркера да изпълнява своята задача. Други раздели на това ръководство за Bootstrap ще покажат още примери за това как Bootstrap използва етикети. ( етикетите не са изключителни за Bootstrap, но Bootstrap ги използва.).

По-долу е даден кодът, който ще се добави към bodyмаркерите във вашия код, за да завършите започването. Имайте предвид, че докато това създава контейнера, страницата ще остане празна, докато не добавите съдържание към контейнера.

Congratulations!

Bootstrap is now working on this page

Шаблони

Шаблоните са предварително изградени набори от инструменти, които правят въртенето на нова уеб страница бриз. Ако имате обща представа за желаното оформление или ако искате да разгледате библиотека с общи шаблони за оформление за идеи, шаблоните на Bootstrap отнемат голяма част от досадата и неудовлетворенията от първоначалния процес на изграждане. Тази помощ ви помага да се съсредоточите върху по-фините детайли на проекта, вместо да се чудите защо CSS не си сътрудничи.

Приготвяме се да започнем

Връзки на шаблони

Навигационна лента

Рамката Bootstrap ви предоставя ленти за навигация за повикване на функции. Накратко, лентата за навигация (наричана още навигационна лента) е заглавка в горната част на страницата, за да се покаже навигационна информация.

Как да използвам

За да използвате лентите за навигация Bootstrap, добавяте елемент отгоре вътре в елемента на вашата уеб страница. Има различни стилове, които можете да добавите, за да персонализирате показването на вашите навигационни ленти.

Пример за код

Това е кодът, необходим за създаване на основна лента за навигация.

 Site Name 
  • Home
  • Page 1
  • Page 2
  • Page 3

Navbar стилове

Bootstrap предоставя набор от класове в рамката на Bootstrap за оформяне на вашите навигационни ленти. Тези класове са както следва:

Добавяне на падащи менюта към лентата за навигация

Можете да включите падащо меню в лентата за навигация. Тази функция изисква да включите javascript файла на Bootstrap, за да работи.

  • Drop down
    • Item 1
    • Item 2
    • Item 3
  • Добавяне на бутони към лентата за навигация

    Можете да добавяте бутони в лентата за навигация. Съществуващите класове Bootstrap Button работят, но ще трябва да включите класа navbar-btnв края на списъка с класове.

    Button

    Добавяне на формуляри към лентата за навигация

    Можете също да добавяте формуляри към лентата за навигация. Това може да се използва за задачи като поле за търсене, поле за бързо влизане и т.н.

     Search 

    Подравняване на елементи отдясно на лентата за навигация

    В някои случаи може да искате да подравните елементи в лентата за навигация отдясно (например бутон за вход или регистрация.). За да направите това, ще трябва да използвате navbar-rightкласа.

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3
    • Action Link #1
    • Action Link #2

    Показване на лентата за навигация независимо от превъртането

    В някои случаи може да искате да запазите лентата за навигация в горната или долната част на екрана, независимо от превъртането. Ще трябва да добавите или елемента navbar-fixed-topили navbar-fixed-bottomклас към елемента.

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3

    Свиване на лентата за навигация

    На малък екран (като телефон или таблет) лентата за навигация ще заема твърде много място. За щастие опцията за свиване на лентата за навигация съществува. Можете да постигнете това, като използвате следния пример.

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3

    Примери за Navbar

    Original text