Оформление с Twitter Bootstrap - Част 1

Съдържание

Twitter Bootstrap е колекция от безплатни софтуерни инструменти за създаване на уеб сайтове и приложения.
Това е рамка за насърчаване на последователността чрез вътрешни инструменти. Преди Bootstrap бяха използвани различни библиотеки за разработване на потребителски интерфейс, което доведе до несъответствия и голямо натоварване при поддръжка.
Bootstrap е модулен и по същество се състои от поредица от стилове, които реализират разнообразието от компоненти на инструмента. Таблица със стилове, наречена bootstrap.less, включва компонентите на таблицата със стилове. Разработчиците могат да адаптират един и същ Bootstrap файл, като избират компонентите, които искат да използват в своя проект.
Инструменти и класове, налични в Bootstrap
Бандова система и отзивчив дизайн
Bootstrap се предлага със стандартно оформление на мрежата с широчина 940 пиксела. Като алтернатива, разработчикът може да използва оформление с променлива ширина. Това автоматично регулира ширината на колоните.
Стиловият лист на CSS
Bootstrap предоставя набор от стилови таблици, които предоставят основни стилови дефиниции за всички HTML компоненти. Това придава еднаквост на браузъра и системата за ширина, придава модерен вид за форматиране на текстови елементи, таблици и формуляри.
Компоненти за многократна употреба
Обикновените HTML елементи, Bootstrap съдържа друг често използван интерфейс на елементи. Той включва бутони с разширени функции, като например група от бутони или бутони с опция на падащо меню, списъци за навигация, хоризонтални и вертикални етикети, галета, пагинация, етикети, разширени възможности за типографски миниатюри, формати на предупредителни съобщения и ленти за напредък..
Приставки за Javascript и jQuery
Компонентите на Javascript за Bootstrap се основават на библиотеката на jQuery Javascript. Приставките се намират в инструмента за добавки jQuery. Те предоставят допълнителни елементи на потребителския интерфейс като диалози, подсказки и въртележки.
Те също така разширяват функционалността на някои съществуващи интерфейсни елементи, включително например функция за автоматично попълване на полета за въвеждане. Версия 2.0 поддържа следните приставки на Javascript: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel и Typeahead.
За да използва Bootstrap в HTML страница, разработчикът просто трябва да изтегли таблицата със стилове на Bootstrap CSS и да я свърже в HTML файла.
Изтеглете компилирания CSS и Javascript код, което е най -лесният начин да започнете с Bootstrap. Недостатъкът е, че тази версия не включва оригиналните файлове или документация. За да изтеглите тази версия, отидете на getbootstrap.com и натиснете бутона Download Bootstrap.
Можем също така да изберем да се свържем към началните файлове от външни сървъри, както следва:
За да използвате тези файлове, променете следните връзки на страниците си
 

След като разархивирате файла, който сте изтеглили с компилираната версия на Bootstrap, ще видите следната структура на файловете и директориите:
bootstrap /
├── css /
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js /
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── шрифтове /
Phic── глификони-половинки-редовни.eot
├── глификони-половинки-правилни.svg
├── глификони-половинки-правилни.ttf
Phic── глификони-половинки-правилни.woff
Тези файлове са библиотеките, които съставляват началното зареждане, по -късно ще видим компонентите и начина, по който се използват.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка
wave wave wave wave wave