Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum and eros.
O le Bootstrap o se meafaigaluega mai le Twitter ua mamanuina e amata ai le atinaʻeina o webapps ma nofoaga.
E aofia ai le CSS faavae ma le HTML mo faʻamatalaga, fomu, faʻamau, laulau, faʻasologa, faʻasalalauga, ma isi mea.
Nerd alert: Bootstrap ua fausia ma Less ma sa mamanuina e galue i fafo o le faitotoa ma suʻesuʻega faʻaonaponei i le mafaufau.
Mo le amataga sili ona vave ma faigofie, na'o le kopi o le snippet lenei i lau itulau web.
O se tagata fiafia e fa'aaoga Less? Leai se faʻafitauli, naʻo le faʻapipiʻi le repo ma faʻaopoopo laina nei:
Tikia, tui, toso, faila mataupu, ma isi mea faʻatasi ma le aloaia Bootstrap repo ile Github.
I aso muamua o Twitter, na faʻaogaina e inisinia toetoe lava o soʻo se faletusi latou te masani ai e faʻafetaui manaoga pito i luma. Na amata le Bootstrap o se tali i luʻitau na faʻaalia ma faʻavavevave le atinaʻe i le Hackweek muamua a Twitter.
Faatasi ai ma le fesoasoani ma manatu faaalia o le tele o inisinia i Twitter, ua matua tuputupu ae Bootstrap e aofia ai e le gata o sitaili masani, ae sili atu le matagofie ma le umi o mamanu mamanu pito i luma.
Faitau atili ile dev.twitter.com ›
Bootstrap e faʻataʻitaʻiina ma lagolagoina i suʻesuʻega faʻaonapo nei e pei o Chrome, Safari, Internet Explorer, ma Firefox.
O le Bootstrap e sau faʻatasi ma CSS tuʻufaʻatasia, e leʻi tuʻufaʻatasia, ma faʻataʻitaʻiga faʻataʻitaʻiga.
O le fa'aogaina o le fa'aogaina o le fa'aogaina o se vaega o le Bootstrap o le 940px lautele 16-koluma fa'asologa. O se tofo o le lauiloa 960 grid system, ae aunoa ma se faʻaopoopoga faaopoopo / padding i le itu agavale ma taumatau.
E pei ona fa'aalia iinei, e mafai ona fausia se fa'atulagaga fa'avae i "koluma" e lua, e ta'itasi ta'itasi i se numera o koluma fa'avae e 16 na matou fa'amatalaina o se vaega o la matou fa'asologa o fa'asologa. Va'ai fa'ata'ita'iga o lo'o i lalo mo nisi suiga.
- <div class = "laina" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 koluma" >
- ...
- </div>
- </div>
Le fa'aletonu ma faigofie 940px-lautele, fa'atonuga fa'atotonu mo na'o so'o se 'upega tafa'ilagi po'o itulau e tu'uina atu e se tasi <div.container>
.
- <tino>
- <div class = "container" >
- ...
- </div>
- </tino>
O se isi mea, fetuutuuna'i le fausaga o itulau sua ma le laititi ma le maualuga-lautele ma le itu tauagavale. Lelei mo apps ma docs.
- <tino>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "anotusi" >
- ...
- </div>
- </div>
- </tino>
Ose fa'atonuga fa'akomipiuta mo le fa'atulagaina o au itulau uepi.
O le fa'asologa fa'asologa atoa e fa'avae i luga ole lua Less variables i la tatou faila preboot.less: @basefont
ma @baseline
. O le mea muamua o le fa'amaufa'ailoga faavae-tele o lo'o fa'aogaina atoa ma le lona lua o le laina-maualuga fa'avae.
Matou te faʻaogaina na fesuiaiga, ma nisi numera, e fatu ai pito, paddings, ma laina-maualuga o matou ituaiga uma ma sili atu.
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.
Fa'aaogā fa'amamafa, tuatusi, & fa'apuupuuga
<strong>
<em>
<address>
<abbr>
E tatau ona fa'aoga fa'ailoga fa'amamafa ( <strong>
ma <em>
) e fa'ailoa ai le fa'aopoopoina o le taua po'o le fa'amamafa o se upu po'o se fasifuaitau e fa'atatau i lona kopi o lo'o si'omia. Fa'aoga <strong>
mo le taua ma <em>
mo le fa'amamafaina.
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.
Fa'aaliga: E lelei lava le fa'aoga <b>
ma <i>
fa'ailoga ile HTML5 ma e le mana'omia ona fa'ailoga mata'utia ma fa'amaufa'ailoga, i le fa'asologa (e ui o lo'o i ai se elemene sili atu fa'aoga, fa'aoga). <b>
e fa'atatau e fa'amanino ai upu po'o fasifuaitau e aunoa ma le fa'ailoaina atu o le taua fa'aopoopo, ae <i>
tele lava mo leo, upu fa'apitoa, ma isi.
O le <address>
elemene e faʻaaogaina mo faʻamatalaga faʻafesoʻotaʻi mo lona tuaa lata ane, poʻo le tino atoa o galuega. O lona uiga la:
Fa'aaliga: O laina ta'itasi i totonu e <address>
tatau ona fa'ai'u i se laina-motu ( <br />
) po'o le afifiina i se fa'ailoga poloka poloka (fa'ata'ita'iga, <p>
) e fa'atulaga lelei ai le anotusi.
Mo fa'apu'upu'u ma fa'apuupuuga, fa'aoga le fa'ailoga <abbr>
( <acronym>
ua fa'ate'aina ile HTML5 ). Tuu le fomu faapuupuu i totonu o le pine ma seti se ulutala mo le igoa atoa.
<blockquote>
<p>
<small>
E aofia ai se poloka upusii, afifi <blockquote>
solo <p>
ma <small>
pine. Fa'aoga le <small>
elemene e ta'u mai ai lau puna'oa ma o le ae mauaina se fa'ailoga i —
luma atu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
E lelei laulau-mo le tele o mea. O laulau tetele, e ui i lea, e manaʻomia sina faʻailoga alofa ina ia aoga, faʻaleleia, ma mafai ona faitau (i le tulaga code). O nai fautuaga nei e fesoasoani ai.
Ia afifi i taimi uma lau ulutala koluma i se <thead>
tulaga e faapea o le fa'atonu o <thead>
le > <tr>
> <th>
.
E tutusa ma ulutala koluma, o mea uma o le tino o lau laulau e tatau ona afifi i totonu o le <tbody>
mea lea o lau fa'asologa o <tbody>
le > <tr>
> <td>
.
O laulau uma o le a otometi lava ona fa'apipi'iina na'o tuaoi taua e fa'amautinoa ai le faitau ma fa'atumauina le fausaga. Leai se mana'oga e fa'aopoopo nisi vasega po'o uiga.
# | Igoa muamua | Fa'aiu | Gagana |
---|---|---|---|
1 | O nisi | Tasi | Igilisi |
2 | Joe | Sixpack | Igilisi |
3 | Stu | Dent | Code |
- < laulau>
- ...
- </ laulau>
Fai sina fa'afiafiaga i au laulau e ala i le fa'aopoopoina o le zebra-striping—na'o le fa'aopoopoina o le .zebra-striped
vasega.
# | Igoa muamua | Fa'aiu | Gagana |
---|---|---|---|
1 | O nisi | Tasi | Igilisi |
2 | Joe | Sixpack | Igilisi |
3 | Stu | Dent | Code |
Manatua: Zebra-striping o se faʻaleleia atili e le o avanoa mo suʻesuʻega matutua e pei o le IE8 ma lalo.
- < vasega laulau = "sebra-striped" >
- ...
- </ laulau>
O le faia o le faʻataʻitaʻiga muamua, matou te faʻaleleia le aoga oa matou laulau e ala i le tuʻuina atu o galuega faʻavasega e ala i le jQuery ma le Tablesorter plugin. Kiliki so'o se ulutala o le koluma e sui ai le fa'avasega.
# | Igoa muamua | Fa'aiu | Gagana |
---|---|---|---|
1 | O lau | Tasi | Igilisi |
2 | Joe | Sixpack | Igilisi |
3 | Stu | Dent | Code |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( galuega () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- < vasega laulau = "sebra-striped" >
- ...
- </ laulau>
O fomu uma ua tu'uina atu sitaili fa'aletonu e tu'uina atu i se auala e mafai ona faitau ma fa'alautele. Ua saunia sitaili mo mea e fai ai tusitusiga, filifili lisi, vaega o tusitusiga, fa'amau leitio ma pusa siaki, ma fa'amau.
Fa'aopoopo .form-stacked
i le HTML o lau fomu ma e iai sau fa'ailoga i luga o latou fanua nai lo le agavale. E aoga tele pe afai e pupuu au fomu pe lua au koluma o mea e fai mo pepa mamafa.
I le avea ai o se tauaofiaga, e faʻaogaina faʻamau mo gaioiga aʻo faʻaoga fesoʻotaʻiga mo mea faitino. Mo se fa'ata'ita'iga, o le "Download" e mafai ona avea ma fa'amau ma "gaoioiga lata mai" e mafai ona avea ma so'oga.
O fa'amau uma e le mafai i se sitaili lanu efuefu, ae o le tele o vasega aoga e mafai ona fa'aoga mo sitaili lanu eseese. O nei vasega e aofia ai se .primary
vasega lanumoana, se vasega moli-lanu moana .info
, se vasega lanu meamata .success
, ma se vasega mumu .danger
. Ma le isi, o le ta'avale a oe lava sitaili e faigofie lava.
E mafai ona fa'aoga sitaili fa'amau i so'o se mea e .btn
fa'aoga. E masani lava e te mana'o e fa'aoga nei mea i na'o <a>
, <button>
, ma filifili <input>
elemene. O lona uiga la:
Mana'o i fa'amau tetele pe la'ititi? Fai i ai!
Mo fa'amau e le o fa'agaoioia pe fa'aletonu e le app mo se tasi mafua'aga po'o se isi, fa'aoga le tulaga le atoatoa. E .disabled
mo sooga ma :disabled
mo <button>
elemene.
div.alert-message
Fe'au laina e tasi mo le fa'ailoaina o le fa'aletonu, fa'aletonu, po'o le manuia o se gaioiga. Aemaise le aoga mo fomu.
div.alert-message.block-message
Mo fe'au e mana'omia sina fa'amatalaga, o lo'o i ai a matou fa'aaliga sitaili parakalafa. O nei mea e lelei atoatoa mo le faʻatupuina o feʻau sese umi, lapataia se tagata faʻaoga i se gaioiga o loʻo faʻatali, pe naʻo le tuʻuina atu o faʻamatalaga mo le faʻamamafa atili i luga o le itulau.
Modals—fa'atalanoaga po'o pusa moli-e lelei tele mo fa'atinoga fa'atatau i tulaga e taua ai le fa'atumauina o le tala fa'asolopito.
E tasi le tino lelei…
Twipsies e sili ona aoga mo le fesoasoani i se tagata le mautonu ma faasino i latou i le itu saʻo.
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 accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo volupremtas quasi volupta
Fa'aoga popovers e tu'uina atu ai fa'amatalaga fa'amatalaga i se itulau e aunoa ma le a'afiaina o le fa'atulagaina.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum and eros.
Bootstrap na fausia ma Preboot , o se pusa faʻapipiʻi matala o mixins ma fesuiaiga e faʻaoga faʻatasi ma Less , o se CSS preprocessor mo le vave ma faigofie le atinaʻeina o upega tafaʻilagi.
Siaki pe faʻapefea ona matou faʻaogaina Preboot i Bootstrap ma pe faʻafefea ona e faʻaogaina pe a e filifili e tamoʻe Less i lau isi poloketi.
Fa'aoga le filifiliga lea e fa'aoga atoatoa ai Bootstrap's Less variables, mixins, ma fa'amomoli ile CSS e ala ile javascript ile lau su'esu'ega.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "uma" />
- <script src = "js/less-1.1.3.min.js" ></script>
Le lagona le .js fofo? Taumafai le Less Mac app pe fa'aoga Node.js e fa'apipi'i pe ae fa'aogaina lau code.
O nisi nei o mea taua o mea o loʻo aofia i le Twitter Bootstrap o se vaega o Bootstrap. Ulu atu i luga ole upega tafaʻilagi a Bootstrap poʻo Github poloketi itulau e sii mai ma aʻoaʻo atili.
Fesuiaiga i Less e lelei atoatoa mo le tausia ma le faʻafouina o lau CSS e leai se ulu. Afai e te manaʻo e sui se lanu lanu poʻo se faʻaoga masani, faʻafouina i se tasi nofoaga ma e te setiina.
- // So'oga
- @linkColor : #8b59c2;
- @linkColorHover : pogisa ( @linkColor , 10 );
- // Efuefu
- @uliuli : #000;
- @grayDark : fa'amama ( @black , 25 %);
- @gray : fa'amama ( @black , 50 %);
- @grayLight : fa'amama ( @black , 70 %);
- @grayLighter : fa'amama ( @black , 90 %);
- @pa'epa'e : #fff;
- // Lanu Fa'ailoga
- @blue : #08b5fb;
- @meamata : #46a546;
- @mumu : #9d261d;
- @samasama : #ffc40d;
- @ moli : #f89406;
- @pini : #c3325f;
- @violē : #7a43b6;
- // Fa'asologa o laina faavae
- @basefont : 13px ;
- @baseline : 18px ;
Less o lo'o maua ai fo'i se isi sitaili o fa'amatalaga e fa'aopoopo i le /* ... */
fa'asologa masani a le CSS.
- // O se faʻamatalaga lenei
- /* O se faamatalaga foi lea */
Mixins o lo'o aofia ai po'o ni vaega mo le CSS, e mafai ai ona e tu'ufa'atasia se poloka o le code i le tasi. E lelei tele mo mea fa'atau e fa'amuamua e pei o box-shadow
le , fa'asolo su'esu'e fa'alili, fa'aputu vaitusi, ma isi mea. Lalo o se faʻataʻitaʻiga o mixins o loʻo aofia ai ma Bootstrap.
- #mataitusi {
- . fa'apuupuu ( @mamafa : masani , @tele : 14px , @lineHeight : 20px ) {
- font - size : @size ;
- vai - mamafa : @weight ;
- laina - maualuga : @lineHeight ;
- }
- . sans - serif ( @mamafa : masani , @tele : 14px , @lineHeight : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- font - size : @size ;
- vai - mamafa : @weight ;
- laina - maualuga : @lineHeight ;
- }
- . serif ( @mamafa : masani , @tele : 14px , @lineHeight : 20px ) {
- font - family : "Georgia" , Times New Roman , Times , sans - serif ;
- font - size : @size ;
- vai - mamafa : @weight ;
- laina - maualuga : @lineHeight ;
- }
- . monospace ( @mamafa : masani , @tele : 12px , @lineHeight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- font - size : @size ;
- vai - mamafa : @weight ;
- laina - maualuga : @lineHeight ;
- }
- }
- #gradient {
- . faalava ( @startColor : #555, @endColor: #333) {
- tua - lanu : @endColor ;
- tua - toe fai : toe fai - x ;
- tua - ata : - khtml - gradient ( linear , agavale pito i luga , taumatau pito i luga , mai ( @startColor ), i ( @endColor )); // Fa'ato'ilalo
- tua - ata : - moz - laina - gradient ( agavale , @startColor , @endColor ); // FF 3.6+
- tua - ata : - ms - laina - gradient ( agavale , @startColor , @endColor ); // IE10
- tua - ata : - webkit - gradient ( linear , agavale pito i luga , taumatau pito i luga , lanu - taofi ( 0 %, @startColor ), lanu - taofi ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- tua - ata : - webkit - laina - gradient ( agavale , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- tua - ata : - o - laina - gradient ( agavale , @startColor , @endColor ); // Opera 11.10
- tua - ata : laina - gradient ( agavale , @startColor , @endColor ); // Le tulaga
- }
- . tūsa'o ( @startColor : #555, @endColor: #333) {
- tua - lanu : @endColor ;
- tua - toe fai : toe fai - x ;
- tua - ata : - khtml - gradient ( linear , agavale pito i luga , agavale pito i lalo , mai ( @startColor ), i ( @endColor )); // Fa'ato'ilalo
- tua - ata : - moz - laina - gradient ( @startColor , @endColor ); // FF 3.6+
- tua - ata : - ms - laina - gradient ( @startColor , @endColor ); // IE10
- tua - ata : - webkit - gradient ( linear , agavale pito i luga , agavale pito i lalo , lanu - taofi ( 0 %, @startColor ), lanu - taofi ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- tua - ata : - webkit - laina - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- tua - ata : - o - laina - gradient ( @startColor , @endColor ); // Opera 11.10
- tua - ata : laina - gradient ( @startColor , @endColor ); // O le tulaga
- }
- . faasinomaga ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . tūsa'o - tolu - lanu ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Fa'afiafia ma fa'atino ni numera e fa'atupu ai fefiloi fetu'una'i ma mamana e pei o lo'o i lalo.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Grid System
- . pusa {
- lautele : @siteWidth ;
- pito : 0 ta'avale ;
- . clearfix ();
- }
- . koluma ( @columnSpan : 1 ) {
- lautele : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . offset ( @columnOffset : 1 ) {
- pito - agavale : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }