Разширено разработване на уеб интерфейс на Bootstrap Framework

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

Таблици и редове с ефекти

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

Кодът ще бъде следният:

Таблица и редове с ефект
 

 
 
Превозно средство
 
Източник
 
Състояние
 
Цена
 

 

 

 
 
Fiat 500
 
Мадрид
 
Използвани
 
9690€
 

 
 
Honda accord
 
Барселона
 
Използвани
 
14500€
 

 
 
Рено лагуна
 
Толедо
 
Използвани
 
2800€
 

 

 

След това ще създадем меню с подменю, използвайки само Bootstrap CSS:

Увеличете

Кодът ще бъде следният:

Многостепенно меню с помощта на Css Bootstrap
Администратор на продажби на клиенти 

Система
Потребители
Настройки

Разрешения
Сървъри

Vps сървър А
Vps сървър B


Потребление на ресурси
Архивиране

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

 .контейнер {ширина: 1170px; } 

Следните класове редове осигуряват ляво и дясно поле на цялата страница:

 .row {; margin -right: -15px; } 

Класът на падащото меню вече се предлага с Bootstrap и класовете на btn btn-primary бутони също. Ще добавим подменю и класове на ниво, за да можем да генерираме подменюто. Не забравяйте, че класовете имат йерархии, така че ако назовем същия клас, който имаме в Bootstrap и добавим към него някакъв атрибут, преобладава последната направена декларация.
Това е за случая, когато добавяме атрибут за смяна наляво, въпреки че класът вече е дефиниран в bootstrap.min.css

 .dropdown-menu {вляво: 150px; } 

Css и jquery изскачащ прозорец с html съдържание
Ще използваме функцията popover, която показва изскачащ прозорец, когато връзката се задържи с мишката и променливата на съдържанието има html за показване.
Ще вземем предишната таблица и ще добавим колона за технически лист.
Във всяка връзка ще имаме следното изречение и след това с идентификатора ще извикаме скрипт.

 
 

 
 
Превозно средство
 
Източник
 
Състояние
 
Цена
 
Снимки
 

 

 

 
 
Fiat 500
 
Мадрид
 
Използвани
 
9690€
 
Информационен лист
 

 
 
Honda accord
 
Барселона
 
Използвани
 
14500€
 
Информационен лист
 

 

 

 

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

Колони и блокове на страницата

Bootstrap се основава на ширина 1200 пиксела, разделена на 12 блока, които покриват 99% от структурата на мрежата, всеки блок покрива 8,3333%, еквивалентно на 100 пиксела и също има пространство от 1 пиксел.
Винаги комбинацията от блокове в един и същи ред, за да добавите 12 например:
Два блока от 3 и един от 6

Bootstrap блокове
Col-md-3 блок от 300px.
Col-md-6 блок от 600 пиксела.
Col-md-3 блок от 300px.
800px col-md-8 блок.

По -долу поставяме блок с размер 8, който е 800 пиксела:

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

Как да персонализирате Bootstrap, за да промените стиловете и функционалността

За да създадем стилове и функционалности, които да бъдат съвместими с Bootstrap, трябва да го използваме като всяка друга css или js библиотека, като друга рамка на проекта, в този случай тя ще се използва за дизайн и функционалност в браузъра на потребителя. Трябва да избягваме реформирането на оригиналните библиотеки, но да поставим нашите собствени, така че когато разработчиците на Bootstrap пуснат актуализация, няма да имаме проблем с включването на новата, ако държим промените си отделно.
За да дефинираме нашите собствени стилови таблици, трябва да създадем нов CSS файл със стилове, за да дефинираме промените си, без да засягаме оригиналния css. Нека си припомним йерархията например.
Ако в Bootstrap css bootstrap.min.css

 .col-md-3 {ширина: 25%; } 

И ние искаме той да има граница, след което в отделен файл my styles.css, можем да декларираме:

 .borderojo {граница: 1px плътно червено} 

След това на страницата извикваме и двата файла

В блока го прилагаме, както следва:

Col-md-3 блок от 300px.

Това би било равносилно на обявяването му по следния начин:

 col-md-3 {ширина: 25%; рамка: 1px плътно червено; } 

Да предположим, че по някаква причина имаше две подобни твърдения

 .borderojo {граница: 1px плътно червено; } .clientblock {border: 1px плътно синьо; }
Col-md-3 блок от 300px.

Преобладава изречението, обявено последно. Следователно блокът ще има синя рамка.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка