Default grid

Iyo yakasarudzika grid system yakapihwa sechikamu cheBootstrap ndeye 940px yakafara 16-column grid. Iko kuravira kweiyo yakakurumbira 960 grid system, asi isina yekuwedzera margin / padding kuruboshwe nekurudyi mativi.

Muenzaniso grid markup

Sezvinoratidzwa pano, hurongwa hwekutanga hunogona kugadzirwa ne "makoroni" maviri, imwe neimwe inotora nhamba yezvikamu gumi nematanhatu zvekutanga zvatakatsanangura sechikamu chegridi yedu. Ona mienzaniso iri pasi apa kuti uwane mamwe misiyano.

<div class="row"> kirasi = "mutsara" >
  <div class = "span6 columns" > 
    ...
  </ div>
  <div class = "span10 columns" > 
    ...
  </ div>
</ div>

Fixed layout

Iyo yakakosha 940px yakafara, yakatarisana nemudziyo dhizaini kune chero saiti kana peji.

<muviri>
  <div kirasi = "mudziyo" > 
    ...
  </ div>
</ body>

Fluid marongerwo

A flexible fluid or liquid peji chimiro chine min- uye max-widths uye kuruboshwe-kuruboshwe. Yakanakira maapplication.

<muviri>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </ div>
    <div kirasi = "zviri mukati" > 
      ...
    </ div>
  </ div>
</ body>

Misoro uye kopi

Yakajairika typographic hierarchy yekugadzira mapeji ako ewebhu.

h1. Musoro 1

h2. Musoro 2

h3. Musoro 3

h4. Musoro wechi4

h5. Musoro 5

h6. Musoro 6

Muenzaniso ndima

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

Musoro wemuenzaniso Une kamusoro kadiki...

Iwe unogona zvakare kuwedzera misoro midiki ine <strong>uye<em>

Misc. zvinhu

Kushandisa kusimbisa, kero, uye zvipfupiso

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

Nguva yekushandisa

Mategi ekusimbisa ( <strong>uye <em>) anofanira kushandiswa kuwedzera mutsauko wekuona pakati peizwi kana chirevo nekopi yakatenderedza. Shandisa <strong>kutarisisa kwekare uye kutarisisa <em>kwakapusa nemazita .

Kusimbisa mundima

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.

Kero

Chinhu addresschinoshandiswa-iwe wakazvifungidzira!-kero. Heino maitiro azvinotaridzika:

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

Cherechedza: Mutsetse wega wega mune addressunofanirwa kupera nemutsara-kutyora ( <br />) kunyatsogadzirisa zviri mukati sezvazvinoverengwa muhupenyu chaihwo pasina chero masitaera akaiswa.

Madimburiko

Pamapfupiso nemaacronyms, shandisa iyo abbrtag ( acronymyakadzikiswa muHTML5 ). Isa iyo shorthand fomu mukati me tag uye isa zita rezita rakazara.

Blockquotes

<blockquote> <p> <cite>

Iva nechokwadi chekuputira ako uye blockquotema tag. Paunenge uchitaura kunobva, shandisa chinhu. Iyo CSS inongofanotungamira zita rine em dash (—).paragraphcitecite

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

Dr. Julius Hibbert

Zvisina kurairwa<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• My Team Mates
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Johane Jakobho
• Paul Pierce
• Kevin Garnett

Unstyled<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• My Team Mates
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Johane Jakobho
• Paul Pierce
• Kevin Garnett

Ordered<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. My Team Mates
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. Johane Jakobho
7. Paul Pierce
8. Kevin Garnett

Tsanangudzodl

Tsanangudzo mazita

Rondedzero yerondedzero yakakwana pakutsanangura mazwi.

Euismod

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

Donec id elit non mi porta gravida at eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Kuvaka matafura

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

Matafura akanaka-kune zvinhu zvakawanda. Matafura makuru, zvisinei, anoda chidimbu cherudo rwemarkup kuti rubatsire, scalable, uye kuverenga (padanho rekodhi). Heano mazano mashoma ekubatsira.

Gara uchiputira makoramu misoro mune theadyakadaro iyo hierarchy iri thead> tr> th.

Zvakafanana nemusoro wembiru, zvese zvemuviri wetafura yako zvinofanirwa kuputirwa mukuti hutongi hwako tbodyhuve tbody> tr> td.

Muenzaniso: Default table styles

Matafura ese anozoitwa otomatiki aine miganhu yakakosha chete kuve nechokwadi chekuverenga uye kuchengetedza chimiro. Hapana chikonzero chekuwedzera mamwe makirasi kana hunhu.

#	Zita rokutanga	Zita rokupedzisa	Mutauro
1	Vamwe	Poshi	Chirungu
2	Joe	Sixpack	Chirungu
3	Stu	Dent	Code

<tafura yekirasi = "yakajairwa-tafura" > 
  ...
</ table>

Muenzaniso: Mbizi ine mitsetse

Wana shoo shoma nematafura ako nekuwedzera zebra-striping-ingowedzera .zebra-stripedkirasi.

#	Zita rokutanga	Zita rokupedzisa	Mutauro
1	Vamwe	Poshi	Chirungu
2	Joe	Sixpack	Chirungu
3	Stu	Dent	Code

<tafura yekirasi = "yakajairwa-tafura zebra-mitsetse" > 
...
</ table>

Muenzaniso: Zebra-striped w/ TableSorter.js

Tichitora muenzaniso wekare, tinovandudza kukosha kwematafura edu nekupa mashandiro ekugadzirisa kuburikidza nejQuery neTablesorter plugin . Dzvanya musoro wechero chikamu kuti uchinje rudzi.

#	Zita rokutanga	Zita rokupedzisa	Mutauro
1	Your	Poshi	Chirungu
2	Joe	Sixpack	Chirungu
3	Stu	Dent	Code

<script type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>  
<script type = "text/javascript" > 
  $ ( gwaro ). gadzirira ( basa () { 
    $ ( "tafura#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<tafura yekirasi = "yakajairwa-tafura zebra-mitsetse" > 
  ...
</ table>

Default styles

Mafomu ese anopihwa zvitaera zvekusarudzika kuti azviratidze nenzira inoverengeka uye inoverengeka. Zvitaera zvinopihwa zvekupinza zvinyorwa, sarudza zvinyorwa, zvinyorwa, mabhatani eredhiyo uye mabhokisi ekutarisa, uye mabhatani.

Muenzaniso fomu legend

X-Yakakura Input

Sarudza

1 2 3 4 5

Sarudza

1 2 3 4 5

Uneditable Input

Zvimwe Kukosha Pano

Disabled Input

X-Yakakura Input

Chidimbu chemashoko erubatsiro

Muenzaniso fomu legend

Prepended Text

@

Prepended Checkbox

Yakawedzerwa Checkbox

File Input

Muenzaniso fomu legend

List of Options

• Sarudzo yekutanga ndeichi neicho-iva nechokwadi chekusanganisira kuti sei zvakanaka
• Sarudzo yechipiri inogonawo kutariswa uye kuverengerwa mumibairo yefomu
• Sarudzo yechitatu inogona-hongu, waifungidzira-inotariswawo uye inosanganisirwa mumibairo yefomu
• Sarudzo yechina haigone kutariswa sezvo yakavharwa.

Cherechedza: Mabhii anotenderedza sarudzo dzese dzenzvimbo dzakakura dzekudzvanya uye fomu rinoshandiswa.

Date Range

ku Nguva dzese dzinoratidzwa sePacific Standard Time (GMT -08:00).

Textarea

Runyoro rwechivharo cherubatsiro kutsanangura ndima iri pamusoro kana zvichidikanwa.

List of Options

• Sarudzo yekutanga ndeichi neicho-iva nechokwadi chekusanganisira kuti sei zvakanaka
• Sarudzo yechipiri inogonawo kutariswa uye kuverengerwa mumibairo yefomu

Chengetedza Kuchinja Kanzura

Akaturikidzana mafomu

Wedzera .form-stackedkune fomu yako HTML uye iwe unenge uine mavara pamusoro peminda yavo pane kuruboshwe kwavo. Izvi zvinoshanda zvakanaka kana mafomu ako ari mapfupi kana uine makoramu maviri ekuisa kune anorema mafomu.

Muenzaniso fomu legend

X-Yakakura Input

Sarudza

1 2 3 4 5

Muenzaniso fomu legend

List of Options

• Sarudzo yekutanga ndeichi neicho-iva nechokwadi chekusanganisira kuti sei zvakanaka
• Sarudzo yechipiri inogonawo kutariswa uye kuverengerwa mumibairo yefomu

Cherechedza: Mabhii anotenderedza sarudzo dzese dzenzvimbo dzakakura dzekudzvanya uye fomu rinoshandiswa.

Chengetedza Kuchinja Kanzura

Mabhatani

Semusangano, mabhatani anoshandiswa kuita zviito nepo zvinongedzo zvichishandiswa kuzvinhu. Semuyenzaniso, "Kudhaunirodha" rinogona kunge riri bhatani uye "zvichangobva kuitika" rinogona kunge riri chinongedzo.

Ese mabhatani anogara kune yakareruka grey maitiro, asi yebhuruu .primarykirasi inowanikwa. Uyezve, kutenderedza masitaera ako kuri nyore peasy.

Mabhatani emuenzaniso

Mabhatani masitayera anogona kuiswa kune chero chinhu chine .btnyakaiswa. Kazhinji iwe unozoda kushandisa izvi kune chete a, button, uye sarudza inputzvinhu. Heino maitiro azvinotaridzika:

Alternate sizes

Unoda mabhatani makuru kana madiki? Iva nazvo!

Disabled state

Kune mabhatani asiri kushanda kana akadzimwa neapp nechikonzero chimwe kana chimwe, shandisa yakaremara nyika. Ndiko .disabledkune zvinongedzo uye :disabledzvezvinhu button.

Links

Mabhatani

Chii

Yedu yepamusoro bhaa yakamiswa inogara logo yewebhusaiti kana zita, yekutanga navigation, uye fomu yekutsvaga.

Customizable

Zvese zvinhu mukati, uye iyo topbar yese zvakare, ndeye sarudzo. Iwe unogona kusarudza kuisa logo/zita, nav, kutsvaga, uye yechipiri nav-kana chero musanganiswa weizvozvo.

Dropdowns inosanganisirwa

Sechikamu chekufambisa kukuru, takabatanidza kugona kwako kuwedzera zvinodonhedza kune yako nav. Tarisa uone yechipiri nav pamusoro (yakatarisana kurudyi) kuti uone kuti zvinoitwa sei.

Tabs nemapiritsi

Gadzira yakapusa yechipiri navigation ne ul. Chinjana pakati pematabhu kana mapiritsi nekuwedzera kirasi yakakodzera.

Yakanakira zvikamu zvidiki zvemukati senge mapeji edu eakaunti ekugadzirisa uye nguva dzevashandisi dzekushandura pakati pemapeji ezvakafanana. Inowanikwa mune tabbed kana mapiritsi maitiro.

• Kumba
• Profile
• Mharidzo
• Settings
• Contact

<ul class = "tabs" > 
  <li class = "active" ><a href = ""> Kumba </a></li >  
  <li><a href = ""> Profile </a> </li> 
  <li><a href = ""> Mameseji </a> </li> 
  <li><a href = ""> Zvirongwa </a> </li> 
  <li><a href = ""> Contact </a> </li> 
</ul>

• Kumba
• Profile
• Mharidzo
• Settings
• Contact

<ul class = "mapiritsi" > 
  <li class = "active" ><a href = ""> Kumba </a></li >  
  <li><a href = ""> Profile </a> </li> 
  <li><a href = ""> Mameseji </a> </li> 
  <li><a href = ""> Zvirongwa </a> </li> 
  <li><a href = ""> Contact </a> </li> 
</ul>

Pagination

Ultra yakapfava uye yakashongedzerwa pagination yakafemerwa neRdio. Iyo yakakura block inonetsa kupotsa, nyore scalable, uye inopa hombe yekudzvanya nzvimbo.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "" > ← Yakapfuura </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 = "inotevera" ><a href = ""> Inotevera &rarr ; </a></li>  
  </ul>
</ div>

Basic alerts

One-line meseji yekujekesa kutadza, kutadza kukwanisika, kana kubudirira kwechiito. Kunyanya kubatsira kune mafomu.

Vhara mameseji

Kune meseji inoda tsananguro yakati wandei, tine ziviso dzemaitiro endima. Aya akanakira kubhuroka mameseji ezvikanganiso akareba, kunyevera mushandisi nezvechiito chakamirira, kana kungopa ruzivo rwekusimbisa zvakanyanya pane peji.

Modals

Modals-dialogs kana lightboxes-akanaka kune zviito zvemukati mumamiriro ezvinhu apo zvakakosha kuti mamiriro ekumashure achengetwe.

Popover

Shandisa mapopovers kupa subtextual ruzivo kune peji pasina kuita marongero.

Bootstrap yakavakwa ne Preboot , yakavhurika-sosi pack yemamikisi uye zvinosiyana-siyana kuti zvishandiswe pamwe neZvishoma , CSS preprocessor yekukurumidza uye nyore webhu kuvandudza.

Tarisa uone mashandisiro atakaita Preboot muBootstrap uye kuti ungaishandisa sei kana ukasarudza kumhanya Zvishoma pane yako inotevera purojekiti.

Kuishandisa sei

Shandisa sarudzo iyi kushandisa zvizere zveBootstrap's Zvishoma zvinosiyana, musanganiswa, uye nesting muCSS kuburikidza nejavascript mubrowser yako.

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

Hausi kunzwa mhinduro ye.js? Edza iyo Less Mac app kana shandisa Node.js kuunganidza paunotumira kodhi yako.

Chii chinosanganisirwa

Heano mamwe emhando yepamusoro ezvinosanganisirwa mu Twitter Bootstrap sechikamu cheBootstrap. Tungamira kune iyo Bootstrap webhusaiti kana Github purojekiti peji kuti utore uye udzidze zvimwe.

Mavara akasiyana

Variables muZvishoma dzakakwana kuchengetedza uye kugadzirisa yako CSS musoro wemahara. Paunenge uchida kushandura kukosha kweruvara kana kukosha kunowanzo shandiswa, gadziridza munzvimbo imwechete uye unogadzika.

// Links
@linkColor : #8b59c2;         
@linkColorHover :     darken ( @linkColor , 10 ); 
 
// Grays
@black : #000;             
@grayDark :           lighten ( @black , 25 %); 
@grey :               lighten ( @black , 50 %); 
@grayLight :          lighten ( @black , 70 %); 
@grayLighter :        lighten ( @black , 90 %); 
@white : #fff;             
 
// Accent Colors
@blue : #08b5fb;              
@girinhi : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@pepuru : #7a43b6;            
 
// Baseline
@baseline : 20px ;          

Kutsinhira

Zvishoma zvinopawo imwe nzira yekupindura mukuwedzera kune CSS's yakajairika /* ... */syntax.

// Ichi ndicho chirevo
/* Ichi zvakare chirevo */

Inosanganisa iyo wazoo

Mixins anonyanya kusanganisira kana zvidimbu zveCSS, zvichikutendera kuti ubatanidze bhuroka rekodhi kuita rimwe. Iwo akakurisa kune mutengesi prefixed zvivakwa senge box-shadow, muchinjika-browser gradients, font stacks, nezvimwe. Pazasi pane muenzaniso wemasanganiswa anosanganisirwa neBootstrap.

Mafonti akaturikidzana

# font {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    font - uremu : @huremu ; 
    mutsetse - urefu : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - mhuri : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    font - uremu : @huremu ; 
    mutsetse - urefu : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - size : @size ; 
    font - uremu : @huremu ; 
    mutsetse - urefu : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - mhuri : "Monaco" , Courier New , monospace ;   
    font - size : @size ; 
    font - uremu : @huremu ; 
    mutsetse - urefu : @lineHeight ; 
  }
}

Gradients

#gradient {
  . yakachinjika ( @startColor : #555, @endColor: #333) { 
    background - color : @endColor ; 
    kumashure - dzokorora : dzokorora - x ;
    background - image : - khtml - gradient ( linear , left top , right top , from ( @startColor ), kusvika ( @endColor )); // Konqueror   
    kumashure - mufananidzo : - moz - mutsara - gradient ( kuruboshwe , @startColor , @endColor ); // FF 3.6+    
    kumashure - mufananidzo : - ms - mutsara - gradient ( kuruboshwe , @startColor , @endColor ); // IE10    
    kumashure - mufananidzo : - webkit - gradient ( linear  , left top , right top , color - stop ( 0 %, @startColor ), ruvara - mira ( 100 %, @endColor )); // Safari 4+, Chrome 2+   
    kumashure - mufananidzo : - webkit - linear - gradient ( kuruboshwe , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    kumashure - mufananidzo : - o - mutsara - gradient ( kuruboshwe , @startColor , @endColor ); // Opera 11.10    
    - ms - sefa : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    sefa : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    kumashure - mufananidzo : mutsara - gradient ( kuruboshwe , @startColor , @endColor ); // Le standard   
  }
  . yakatwasuka ( @startColor : #555, @endColor: #333) { 
    background - color : @endColor ; 
    kumashure - dzokorora : dzokorora - x ;
    kumashure - mufananidzo : - khtml - gradient ( linear , kuruboshwe kumusoro , kuruboshwe pasi , kubva ( @startColor ), kusvika ( @endColor )); // Konqueror   
    background - mufananidzo : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    kumashure - mufananidzo : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    kumashure - mufananidzo : - webkit - gradient ( linear , kuruboshwe kumusoro , kuruboshwe pasi , ruvara - kumira  ( 0 %, @startColor ), ruvara - kumira ( 100 %, @endColor )); // Safari 4+, Chrome 2+   
    kumashure - mufananidzo : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    background - mufananidzo :  - o - mutsara - gradient ( @startColor , @endColor ); // Opera 11.10  
    - ms - sefa : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    sefa : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    kumashure - mufananidzo : mutsara - gradient ( @startColor , @endColor ); // Chiyero  
  }
  . directional ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  .yakatwasuka - matatu - mavara ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Kushanda uye grid system

Wana fancy uye ita masvomhu kuti ugadzire inoshanduka uye ine simba musanganiswa senge iri pazasi.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth :    20px ;
 
// Grid System
. mudziyo {
  width :  @siteWidth ;
  kumucheto : 0   auto ;
  . clearfix ();
}
. mbiru ( @columnSpan : 1  )  {
  kuratidza : inline  ;
  kuyangarara _ left ;
  hupamhi : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan -          1 ));
  margin - kuruboshwe : @gridGutterWidth  ;
  &: chekutanga - mwana {
    margin - kuruboshwe : 0  ;
  }
}
. offset ( @columnOffset : 1 )   {
  kumucheto - kuruboshwe : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ) zvakakosha ;          
}