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 na o 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.
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 faia se fa'atulagaga fa'avae i "koluma" se lua, e ta'itasi ta'itasi i le aofa'i o koluma fa'avae e 16 na matou fa'amatalaina o se vaega o la matou fa'asologa. Va'ai fa'ata'ita'iga o lo'o i lalo mo nisi suiga.
- <div class="row">
- <div class = "span6 koluma" >
- ...
- </div>
- <div class = "span10 koluma" >
- ...
- </div>
- </div>
Ose fa'avae 940px lautele, fa'atūtonugalemu koneteina mo so'o se nofoaga po'o se itulau.
- <tino>
- <div class = "container" >
- ...
- </div>
- </tino>
O se sua fe'avea'i po'o se fausaga o itulau vai ma le la'ititi ma le maualuga-lautele ma le itu agavale. Lelei mo polokalama.
- <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.
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.
E mafai fo'i ona e fa'aopoopoina ulutala fa'atasi ma le <strong>
ma<em>
Fa'aaogā fa'amamafa, tuatusi, & fa'apuupuuga
<strong>
<em>
<address>
<abbr>
E tatau ona fa'aoga pine fa'amamafa ( <strong>
ma <em>
) e fa'aopoopo ai le va'aiga va'aia i le va o se upu po'o se fasifuaitau ma lona kopi o lo'o siomia ai. Fa'aoga <strong>
mo le fa'alogo tuai ma <em>
mo le fa'amatagofie ma fa'aliga .
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.
O le address
elemene e faʻaaogaina mo - na e mateina! - tuatusi. O lona uiga la:
Fa'aaliga: O laina ta'itasi i totonu e address
tatau ona fa'ai'u i se laina-motu ( <br />
) e fa'atulaga lelei ai le anotusi e pei ona faitauina i le olaga moni e aunoa ma se sitaili fa'aogaina.
Mo fa'apuupuuga ma fa'apuupuuga, fa'aoga le abbr
pine ( 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>
<cite>
Ia mautinoa e afifi au ma blockquote
pine . A ta'ua se puna, fa'aaoga le elemene. O le CSS o le a otometi lava ona faatomua se igoa ma se em dash (—).paragraph
cite
cite
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua...
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 ia 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 |
- <table class="common-table"> vasega = "la'au masani" >
- ...
- </ laulau>
Fai sina fa'alelei 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 |
- <table class="common-table zebra-striped"> vasega = "la'au masani zebra-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 type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script type = "text/javascript" >
- $ ( pepa ). sauni ( galuega ( ) {
- $ ( "table#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );
- });
- </script>
- < vasega laulau = "la'au masani zebra-striped" >
- ...
- </ laulau>
O fomu uma e tu'uina atu i 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, ki leitio ma pusa siaki, ma faamau.
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 .primary
o lo'o avanoa le vasega lanumoana. 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.
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.
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 ile 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 fa'aogaina 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 tatala-puna 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ʻafefea ona matou faʻaogaina Preboot i Bootstrap ma pe faʻapefea ona e faʻaogaina pe a e filifili e tamoʻe Less i lau isi poloketi.
Fa'aoga lenei filifiliga e fa'aoga atoatoa ai le Bootstrap's Less variables, mixins, ma le fa'amomoli i le CSS e ala i le javascript i lau su'esu'ega.
- <link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "uma" />
- <script type = "text/javascript" src = "js/less-1.0.41.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'avae
- @baseline : 20px ;
Less e maua ai fo'i se isi sitaili o fa'amatalaga e fa'aopoopo i le /* ... */
syntax 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
- - ms - faamama : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- faamama : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7
- 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
- - ms - faamama : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- faamama : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7
- tua - ata : laina - gradient ( @startColor , @endColor ); // O le tulaga
- }
- . faasinoala ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . tūsa'o - tolu - lanu ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @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 ;
- // Grid System
- . pusa {
- lautele : @siteWidth ;
- pito : 0 ta'avale ;
- . clearfix ();
- }
- . koluma ( @columnSpan : 1 ) {
- fa'aaliga : totonu laina ;
- opeopea : agavale ;
- lautele : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- pito - agavale : @gridGutterWidth ;
- &: muamua - tama {
- pito - agavale : 0 ;
- }
- }
- . offset ( @columnOffset : 1 ) {
- pito - agavale : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! taua ;
- }