Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap е комплет со алатки од Twitter дизајниран да го започне развојот на веб-апликации и сајтови.
Вклучува основни CSS и HTML за типографија, формулари, копчиња, табели, мрежи, навигација и многу повеќе.
Предупредување за глупак: Bootstrap е изграден со Less и е дизајниран да работи надвор од портата имајќи ги предвид модерните прелистувачи.
За најбрз и најлесен почеток, само копирајте го овој фрагмент на вашата веб-страница.
Љубител на користење помалку? Нема проблем, само клонирајте го репото и додајте ги овие редови:
Преземете, преклопете, повлечете, податотете проблеми и повеќе со официјалното складиште за Bootstrap на Github.
Во моментов v1.3.0
Инженерите на Твитер историски ја користеле речиси секоја библиотека со која биле запознаени за да ги исполнат барањата на предниот дел. Bootstrap започна како одговор на предизвиците што беа претставени. Со помош на многу прекрасни луѓе, Bootstrap значително порасна.
Прочитајте повеќе на dev.twitter.com ›
Bootstrap е тестиран и поддржан во главните модерни прелистувачи како Chrome, Safari, Internet Explorer и Firefox.
Bootstrap доаѓа во комплет со компајлирани CSS, некомпајлирани и пример шаблони.
Стандардниот мрежен систем обезбеден како дел од Bootstrap е мрежа со 16 колони широка 940 пиксели. Тоа е вкус на популарниот 960 grid систем, но без дополнителна маргина/полнење на левата и десната страна.
Како што е прикажано овде, може да се креира основен распоред со две „колони“, од кои секоја опфаќа број од 16-те основни колони што ги дефиниравме како дел од нашиот систем на мрежа. Погледнете ги примерите подолу за повеќе варијации.
- <div class = „ред“ >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Вгнездувајте ја вашата содржина ако морате со создавање на .row
во постоечка колона.
- <div class = „ред“ >
- <div class = "span12" >
- Ниво 1 од колоната
- <div class = „ред“ >
- <div class = "span6" >
- Ниво 2
- </div>
- <div class = "span6" >
- Ниво 2
- </div>
- </div>
- </div>
- </div>
Вградени во Bootstrap се неколку променливи за прилагодување на стандардниот мрежен систем од 940 пиксели. Со малку прилагодување, можете да ја менувате големината на столбовите, нивните олуци и контејнерот во кој престојуваат.
Променливите потребни за менување на мрежниот систем моментално сите се наоѓаат во variables.less
.
Променлива | Стандардна вредност | Опис |
---|---|---|
@gridColumns |
16 | Бројот на колони во мрежата |
@gridColumnWidth |
40 пиксели | Ширината на секоја колона во решетката |
@gridGutterWidth |
20 пиксели | Негативниот простор помеѓу секоја колона |
@siteWidth |
Пресметана сума на сите столбови и олуци | Ние користиме некои основни натпревари за да го броиме бројот на колони и олуци и да ја поставиме ширината на .fixed-container() мешањето. |
Измената на мрежата значи промена на трите @grid-*
променливи и повторно компајлирање на датотеките Less.
Bootstrap е опремен да се справи со мрежен систем со најмногу 24 колони; стандардното е само 16. Еве како вашите променливи на мрежата би изгледале приспособени на мрежа од 24 колони.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Откако ќе се прекомпајлирате, ќе бидете наместени!
Стандардниот и едноставен распоред со ширина од 940 пиксели, центриран за речиси секоја веб-локација или страница обезбедена од еден <div.container>
.
- <тело>
- <div class = „контејнер“ >
- ...
- </div>
- </body>
Алтернативна, флексибилна флуидна структура на страници со минимум и максимални ширини и странична лента од левата страна. Одлично за апликации и документи.
- <тело>
- <div class = „контејнер-флуид“ >
- <div class = „странична лента“ >
- ...
- </div>
- <div class = „содржина“ >
- ...
- </div>
- </div>
- </body>
Стандардна типографска хиерархија за структурирање на вашите веб-страници.
Целата типографска мрежа се заснова на две Less променливи во нашата датотека variables.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, pharetra augue.
Забелешка: Сè уште е во ред да се користат <b>
и <i>
ознаки во HTML5 и тие не мора да бидат стилизирани задебелени и закосени, соодветно (иако ако има посемантички елемент, користете го). <b>
е наменет за истакнување на зборови или фрази без да се пренесе дополнително значење, а <i>
најчесто е за гласовни, технички термини итн.
Елементот се користи за информации за контакт на <address>
неговиот најблизок предок или целото дело. Еве два примери за тоа како може да се користи:
Забелешка: Секоја линија во еден <address>
мора да заврши со прекин на линијата ( <br />
) или да биде завиткана во ознака на ниво на блок (на пример, <p>
) за правилно структурирање на содржината.
За кратенки и акроними, користете ја <abbr>
ознаката ( <acronym>
е застарена во HTML5 ). Ставете го стенографијата во ознаката и поставете наслов за целосното име.
<blockquote>
<p>
<small>
За да вклучите блок - цитат, завиткајте <blockquote>
и означете. Користете го елементот за да го наведете вашиот извор и ќе добиете ем цртичка пред него.<p>
<small>
<small>
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број поставете е раат а ante venenatis dapibus posuere velit aliquet.
д-р Џулиус Хиберт
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Цел број поставете е раат а 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 | Џо | Sixpack | Англиски |
3 | Сту | Дент | Код |
- <табела>
- ...
- </table>
За табели за кои се потребни повеќе податоци во потесни простори, користете го кондензираниот вкус што го преполовува полнењето. Може да се користи и во комбинација со граници и зебра-ленти, исто како стандардните стилови на табели.
# | Име | Презиме | Јазик |
---|---|---|---|
1 | Некои | Еден | Англиски |
2 | Џо | Sixpack | Англиски |
3 | Сту | Дент | Код |
Направете вашите маси да изгледаат малку поелегантни со заокружување на нивните агли и додавање на граници од сите страни.
# | Име | Презиме | Јазик |
---|---|---|---|
1 | Некои | Еден | Англиски |
2 | Џо | Sixpack | Англиски |
3 | Сту | Дент | Код |
- <table class = "bordered-table" >
- ...
- </table>
Уживајте во вашите маси со додавање зебра-ленти - само додајте ја .zebra-striped
класата.
# | Име | Презиме | Јазик |
---|---|---|---|
1 | Некои | Еден | Англиски |
2 | Џо | Sixpack | Англиски |
3 | Сту | Дент | Код |
распон 4 колони | |||
распон 2 колони | распон 2 колони |
Забелешка: Zebra-striping е прогресивно подобрување кое не е достапно за постарите прелистувачи како IE8 и подолу.
- <table class = "зебра-риги" >
- ...
- </table>
Земајќи го претходниот пример, ја подобруваме корисноста на нашите табели со обезбедување на функционалност за сортирање преку jQuery и приклучокот Tablesorter . Кликнете на заглавието на која било колона за да го промените сортирањето.
# | Име | Презиме | Јазик |
---|---|---|---|
2 | Џо | Sixpack | Англиски |
3 | Сту | Дент | Код |
1 | Вашиот | Еден | Англиски |
- <script src = "js/jquery/jquery.tablesorter.min.js" </script>
- <скрипта >
- $ ( функција () {
- $ ( "table# sortTableExample" ). подредувач на табели ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "зебра-риги" >
- ...
- </table>
На сите форми им се дадени стандардни стилови за да ги прикажат на читлив и скалабилен начин. Обезбедени се стилови за внесување текст, избирачки списоци, области за текст, копчиња за радио и полиња за избор и копчиња.
Додадете .form-stacked
во HTML-от на вашата форма и ќе имате етикети на врвот на нивните полиња наместо лево. Ова функционира одлично ако вашите обрасци се кратки или имате две колони со влезови за потешки форми.
Приспособете која било форма input
, select
или textarea
ширина со додавање само неколку класи во вашата ознака.
Почнувајќи од верзијата 1.3.0, ги додадовме класите за големина засновани на мрежа за елементите на формата. Ве молиме користете ги овие преку постоечките класи .mini
, .small
, итн.
Како конвенција, копчињата се користат за дејства додека врските се користат за објекти. На пример, „Преземи“ може да биде копче, а „неодамнешната активност“ може да биде врска.
Сите копчиња стандардно имаат светло сив стил, но голем број функционални класи може да се применат за различни стилови на бои. Овие класи вклучуваат сина .primary
класа, светло-сина .info
класа, зелена .success
класа и црвена .danger
класа.
Стиловите на копчињата може да се применат на било што со .btn
применетиот. Обично ќе сакате да ги примените овие само <a>
на , <button>
и да изберете <input>
елементи. Еве како тоа изгледа:
Дали сакате поголеми или помали копчиња? Имајте го тоа!
За копчињата што не се активни или се оневозможени од апликацијата поради една или друга причина, користете ја оневозможената состојба. Тоа е .disabled
за врски и :disabled
за <button>
елементи.
.alert-message
Еднолиниски пораки за истакнување на неуспехот, можниот неуспех или успехот на некоја акција. Особено корисни за форми.
- <div class = "предупредување со порака за предупредување" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Свет гуакамоле! </strong> Најдобро проверете се, не изгледате премногу добро. </p>
- </div>
.alert-message.block-message
За пораките кои бараат малку објаснување, имаме предупредувања за стилот на пасуси. Овие се совршени за клокотот на подолги пораки за грешка, предупредување на корисникот за акција што чека или само презентирање информации за поголем акцент на страницата.
- <div class = "предупредување за блок-порака за предупредување" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Свет гуакамоле! Ова е предупредување! </strong> Најдобро проверете се, не изгледате премногу добро. Nulla vitae elit libero, 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 седи amet illo грешка ipsum veritatis aut iste perspiciatis е волуптас natus illo квази odit aut natus консекуунтурен последица, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam vouptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium тотам тотам архитекто експликабо седи квази фугит фугит, тотам долоремке не се движел дикта квалитаму кватетим .
Користете popovers за да обезбедите субтекстуални информации на страницата без да влијаете на изгледот.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Интегрирањето на Javascript со библиотеката Bootstrap е супер лесно. Подолу ги разгледуваме основите и ви нудиме неколку прекрасни приклучоци за да започнете!
Оживувајте некои од основните компоненти на Bootstrap со нови приспособени приклучоци кои работат со jQuery и Ender . Ве охрабруваме да ги проширите и менувате за да одговараат на вашите специфични развојни потреби.
Датотека | Опис |
---|---|
bootstrap-modal.js | Нашиот приклучок Modal е супер тенок приказ на традиционалниот модален js приклучок! Посебно се погриживме да ја вклучиме само голата функционалност што ни е потребна на Твитер. |
bootstrap-alerts.js | Приклучокот за предупредување е супер мала класа за додавање блиска функционалност на предупредувањата. |
bootstrap-dropdown.js | Овој приклучок е за додавање паѓачка интеракција на горната лента за подигање или навигации со јазичиња. |
bootstrap-scrollspy.js | Приклучокот ScrollSpy е за додавање на навигација за автоматско ажурирање врз основа на позицијата на лизгање на горната лента за подигање. |
bootstrap-buttons.js | Приклучокот ScrollSpy е за додавање на навигација за автоматско ажурирање врз основа на позицијата на лизгање на горната лента за подигање. |
bootstrap-tabs.js | Овој приклучок додава брза, динамична функционалност на јазичиња и таблети за возење велосипед низ локална содржина. |
bootstrap-twipsy.js | Врз основа на одличниот приклучок jQuery.tipsy напишан од Џејсон Фрејм; twipsy е ажурирана верзија, која не се потпира на слики, користи css3 за анимации и атрибути на податоци за локално складирање на наслови! |
bootstrap-popover.js | Приклучокот popover обезбедува едноставен интерфејс за додавање поповер на вашата апликација. Го проширува додатокот boostrap-twipsy.js , затоа погрижете се да ја зграпчите и таа датотека кога вклучувате поповери во вашиот проект! |
Не! Bootstrap е дизајниран прво и основно да биде CSS библиотека. Овој javascript обезбедува основен интерактивен слој на врвот на вклучените стилови.
Сепак, за оние на кои им треба Javascript, ги обезбедивме приклучоците погоре за да ви помогнеме да разберете како да го интегрирате Bootstrap со Javascript и да ви дадеме брза, лесна опција за основната функционалност веднаш.
За повеќе информации и за да видите некои демо во живо, ве молиме погледнете ја нашата страница за документација за приклучоци .
Bootstrap беше изграден од Preboot , пакет со отворен код на миксини и променливи што ќе се користат заедно со Less , CSS препроцесор за побрз и полесен развој на веб.
Проверете како го користевме Preboot во Bootstrap и како можете да го искористите доколку изберете да го извршите Less на вашиот следен проект.
Користете ја оваа опција за целосно искористување на помалку променливите на Bootstrap, миксините и вгнездувањето во CSS преку javascript во вашиот прелистувач.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "сите" />
- <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 : осветли ( @црно , 25 %);
- @grey : осветли ( @црно , 50 %);
- @grayLight : осветли ( @црно , 70 %);
- @grayLighter : осветли ( @црно , 90 %);
- @white : #fff;
- // Бои на акцент
- @blue : #08b5fb;
- @зелена : #46a546 ;
- @red : #9d261d;
- @жолта : #ffc40d ;
- @портокалова : #f89406 ;
- @pink : #c3325f;
- @виолетова : #7a43b6 ;
- // Основна мрежа
- @basefont : 13px ;
- @baseline : 18px ;
Less, исто така, обезбедува друг стил на коментирање покрај нормалната /* ... */
синтакса на CSS.
- // Ова е коментар
- /* Ова е исто така коментар */
Миксините се во основа вклучува или делумни за CSS, што ви овозможува да комбинирате блок од код во еден. Тие се одлични за својства со префикс на продавачот, како што box-shadow
се , градиенти меѓу прелистувачите, купишта фонтови и многу повеќе. Подолу е примерок од миксините што се вклучени во Bootstrap.
- #фонт {
- . стенографија ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- големина на фонт : @size ;
- font - weight : @weight ;
- линија - висина : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- големина на фонт : @size ;
- font - weight : @weight ;
- линија - висина : @lineHeight ;
- }
- ...
- }
- #градиент {
- ...
- . вертикална ( @startColor : #555, @endColor: #333) {
- позадина - боја : @endColor ;
- позадина - повторување : повторува - x ;
- позадина - слика : - khtml - градиент ( линеарен , лево горе , лево долу , од ( @startColor ), до ( @endColor )); // Освојувач
- позадина - слика : - 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 ); // Опера 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, секогаш мора да прекомпајлирате.
Метод | Чекори |
---|---|
Јазол со фајл | Инсталирајте го компајлерот помалку командна линија со npm со извршување на следнава команда: $ npm инсталирај помалку Откако ќе се инсталира, само стартувајте Дополнително, ако имате инсталирано Watchr , може да се кандидира |
Javascript | Преземете го најновиот Less.js и вклучете ја патеката до неа (и Bootstrap) во
За да ги прекомпајлирате датотеките .less, само зачувајте ги и повторно вчитајте ја вашата страница. Less.js ги компајлира и ги складира во локално складирање. |
Командна линија | Ако веќе ја имате инсталирано алатката за помалку командна линија, едноставно извршете ја следнава команда: $ lessc ./lib/bootstrap.less > bootstrap.css Бидете сигурни да вклучите |
Помалку Mac апликација | Неофицијалната апликација за Mac гледа директориуми со датотеки .less и го компајлира кодот во локални датотеки по секое зачувување на гледана датотека .less. Ако сакате, можете да ги префрлите параметрите во апликацијата за автоматско минимизирање и во кој директориум завршуваат компајлираните датотеки. |