Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum и eros.
Bootstrap е инструментариум от Twitter, предназначен да стартира разработката на уеб приложения и сайтове.
Той включва базов CSS и HTML за типография, формуляри, бутони, таблици, мрежи, навигация и др.
Предупреждение за маниак: Bootstrap е изграден с Less и е проектиран да работи незабавно с модерните браузъри.
За най-бърз и лесен старт, просто копирайте този фрагмент във вашата уеб страница.
Фен на използването на Less? Няма проблем, просто клонирайте репото и добавете тези редове:
Изтегляйте, разклонявайте, изтегляйте, проблеми с файлове и други с официалното репо на Bootstrap в Github.
В момента v1.3.0
Инженерите в Twitter исторически са използвали почти всяка библиотека, с която са били запознати, за да отговорят на изискванията за предния край. Bootstrap започна като отговор на представените предизвикателства. С помощта на много страхотни хора, Bootstrap нарасна значително.
Прочетете повече на dev.twitter.com ›
Bootstrap е тестван и се поддържа в основните съвременни браузъри като Chrome, Safari, Internet Explorer и Firefox.
Bootstrap идва в комплект с компилиран CSS, некомпилиран и примерни шаблони.
Мрежовата система по подразбиране, предоставена като част от Bootstrap, е мрежа с 16 колони с ширина 940px. Това е разновидност на популярната мрежова система 960, но без допълнително поле/подложка от лявата и дясната страна.
Както е показано тук, може да се създаде основно оформление с две "колони", всяка от които обхваща няколко от 16-те основни колони, които дефинирахме като част от нашата мрежова система. Вижте примерите по-долу за повече варианти.
- <div class = "row" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Вложете съдържанието си, ако трябва, като създадете .row
в съществуваща колона.
- <div class = "row" >
- <div class = "span12" >
- Ниво 1 на колоната
- <div class = "row" >
- <div class = "span6" >
- Ниво 2
- </div>
- <div class = "span6" >
- Ниво 2
- </div>
- </div>
- </div>
- </div>
В Bootstrap са вградени няколко променливи за персонализиране на мрежовата система от 940px по подразбиране. С малко персонализиране можете да промените размера на колоните, техните канали и контейнера, в който се намират.
Всички променливи, необходими за модифициране на мрежовата система, в момента се намират в preboot.less
.
Променлива | Стойност по подразбиране | Описание |
---|---|---|
@gridColumns |
16 | Броят на колоните в мрежата |
@gridColumnWidth |
40px | Ширината на всяка колона в мрежата |
@gridGutterWidth |
20px | Отрицателното пространство между всяка колона |
@siteWidth |
Изчислена сума на всички колони и улуци | Използваме някакво основно съответствие, за да преброим броя на колоните и улуците и да зададем ширината на .fixed-container() миксина. |
Модифицирането на мрежата означава промяна на трите @grid-*
променливи и повторно компилиране на Less файловете.
Bootstrap е оборудван за работа с мрежова система с до 24 колони; по подразбиране е само 16. Ето как ще изглеждат променливите ви в мрежата, персонализирани за мрежа с 24 колони.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
След прекомпилиране ще бъдете готови!
Стандартното и просто центрирано оформление с ширина 940 пиксела за почти всеки уебсайт или страница, предоставено от един <div.container>
.
- <тяло>
- <div class = "контейнер" >
- ...
- </div>
- </body>
Алтернативна, гъвкава течна структура на страницата с минимална и максимална ширина и лява странична лента. Страхотно за приложения и документи.
- <тяло>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
Стандартна типографска йерархия за структуриране на вашите уеб страници.
Цялата типографска мрежа се основава на две Less променливи в нашия файл preboot.less: @basefont
и @baseline
. Първият е основният размер на шрифта, използван навсякъде, а вторият е основната височина на реда.
Ние използваме тези променливи и някои математически изчисления, за да създадем полетата, подложките и височините на редовете на всички наши типове и други.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Използване на акценти, адреси и съкращения
<strong>
<em>
<address>
<abbr>
Етикетите за подчертаване ( <strong>
и <em>
) трябва да се използват за обозначаване на допълнителна важност или подчертаване на дума или фраза спрямо заобикалящото я копие. Използвайте <strong>
за важност и <em>
за подчертаване .
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Забележка: Все още е добре да използвате <b>
и <i>
тагове в HTML5 и не е необходимо те да бъдат стилизирани съответно с получер и курсив (въпреки че ако има по-семантичен елемент, използвайте го). <b>
има за цел да подчертава думи или фрази, без да придава допълнителна важност, докато <i>
е предимно за глас, технически термини и т.н.
Елементът <address>
се използва за информация за контакт за най-близкия му предшественик или за цялата работа. Ето два примера как може да се използва:
Забележка: Всеки ред в <address>
трябва да завършва с нов ред ( <br />
) или да бъде обвит в таг на ниво блок (напр. <p>
), за да се структурира правилно съдържанието.
За съкращения и акроними използвайте <abbr>
етикета ( <acronym>
е отхвърлен в HTML5 ). Поставете съкратената форма в тага и задайте заглавие за пълното име.
<blockquote>
<p>
<small>
За да включите блоков цитат, обвийте <blockquote>
около <p>
и <small>
етикети. Използвайте <small>
елемента, за да цитирате източника си и ще получите тире em —
преди него.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Д-р Юлиус Хибърт
- <блоков цитат>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> Д-р Юлиус Хибърт </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Подгответе своя код със стил с два прости етикета. За още по-голяма невероятност чрез javascript, пуснете библиотеката на Google за кодиране и сте готови.
Код, блокове от или просто вградени фрагменти могат да бъдат показани със стил само чрез обвиване в правилния таг. За блокове от код, обхващащи няколко реда, използвайте <pre>
елемента. За вграден код използвайте <code>
елемента.
елемент | Резултат |
---|---|
<code> |
В ред текст като този вашият обвит код ще изглежда като този >html< елемент. |
<pre> |
<div> <h1>Заглавие</h1> <p>Тук има нещо...</p> </div> Забележка: Не забравяйте да запазите кода в |
<pre class="prettyprint"> |
Използвайки библиотеката google-code-prettify, вашите блокове код получават малко по-различен визуален стил и автоматично подчертаване на синтаксиса. <div> <h1> Заглавие </h1> <p> Нещо точно тук... </p> </div> Изтеглете google-code-prettify и вижте readme за това как да използвате. |
<span class="label">
Привлечете вниманието или маркирайте всяка фраза в основния текст.
Някога имахте нужда от едно от тези луксозни нови! или Важни флагове при писане на код? Е, сега ги имате. Ето какво е включено по подразбиране:
Етикет | Резултат |
---|---|
<span class="label">Default</span> |
По подразбиране |
<span class="label success">New</span> |
Нов |
<span class="label warning">Warning</span> |
Внимание |
<span class="label important">Important</span> |
важно |
<span class="label notice">Notice</span> |
Забележете |
Показвайте миниатюри с различни размери на страници с нисък HTML отпечатък и минимални стилове.
Миниатюрите в .media-grid
могат да бъдат с всякакъв размер, но работят най-добре, когато са картографирани директно към вградената мрежова система Bootstrap. Ширините на изображението като 90, 210 и 330 се комбинират с няколко пиксела подложка, за да се изравнят размерите на .span2
, .span4
и .span6
колоните.
Медийните мрежи са лесни за използване и доста прости откъм маркиране. Размерите им се основават изцяло на размера на включените изображения.
- <ul class = "media-grid" >
- <li>
- <a href = "#" >
- <img class = "миниатюра" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "миниатюра" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Масите са страхотни - за много неща. Страхотните таблици обаче се нуждаят от малко любов към маркирането, за да бъдат полезни, мащабируеми и четими (на ниво код). Ето няколко съвета за помощ.
Винаги обвивайте заглавките на колоните <thead>
така, че йерархията да е <thead>
> <tr>
> <th>
.
Подобно на заглавките на колоните, цялото основно съдържание на вашата таблица трябва да бъде обвито в <tbody>
така че вашата йерархия е <tbody>
> <tr>
> <td>
.
Всички таблици ще бъдат автоматично стилизирани само с основните граници, за да се осигури четливост и поддържане на структурата. Няма нужда да добавяте допълнителни класове или атрибути.
# | Първо име | Фамилия | език |
---|---|---|---|
1 | някои | един | Английски |
2 | Джо | Шест пакета | Английски |
3 | Стю | Дент | Код |
- <таблица>
- ...
- </table>
Вземете малко фантазия с вашите маси, като добавите зебра - просто добавете .zebra-striped
класа.
# | Първо име | Фамилия | език |
---|---|---|---|
1 | някои | един | Английски |
2 | Джо | Шест пакета | Английски |
3 | Стю | Дент | Код |
Забележка: Zebra-striping е прогресивно подобрение, което не е налично за по-стари браузъри като IE8 и по-стари.
- < клас на таблицата = "zebra-striped" >
- ...
- </table>
Като вземем предишния пример, подобряваме полезността на нашите таблици, като предоставяме функционалност за сортиране чрез jQuery и приставката Tablesorter . Щракнете върху заглавката на която и да е колона, за да промените сортирането.
# | Първо име | Фамилия | език |
---|---|---|---|
2 | Джо | Шест пакета | Английски |
3 | Стю | Дент | Код |
1 | Вашият | един | Английски |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <скрипт >
- $ ( функция () {
- $ ( "table#sortTableExample" ). сортиране на таблици ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- < клас на таблицата = "zebra-striped" >
- ...
- </table>
Всички формуляри получават стилове по подразбиране, за да ги представят по четлив и мащабируем начин. Осигурени са стилове за въвеждане на текст, списъци за избор, текстови полета, радио бутони и квадратчета за отметка и бутони.
Добавете .form-stacked
към HTML кода на вашия формуляр и ще имате етикети в горната част на техните полета, вместо отляво. Това работи чудесно, ако вашите формуляри са кратки или имате две колони с входове за по-тежки формуляри.
Персонализирайте всяка форма input
, select
или textarea
ширина, като добавите само няколко класа към вашето маркиране.
Считано от v1.3.0, ние добавихме класове за оразмеряване, базирани на решетка, за елементи на форма. Моля, използвайте тези над съществуващите класове .mini
, .small
, и т.н.
Като конвенция бутоните се използват за действия, докато връзките се използват за обекти. Например „Изтегляне“ може да бъде бутон, а „скорошна дейност“ може да бъде връзка.
Всички бутони по подразбиране имат светлосив стил, но могат да се прилагат редица функционални класове за различни цветови стилове. Тези класове включват син .primary
клас, светлосин .info
клас, зелен .success
клас и червен .danger
клас.
Стиловете на бутоните могат да се прилагат към всичко с .btn
приложеното. Обикновено ще искате да ги приложите само към <a>
, <button>
и избрани <input>
елементи. Ето как изглежда:
Искате ли по-големи или по-малки копчета? Имайте го!
За бутони, които не са активни или са деактивирани от приложението по една или друга причина, използвайте деактивирано състояние. Това е .disabled
за връзките и :disabled
за <button>
елементите.
.alert-message
Едноредови съобщения за подчертаване на неуспех, възможен неуспех или успех на действие. Особено полезен за формуляри.
- <div class = "alert-message warning" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Свещено гуакамоле! </strong> Най-добре е да проверите себе си, не изглеждате много добре. </p>
- </div>
.alert-message.block-message
За съобщения, които изискват малко обяснение, имаме предупреждения за стил на абзац. Те са идеални за бълбукане на по-дълги съобщения за грешка, предупреждение на потребител за предстоящо действие или просто представяне на информация за по-голям акцент върху страницата.
- <div class = "alert-message block-message warning" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Свещено гуакамоле! Това е предупреждение! </strong> Най-добре е да проверите себе си, не изглеждате много добре. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div class = "alert-actions" >
- <a class = "btn small" href = "#" > Предприемете това действие </a> <a class = "btn small" href = "#" > Или направете това </a>
- </div>
- </div>
Модалните – диалогови прозорци или лайтбоксове – са страхотни за контекстуални действия в ситуации, в които е важно фоновият контекст да се поддържа.
Едно хубаво тяло…
Twipsies са супер полезни за подпомагане на объркан потребител и за насочване в правилната посока.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit actuantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae actuantium fugit voluptas nemo voluptas voluptatem rem quaesi aut verquaitatis.
Използвайте изскачащи елементи, за да предоставите подтекстова информация на страница, без да засягате оформлението.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum и eros.
Интегрирането на javascript с библиотеката Bootstrap е супер лесно. По-долу разглеждаме основите и ви предоставяме някои страхотни добавки, за да започнете!
Вдъхнете живот на някои от основните компоненти на Bootstrap с нови персонализирани добавки, които работят с jQuery и Ender . Препоръчваме ви да ги разширите и модифицирате, за да отговарят на вашите специфични нужди за разработка.
Файл | Описание |
---|---|
bootstrap-modal.js | Нашият модален плъгин е супер тънък вариант на традиционния модален js плъгин! Положихме специални грижи да включим само голата функционалност, която се нуждаем от twitter. |
bootstrap-alerts.js | Приставката за предупреждение е супер малък клас за добавяне на близка функционалност към предупрежденията. |
bootstrap-dropdown.js | Този плъгин е за добавяне на взаимодействие с падащо меню към горната лента за зареждане или навигации с раздели. |
bootstrap-scrollspy.js | Приставката ScrollSpy е за добавяне на навигация за автоматично актуализиране въз основа на позицията на превъртане към горната лента на началното зареждане. |
bootstrap-tabs.js | Този плъгин добавя бърз, динамичен раздел и функционалност за хапче за циклично преминаване през местно съдържание. |
bootstrap-twipsy.js | Базиран на отличния плъгин jQuery.tipsy, написан от Jason Frame; twipsy е актуализирана версия, която не разчита на изображения, използва css3 за анимации и атрибути на данни за локално съхранение на заглавия! |
bootstrap-popover.js | Плъгинът popover предоставя прост интерфейс за добавяне на popover към вашето приложение. Той разширява плъгина boostrap-twipsy.js , така че не забравяйте да вземете и този файл, когато включвате изскачащи елементи във вашия проект! |
не! Bootstrap е проектиран преди всичко да бъде CSS библиотека. Този JavaScript предоставя основен интерактивен слой върху включените стилове.
Въпреки това, за тези, които се нуждаят от javascript, ние предоставихме добавките по-горе, за да ви помогнем да разберете как да интегрирате Bootstrap с javascript и да ви дадем бърза, лека опция за основната функционалност веднага.
За повече информация и за да видите някои демонстрации на живо, моля, вижте нашата страница с документация за плъгини .
Bootstrap е създаден с Preboot , пакет с отворен код от миксини и променливи, които да се използват заедно с Less , CSS препроцесор за по-бързо и лесно уеб разработка.
Вижте как използвахме Preboot в Bootstrap и как можете да го използвате, ако изберете да стартирате Less в следващия си проект.
Използвайте тази опция, за да използвате пълноценно променливите Less на Bootstrap, миксините и влагането в CSS чрез javascript във вашия браузър.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
Не чувствате .js решението? Опитайте приложението Less Mac или използвайте Node.js за компилиране, когато внедрявате кода си.
Ето някои от акцентите на това, което е включено в Twitter Bootstrap като част от Bootstrap. Преминете към уебсайта на Bootstrap или страницата на проекта Github, за да изтеглите и научите повече.
Променливите в Less са идеални за поддържане и актуализиране на вашия CSS без главоболие. Когато искате да промените стойност на цвят или често използвана стойност, актуализирайте я на едно място и сте готови.
- // Връзки
- @linkColor : #8b59c2;
- @linkColorHover : потъмняване ( @linkColor , 10 );
- // Сиви
- @черно : #000;
- @grayDark : изсветляване ( @black , 25 %);
- @сиво : изсветляване ( @черно , 50 %);
- @grayLight : изсветляване ( @black , 70 %);
- @grayLighter : изсветляване ( @black , 90 %);
- @бяло : #fff;
- // Акцентни цветове
- @синьо : #08b5fb ;
- @зелено : #46a546 ;
- @червено : #9d261d ;
- @жълто : #ffc40d ;
- @orange : #f89406;
- @розово : #c3325f ;
- @лилаво : #7a43b6 ;
- // Решетка на базовата линия
- @basefont : 13px ;
- @базова линия : 18px ;
Less предоставя и друг стил на коментиране в допълнение към нормалния /* ... */
синтаксис на CSS.
- // Това е коментар
- /* Това също е коментар */
Mixins са основно включени или части за CSS, което ви позволява да комбинирате блок от код в един. Те са чудесни за свойства с префикс на доставчика, като box-shadow
, градиенти в различни браузъри, набори от шрифтове и др. По-долу е извадка от миксините, които са включени в Bootstrap.
- #font {
- . стенограма ( @weight : нормално , @size : 14px , @lineHeight : 20px ) {
- размер на шрифта : @size ;
- тегло на шрифта : @ тегло ;
- височина на линия : @lineHeight ;
- }
- . sans - serif ( @weight : нормален , @size : 14px , @lineHeight : 20px ) {
- семейство шрифтове : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- размер на шрифта : @size ;
- тегло на шрифта : @ тегло ;
- височина на линия : @lineHeight ;
- }
- ...
- }
- #градиент {
- ...
- . вертикално ( @startColor : #555, @endColor: #333) {
- цвят на фона : @endColor ;
- фон - повторение : повторение - x ;
- фоново изображение : - khtml - градиент ( линеен , ляво горе , ляво долу , от ( @startColor ), до ( @endColor ) ); // Konqueror
- фон - изображение : - moz - линеен - градиент ( @startColor , @endColor ); // FF 3.6+
- фон - изображение : - ms - линеен - градиент ( @startColor , @endColor ); // IE10
- фоново изображение : - webkit - градиент ( линеен , ляво горе , ляво долу , цвят - стоп ( 0 %, @startColor ), цвят - стоп ( 100 % , @endColor ) ); // Safari 4+, Chrome 2+
- фон - изображение : - webkit - линеен - градиент ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- фоново изображение : - o - линеен - градиент ( @startColor , @endColor ) ; // Opera 11.10
- фон - изображение : линеен - градиент ( @startColor , @endColor ); // Стандарт
- }
- ...
- }
Вземете фантазия и извършете малко математика, за да генерирате гъвкави и мощни миксини като този по-долу.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Направете няколко колони
- . колони ( @columnSpan : 1 ) {
- ширина : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
След като модифицирате .less
файловете в /lib/, ще трябва да ги компилирате отново, за да генерирате отново файловете bootstrap-*.*.*.css и bootstrap-*.*.*.min.css. Ако изпращате заявка за изтегляне към GitHub, винаги трябва да прекомпилирате.
Метод | стъпки |
---|---|
Възел с makefile | Инсталирайте компилатора на по-малко командния ред с npm, като изпълните следната команда: $ npm инсталирайте lessc Веднъж инсталиран, просто стартирайте Освен това, ако сте инсталирали watchr , можете да стартирате, |
Javascript | Изтеглете най-новия Less.js и включете пътя до него (и Bootstrap) в
За да компилирате отново .less файловете, просто ги запазете и презаредете страницата си. Less.js ги компилира и ги съхранява в локално хранилище. |
Командна линия | Ако вече имате инсталиран инструмента за команден ред по-малко, просто изпълнете следната команда: $ lessc ./lib/bootstrap.less > bootstrap.css Не забравяйте да включите |
По-малко приложение за Mac | Неофициалното приложение за Mac наблюдава директории с .less файлове и компилира кода в локални файлове след всяко запазване на наблюдаван .less файл. Ако желаете, можете да превключвате предпочитанията в приложението за автоматично минимизиране и в коя директория завършват компилираните файлове. |