Grid default

Ny rafitra grid default nomena ho ampahany amin'ny Bootstrap dia tsanganana 16 tsanganana mirefy 940px. tsiron'ny rafitra 960 grid malaza izy io, saingy tsy misy sisiny / padding fanampiny amin'ny ilany havia sy havanana.

Ohatra grid markup

Araka ny aseho eto, dia azo amboarina miaraka amin'ny "tsanganana" roa ny lamina fototra iray, izay samy mamakivaky ny tsanganana fototra 16 izay nofaritanay ho ampahany amin'ny rafitry ny grid. Jereo ireto ohatra etsy ambany ireto raha te hahita fiovana bebe kokoa.

<div class="row">
  <div class = "span6tsanganana" > 
    ...
  </div>
  <div class = "span10tsanganana" > 
    ...
  </div>
</div>

Filaminana raikitra

Fandrafetana fitoeran-javatra fototra mirefy 940px miendrika afovoany ho an'ny tranokala na pejy rehetra.

<vatana>
  <div class = "container" > 
    ...
  </div>
</body>

Fametrahana ranon-javatra

Firafitry ny pejin'ny ranon-javatra na ranon-javatra mivelatra miaraka amin'ny sakany kely indrindra sy ambony ary sisiny havia. Tsara ho an'ny apps.

<vatana>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Lohateny sy kopia

Ambaratonga typografika mahazatra amin'ny fandrafetana ny pejin-tranonkalanao.

h1. Lohateny 1

h2. Lohateny 2

h3. Lohateny 3

h4. Lohateny 4

h5. Lohateny 5

h6. Lohahevitra 6

Ohatra paragrafy

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Id dolor id nibh ultricies vehicula ut id elit.

Lohateny ohatra Misy lohateny kely...

Azonao atao koa ny manampy zana-dohateny miaraka amin'ny <strong>and<em>

Misc. singa

Mampiasa fanamafisana, adiresy ary fanafohezana

<strong> <em> <address> <abbr>

Rahoviana no hampiasaina

Ny mari- pamantarana fanamafisana ( <strong>sy <em>) dia tokony hampiasaina hanampiana fanavahana hita maso eo amin'ny teny na andian-teny iray sy ny dika mitovy aminy. Ampiasaina <strong>ho an'ny fifantohana taloha tsotra sy <em>ho an'ny fifantohana sy anaram-boninahitra.

Fanamafisana ny fehintsoratra iray

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.

adiresy

Ny addresssinga dia ampiasaina amin'ny-novinavinao izany!-adiresy. Toy izao ny endriny:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Fanamarihana: Ny andalana tsirairay ao amin'ny an addressdia tsy maintsy mifarana amin'ny tsipika ( <br />) mba handrafetana araka ny tokony ho izy ny atiny araka izay vakiana amin'ny tena fiainana tsy misy fomba ampiharina.

fanafohezan-teny

Ho an'ny fanafohezana sy fanafohezana, ampiasao ny abbrtenifototra ( acronymlany ao amin'ny HTML5 ). Apetraho ao anatin'ny marika ny endrika fohy ary asio lohateny ho an'ny anarana feno.

Blockquotes

<blockquote> <p> <cite>

Ataovy azo antoka ny mamatotra ny blockquotemanodidina anao paragraphsy ny citemarika. Rehefa mitanisa loharano dia ampiasao ilay citesinga. Ny CSS dia hametraka anarana ho azy miaraka amin'ny dash em (—).

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...

Dr. Julius Hibbert

Tsy voalamina<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capres
• Ny mpiara-miasa amiko
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• John Jacob
• Paul Pierce
• Kevin Garnett

Unstyled<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capres
• Ny mpiara-miasa amiko
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• John Jacob
• Paul Pierce
• Kevin Garnett

baiko<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capres
5. Ny mpiara-miasa amiko
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. John Jacob
7. Paul Pierce
8. Kevin Garnett

Descriptiondl

Lisitry ny famaritana

Ny lisitry ny famaritana dia tonga lafatra amin'ny famaritana ny teny.

Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida and eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Manorina latabatra

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Tsara ny latabatra—ho an'ny zavatra maro. Ny latabatra lehibe anefa dia mila fitiavana marika kely mba ho ilaina, azo scalable ary azo vakiana (amin'ny ambaratonga kaody). Ireto misy torohevitra vitsivitsy hanampy anao.

Fenoy foana ny lohatenin'ny tsangananao amin'ny theadhoe hierarchy dia thead>> tr.th

Mitovy amin'ny lohatenin'ny tsanganana, ny votoatin'ny vatan'ny latabatrao dia tokony hofonosina a tbodyka ny ambaratonganao dia tbody> tr> td.

Ohatra: Fomba latabatra mahazatra

Ny latabatra rehetra dia hamboarina ho azy miaraka amin'ny sisin-tany tena ilaina mba hiantohana ny famakian-teny sy ny fikojakojana ny rafitra. Tsy mila manampy kilasy na toetra fanampiny.

#	Fanampin'anarana	Anarana	Fiteny
1	SASANY	Iray	anglisy
2	Joe	Sixpack	anglisy
3	Stu	fikasana handavaka	fehezan-dalàna

<table class="common-table"> class = "talata iraisana" >
  ...
</ table>

Ohatra: zebra miendrika

Ataovy mahafinaritra kely ny latabatrao amin'ny fampidirana zebra-striping - ampio fotsiny ny .zebra-stripedkilasy.

#	Fanampin'anarana	Anarana	Fiteny
1	SASANY	Iray	anglisy
2	Joe	Sixpack	anglisy
3	Stu	fikasana handavaka	fehezan-dalàna

<table class="common-table zebra-striped"> class = "tabilao zebra mahazatra" >
...
</ table>

Ohatra: Zebra-striped w/ TableSorter.js

Raha raisina ny ohatra teo aloha, dia manatsara ny maha-ilaina ny latabatray izahay amin'ny alàlan'ny fanomezana fandrindrana amin'ny alalan'ny jQuery sy ny plugin Tablesorter . Kitiho ny lohatenin'ny tsanganana rehetra hanovana ny karazana.

#	Fanampin'anarana	Anarana	Fiteny
1	ny	Iray	anglisy
2	Joe	Sixpack	anglisy
3	Stu	fikasana handavaka	fehezan-dalàna

<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" > 
  $ ( taratasy ). vonona ( function () { 
    $ ( "table#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</ table>

Fomba mahazatra

Ny endrika rehetra dia omena fomba fanao mahazatra mba hanehoana azy ireo amin'ny fomba azo vakiana sy azo esorina. Styles dia omena ho an'ny fampidirana lahatsoratra, mifidy lisitra, textareas, radio bokotra sy ny checkboxes, ary bokotra.

Ohatra endrika angano

X-Large Input

Select

1 2 3 4 5

Select

1 2 3 4 5

Input tsy azo ovaina

Sarobidy Eto

Input kilemaina

X-Large Input

Sombiny kely amin'ny lahatsoratra fanampiana

Ohatra endrika angano

Lahatsoratra efa voaomana

@

Boaty fanokafana mialoha

Ampidirina amin'ny Checkbox

Fampidirana rakitra

Ohatra endrika angano

Lisitry ny safidy

• Ny safidy voalohany dia izao sy izao—azo antoka ny hampiditra ny antony maha-tsara azy
• Ny safidy roa dia azo jerena ary ampidirina amin'ny valin'ny endrika
• Ny safidy telo dia afaka — eny, noheverinao izany — dia azo jerena ihany koa ary ampidirina amin'ny valin'ny endrika
• Ny safidy efatra dia tsy azo jerena satria kilemaina.

Fanamarihana: Manodidina ny safidy rehetra ho an'ny faritra kitiho lehibe kokoa sy endrika azo ampiasaina kokoa ny etikety.

Daty isan-karazany

ny Ny fotoana rehetra dia aseho amin'ny ora mahazatra Pasifika (GMT -08:00).

Textarea

Sakan'ny lahatsoratra fanampiana hamaritana ny saha etsy ambony raha ilaina.

Lisitry ny safidy

• Ny safidy voalohany dia izao sy izao—azo antoka ny hampiditra ny antony maha-tsara azy
• Ny safidy roa dia azo jerena ary ampidirina amin'ny valin'ny endrika

Save Changes hanafoana

Endriky ny stacked

Ampio .form-stackedamin'ny HTML ny endrikao dia hanana etikety eo an-tampon'ny sahany ianao fa tsy eo ankaviany. Tena miasa tsara izany raha fohy ny endrikao na manana tsanganana roa ianao ho an'ny endrika mavesatra kokoa.

Ohatra endrika angano

X-Large Input

Select

1 2 3 4 5

Ohatra endrika angano

Lisitry ny safidy

• Ny safidy voalohany dia izao sy izao—azo antoka ny hampiditra ny antony maha-tsara azy
• Ny safidy roa dia azo jerena ary ampidirina amin'ny valin'ny endrika

Fanamarihana: Manodidina ny safidy rehetra ho an'ny faritra kitiho lehibe kokoa sy endrika azo ampiasaina kokoa ny etikety.

Save Changes hanafoana

bokotra

Amin'ny maha-convention azy, ny bokotra dia ampiasaina amin'ny hetsika ary ny rohy dia ampiasaina amin'ny zavatra. Ohatra, ny "Download" dia mety ho bokotra ary ny "activité vao haingana" dia mety ho rohy.

Ny bokotra rehetra dia natao tamin'ny endrika volondavenona maivana, saingy misy .primarykilasy manga. Fanampin'izany, mora peasy ny manodina ny fombanao manokana.

Bokotra ohatra

Ny fomba bokotra dia azo ampiharina amin'ny zavatra rehetra miaraka amin'ny .btnfampiharana. Amin'ny ankapobeny dia tianao ny hampihatra ireto amin'ny singa a, button, ary mifantina ihany. inputToy izao ny endriny:

Habe mifandimby

Mitady bokotra lehibe kokoa na kely kokoa? Manàna izany!

Fanjakana kilemaina

Ho an'ny bokotra tsy mavitrika na kilemain'ny fampiharana noho ny antony iray na hafa, ampiasao ny fanjakana kilemaina. Izany dia .disabledho an'ny rohy sy :disabledho an'ny buttonsinga.

rohy

bokotra

Inona ity

Ny topbar-nay dia bara raikitra misy ny logo na ny anaran'ny tranokala, ny fitetezana voalohany ary ny endrika fikarohana.

Customizable

Ny singa rehetra ao anatiny, ary ny topbar manontolo koa dia tsy voatery. Azonao atao ny misafidy ny hampiditra logo/anarana, nav, fikarohana, ary nav faharoa—na izay fitambaran'izany.

Tafiditra ny dropdowns

Amin'ny maha-fitetezana lehibe indrindra, nampidirinay ny fahafahanao manampy fidinana amin'ny nav anao. Jereo ny nav faharoa etsy ambony (milamina havanana) hahitana ny fomba nanaovana azy.

Tabs sy pilina

Mamorona navigateur faharoa tsotra miaraka amin'ny ul. Ampifamadiho eo anelanelan'ny tabilao na pilina amin'ny fampidirana ny kilasy mety.

Tsara ho an'ny fizarana votoaty toy ny pejin'ny firafitry ny kaontintsika sy ny fandaharam-potoanan'ny mpampiasa mba hivezivezena eo anelanelan'ny pejin'ny atiny mitovy. Misy amin'ny endrika takelaka na pilina.

• an-trano
• TANTARANY
• Hafatra
• Fikirana
• Contact

<ul class="tabs"> class = "tabs" >
  <li class = "active" ><a href = "" > Home </a></li>  
  <li><a href = "" > Profile </a></li> 
  <li><a href = "" > Hafatra </a></li> 
  <li><a href = "" > Fikirana </a></li> 
  <li><a href = "" > Fifandraisana </a></li> 
</ul>

• an-trano
• TANTARANY
• Hafatra
• Fikirana
• Contact

<ul class="pills"> class = "pills" >
  <li class = "active" ><a href = "" > Home </a></li>  
  <li><a href = "" > Profile </a></li> 
  <li><a href = "" > Hafatra </a></li> 
  <li><a href = "" > Fikirana </a></li> 
  <li><a href = "" > Fifandraisana </a></li> 
</ul>

Pagination

pagination faran'izay tsotra sy bitika indrindra aingam-panahy avy amin'ny Rdio. Ny sakana lehibe dia sarotra adino, mora miendrika, ary manome faritra kitiho lehibe.

<div class="pagination"> class = "pagination" >
  <ul>
    <li class = "prev disabled" ><a href = "" > ← Teo aloha </a></li>  
    <li class = "active" ><a href = "" > 1 </a></li>  
    <li><a href = "" > 2 </a></li> 
    <li><a href = "" > 3 </a></li> 
    <li><a href = "" > 4 ​​</a></li> 
    <li><a href = "" > 5 </a></li> 
    <li class = "manaraka" ><a href = "" > Manaraka → </a></li>  
  </ul>
</div>

Fampandrenesana fototra

Hafatra tokana hanasongadinana ny tsy fahombiazana, ny mety ho tsy fahombiazana, na ny fahombiazan'ny hetsika iray. Tena ilaina amin'ny endrika.

Sakanana ny hafatra

Ho an'ny hafatra mila fanazavana kely dia manana fanairana momba ny fomba paragrafy izahay. Ireo dia tonga lafatra amin'ny famoahana hafatra diso lava kokoa, fampitandremana ny mpampiasa iray amin'ny hetsika miandry, na fanolorana fampahalalana fotsiny mba hanamafisana bebe kokoa ny pejy.

Modals

Modals—dialogues na lightboxes—dia tsara ho an'ny hetsika mifandraika amin'ny toe-javatra izay zava-dehibe ny fitazonana ny contexte background.

Popovers

Mampiasà popover mba hanomezana fampahalalana subtextual amin'ny pejy iray tsy misy firindrana.

Bootstrap dia naorina tamin'ny Preboot , fonosana mivelatra misy mixins sy variables ampiasaina miaraka amin'ny Less , preprocessor CSS ho an'ny fampivoarana tranonkala haingana sy mora kokoa.

Jereo ny fomba nampiasanay ny Preboot ao amin'ny Bootstrap ary ny fomba ahafahanao mampiasa azy io raha misafidy ny handefa Less amin'ny tetikasanao manaraka ianao.

Ahoana ny fampiasana azy

Ampiasao ity safidy ity mba hampiasana tanteraka ny Variables Less, mixins ary akany ao amin'ny CSS amin'ny alàlan'ny javascript ao amin'ny navigateur Bootstrap.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "rehetra" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

Tsy mahatsapa ny vahaolana .js? Andramo ny fampiharana Less Mac na ampiasao ny Node.js mba hanangonana rehefa mametraka ny kaody ianao.

Inona no tafiditra

Ireto ny sasany amin'ireo nisongadina tamin'izay tafiditra ao amin'ny Twitter Bootstrap ho ampahany amin'ny Bootstrap. Mankanesa any amin'ny tranokala Bootstrap na pejy tetikasa Github raha hisintona sy hianatra bebe kokoa.

Variana loko

Ny Variables in Less dia tonga lafatra amin'ny fitazonana sy fanavaozana ny CSS tsy misy aretin'andoha. Rehefa te-hanova sanda miloko na sanda ampiasaina matetika ianao dia havaozy amin'ny toerana iray izany dia efa vonona ianao.

// Rohy
@linkColor : #8b59c2;         
@linkColorHover :     maizina ( @linkColor , 10 ); 
// Grey
@mainty : #000;             
@grayDark : maivana (           @mainty , 25 %); 
@volondavenona : maivana (               @mainty , 50 %); 
@grayLight : maivana (          @mainty , 70 %); 
@grayLighter : maivana (        @mainty , 90 %); 
@fotsy : #fff ;             
// Loko accent
@manga : #08b5fb;              
@maitso : #46a546;             
@mena : #9d261d;               
@mavo : #ffc40d;            
@orange : #f89406;            
@mavokely : #c3325f;              
@volomparasy : #7a43b6;            
// Baseline
@baseline : 20px ;          

fanehoan-kevitra

Less koa dia manome fomba fanehoan-kevitra hafa ankoatra ny /* ... */syntax mahazatra an'ny CSS.

// fanehoan-kevitra ity
/* Hevitra ihany koa ity */

Afangaro ny wazoo

Ny mixins amin'ny ankapobeny dia ahitana na ampahany amin'ny CSS, ahafahanao manambatra andian-kaody ho iray. Tsara izy ireo ho an'ny fananana efa misy mialoha ny mpivarotra toy ny box-shadow, gradients cross-browser, stacks font, sy ny maro hafa. Ity ambany ity ny santionan'ny mixins izay ampidirina amin'ny Bootstrap.

Antontan-tsoratra

#font {
  . fohy ( @lanja : normal , @habe : 14px , @lineHaavo : 20px ) {     
haben'ny     endritsoratra : @habe ; _ 
    endritsoratra - lanja : @lanja ; 
    tsipika - haavo : @lineHeight ; 
  }
  . sans - serif ( @lanja : normal , @habe : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
haben'ny     endritsoratra : @habe ; _ 
    endritsoratra - lanja : @lanja ; 
    tsipika - haavo : @lineHeight ; 
  }
  . serif ( @lanja : normal , @habe : 14px , @lineHaavo : 20px ) {     
    endri-tsoratra - fianakaviana : "Georgia" , Times New Roman , Times , sans - serif ;     
haben'ny     endritsoratra : @habe ; _ 
    endritsoratra - lanja : @lanja ; 
    tsipika - haavo : @lineHeight ; 
  }
  . monospace ( @lanja : normal , @habe : 12px , @lineHaavo : 20px ) {     
    endri-tsoratra - fianakaviana : "Monaco" , Courier New , monospace ;   
haben'ny     endritsoratra : @habe ; _ 
    endritsoratra - lanja : @lanja ; 
    tsipika - haavo : @lineHeight ; 
  }
}

Gradients

#gradient {
  . horizontal ( @startColor : #555, @endColor: #333) { 
    ambadika - loko : @endColor ; 
    ambadika - averina : averina - x ;
    background - sary : - khtml - gradient ( linear , ankavia ambony , havanana ambony , manomboka amin'ny ( @startColor ), mankany amin'ny ( @endColor )); // Mpandresy   
    background - sary : - moz - linear - gradient ( ankavia , @startColor , @endColor ); // FF 3.6+    
    background - sary : - ms - linear - gradient ( ankavia , @startColor , @endColor ); // IE10    
    background - sary : - webkit - gradient ( linear , left top , right top , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - sary : - webkit - linear - gradient ( ankavia , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    background - sary : - o - linear - gradient ( ankavia , @startColor , @endColor ); // Opera 11.10    
    - ms - sivana : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    sivana : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    ambadika - sary : linear - gradient ( ankavia , @startColor , @endColor ); // Le standard   
  }
  . mitsangana ( @startColor : #555, @endColor: #333) { 
    ambadika - loko : @endColor ; 
    ambadika - averina : averina - x ;
    background - sary : - khtml - gradient ( linear , ankavia ambony , ankavia ambany , avy @startColor ), mankany @endColor ) ) ; // Mpandresy   
    background - sary : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    background - sary : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    background - sary : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    background - sary : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - sary : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - sivana : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    sivana : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    background - sary : linear - gradient ( @startColor , @endColor ); // Ny fenitra  
  }
  . directional ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . mitsangana - loko telo ( @startColor : #00b3ee, @midColor : #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Operations sy rafitra grid

Manaova kajy ary manaova matematika mba hamoronana mixins moramora sy mahery toy ny etsy ambany.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Rafitra Grid
. container {
  sakany : @siteWidth ; 
  sisiny : 0 auto ;  
  . clearfix ();
}
. tsanganana ( @columnSpan : 1 ) {  
  aseho : inline ; 
  mitsingevana : ankavia ;
  sakany : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  sisiny - ankavia : @gridGutterWidth ; 
  &: voalohany - zanaka {
    sisiny - havia : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  sisiny - ankavia : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! manan-danja ;          
}