Tora xwerû

Pergala torê ya xwerû ya ku wekî beşek Bootstrap tê peyda kirin tora 16-stûnî ya fireh a 940px e. Ew tama pergala tevna populer a 960-ê ye, lê bêyî marjînal / pêvek zêde li aliyên çep û rast.

Mînak nîşankirina torê

Wekî ku li vir tê xuyang kirin, sêwirana bingehîn dikare bi du "stûnan" were afirandin, ku her yek hejmarek ji 16 stûnên bingehîn ên ku me wekî beşek ji pergala xweya torê destnîşan kirine vedihewîne. Ji bo guhertoyên bêtir mînakên jêrîn bibînin.

<div class="row"> class = "rêz" >
  <div class = "span6 stûn" > 
    ...
  </div>
  <div class = "span10 stûn" > 
    ...
  </div>
</div>

layout Fixed

Ji bo hema hema her malper an rûpelek sêwirana konteynerek bingehîn a 940px berfireh, navend.

<beden>
  <div class = "konteyner" > 
    ...
  </div>
</body>

Fluid layout

Struktura rûpela şilkî an şilavî ya maqûl bi firehiyên min- û herî zêde û milek milê çepê. Ji bo sepanan mezin e.

<beden>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "naveroka" > 
      ...
    </div>
  </div>
</body>

Sernav û kopî

Hiyerarşiyek tîpografî ya standard ji bo avakirina malperên we.

h1. Sernav 1

h2. Sernav 2

h3. Sernav 3

h4. Sernav 4

h5. Sernav 5

h6. Sernav 6

Mînak paragraf

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

Sernavê Mînak Sernavê jêrîn heye...

Her weha hûn dikarin sernavên bi <strong>û -yê zêde bikin<em>

Misc. hêmanên

Bikaranîna balkişandin, navnîşan, û kurtenivîsan

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

Dema ku bikar bînin

Pêdivî ye ku etîketên girîng ( <strong>û <em>) werin bikar anîn da ku cûdahiya dîtbarî di navbera peyv an hevok û kopiyek derdora wê de zêde bike. Ji <strong>bo baldariya kevin a zelal û <em>ji bo baldarî û sernavên sivik bikar bînin.

Di paragrafekê de tekez kirin

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.

Navnîşan

Hêman addressji bo - we texmîn kir! - navnîşanan tê bikaranîn. Li vir çawa xuya dike:

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

Nîşe: Divê her rêzek addressbi xêzek ( <br />) bi dawî bibe da ku naverokê bi rêkûpêk ava bike ji ber ku ew di jiyana rast de bêyî ku şêwazek were sepandin tê xwendin.

Kurtenivîsandin

Ji bo kurtenivîs û kurtenivîsan, etîketê bikar bînin abbr( acronymdi HTML5 -ê de jêbirin ). Forma kurtenivîsê têxin hundurê tagê û ji bo navê tevahî sernavek saz bikin.

Blockquotes

<blockquote> <p> <cite>

Bê guman li blockquotedora xwe paragraphû citeetîketan bipêçin. Dema ku çavkaniyek vedibêje, citehêman bikar bînin. CSS dê bixweber navek bi em dash (—) pêşbixe.

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

Julius Hibbert Dr

Unordered<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Hevalên Tîma Min
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• John Aqûb
• Paul Pierce
• Kevin Garnett

Unstyled<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Hevalên Tîma Min
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• John Aqûb
• Paul Pierce
• Kevin Garnett

Ferman kirin<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Hevalên Tîma Min
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. John Aqûb
7. Paul Pierce
8. Kevin Garnett

Terîfdl

Navnîşan lîsteyên

Lîsteya ravekirinê ji bo diyarkirina terman bêkêmasî ye.

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.

Avakirina maseyên

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

Tabloyên mezin in - ji bo gelek tiştan. Lêbelê, tabloyên mezin, hewceyê piçek hezkirina nîşankirinê hewce ne ku bikêr, berbelav û xwendin (di asta kodê de) bin. Li vir çend serişteyên alîkariyê hene.

Her tim sernavên stûnên xwe bi awakî theadwisa bipêçin ku hiyerarşiya thead> tr> thbe.

Mîna sernavên stûnê, divê hemî naveroka laşê tabloya we bi rengekî were pêçandin tbodyda ku hiyerarşiya we tbody> tr> tdbe.

Mînak: Şêweyên tabloya xwerû

Hemî tablo dê bixweber bi tenê bi sînorên bingehîn ve werin şêwaz kirin da ku xwendin û strukturê biparêzin. Ne hewce ye ku çîn an taybetmendiyên zêde zêde bikin.

#	Nav	Paşnav	Ziman
1	Hin	Yek	Îngilîzî
2	Joe	Şeş pakêt	Îngilîzî
3	Stu	Peq	Navê dizî

<table class="common-table"> class = "maseya hevpar" >
  ...
</table>

Nimûne: Zebra-xêrî

Bi lêzêdekirina zebra-striping bi tabloyên xwe piçek xweşiktir bibin - tenê .zebra-stripedpolê zêde bikin.

#	Nav	Paşnav	Ziman
1	Hin	Yek	Îngilîzî
2	Joe	Şeş pakêt	Îngilîzî
3	Stu	Peq	Navê dizî

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

Mînak: Zebra-striped w/ TableSorter.js

Mînaka berê digirin, em bi peydakirina fonksiyonên cûrbecûr bi jQuery û pêveka Tablesorter re bikêrhatina tabloyên xwe baştir dikin . Sernivîsa her stûnekê bikirtînin da ku cûreyê biguherînin.

#	Nav	Paşnav	Ziman
1	Ya te	Yek	Îngilîzî
2	Joe	Şeş pakêt	Îngilîzî
3	Stu	Peq	Navê dizî

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" </script> 
<typescript = " text/javascript" > 
  $ ( belge ). amade ( function () { 
    $ ( "table# sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-striped" > 
  ...
</table>

Şêweyên xwerû

Hemî formên xwerû şêwazên xwerû têne dayîn da ku wan bi rengek xwendin û pîvandinê pêşkêş bikin. Ji bo têketina nivîsê, navnîşên hilbijartî, deverên tekstê, bişkokên radyoyê û qutiyên kontrolê, û bişkokan şêwaz têne peyda kirin.

Nimûne forma efsaneyê

X-Input Mezin

Neqandin

1 2 3 4 5

Neqandin

1 2 3 4 5

Ketina neguherbar

Hin Nirx Li vir

Input neçalak

X-Input Mezin

Parçeyek piçûk a nivîsa alîkariyê

Nimûne forma efsaneyê

Nivîsa Pêşkêşkirî

@

Qutiya kontrolê ya pêşdekirî

Qutiya kontrolê ya pêvekirî

Ketina pelê

Nimûne forma efsaneyê

Lîsteya Vebijêrkan

• Vebijêrk yek ev û ew e - pê ewle bin ku çima ew mezin e
• Vebijarka duyan jî dikare were kontrol kirin û di encamên formê de were nav kirin
• Vebijarka sê dikare - erê, we texmîn kir - di heman demê de were kontrol kirin û di encamên formê de jî were nav kirin
• Vebijêrk çar nayê kontrol kirin ji ber ku ew neçalak e.

Nîşe: Etîket hemî vebijarkan ji bo deverên klîk pir mezintir û formek bêtir bikêrhatî dorpêç dikin.

Rêzeya Dîrokê

ber Hemî dem wekî Dema Standard a Pasîfîkê (GMT -08:00) têne destnîşan kirin.

Textarea

Bloka nivîsa alîkariyê ku heke hewce be, qada jorîn rave bike.

Lîsteya Vebijêrkan

• Vebijêrk yek ev û ew e - pê ewle bin ku çima ew mezin e
• Vebijarka duyan jî dikare were kontrol kirin û di encamên formê de were nav kirin

Save Changes Bişûndekirin

Formên stacked

Li HTML .form-stacked-a forma xwe zêde bikin û hûn ê li ser qadên wan etîketan li şûna yên çepê hebin. Ger formên we kurt bin an jî du stûnên we ji bo formên giran hebin ev pir baş dixebite.

Nimûne forma efsaneyê

X-Input Mezin

Neqandin

1 2 3 4 5

Nimûne forma efsaneyê

Lîsteya Vebijêrkan

• Vebijêrk yek ev û ew e - pê ewle bin ku çima ew mezin e
• Vebijarka duyan jî dikare were kontrol kirin û di encamên formê de were nav kirin

Nîşe: Etîket hemî vebijarkan ji bo deverên klîk pir mezintir û formek bêtir bikêrhatî dorpêç dikin.

Save Changes Bişûndekirin

Buttons

Wekî peymanek, bişkok ji bo çalakiyan têne bikar anîn dema ku girêdan ji bo tiştan têne bikar anîn. Mînakî, "Daxistin" dikare bişkokek be û "çalakiya dawî" dikare bibe girêdanek.

Hemî bişkok bi şêwazek gewrek sivik pêşda hatine, lê .primaryçînek şîn heye. Zêdetir, rijandina şêwazên xwe hêsan e.

Bişkokên Mînak

Şêweyên bişkokê dikarin bi serîlêdanê re li ser her tiştî bêne .btnsepandin. Bi gelemperî hûn dixwazin van tenê li a, button, û inputhêmanan hilbijêrin. Li vir çawa xuya dike:

Mezinahiyên Alternatîf

Bişkokên mezintir an piçûktir dixwazin? Hay jê hebe!

Dewlet seqet

Ji bo bişkokên ku ne çalak in an ji ber sedemek din ji hêla sepanê ve têne asteng kirin, dewleta neçalak bikar bînin. Ew ji .disabledbo girêdan û :disabledji bo buttonhêmanan e.

Girêdanên

Buttons

Çiye

Topbara me barek sabît e ku logo an navê malperek, navîgasyon bingehîn, û forma lêgerînê vedihewîne.

Customizable

Hemî hêmanên hundur, û tevahiya topbarê jî, vebijarkî ne. Hûn dikarin hilbijêrin ku logo / navek, nav, lêgerîn û navokek duyemîn-an jî têkeliyek ji wê hebe.

Dropdowns di nav de

Wekî beşek ji navîgasyona sereke, me kapasîteya ku hûn dakêşan li nav xwe zêde bikin vekiriye. Navika navîn a li jor (rast rêzkirî) binihêrin da ku bibînin ka ew çawa pêk tê.

Tabs û hebên

Navîgasyonek navîn a hêsan bi a ul. Bi lêzêdekirina çîna guncan di navbera tab an heban de biguhezînin.

Ji bo jêr-beşên naverokê yên mîna rûpelên mîhengên hesabê me û rêzikên bikarhêneran ên ji bo veguheztina di navbera rûpelên naverokê yên mîna de mezin e. Di şêwazên tabî an heb de peyda dibe.

• Xane
• Tengal
• Messages
• Settings
• Têkelî

<ul class="tabs"> class = "tabs" >
  <li class = "çalak" ><a href = "" > Mal </a></li>  
  <li><a href = "" > Profîl </a></li> 
  <li><a href = "" > Peyam </a></li> 
  <li><a href = "" > Mîhengan </a></li> 
  <li><a href = "" > Têkilî </a></li> 
</ul>

• Xane
• Tengal
• Messages
• Settings
• Têkelî

<ul class="pills"> class = "heb" >
  <li class = "çalak" ><a href = "" > Mal </a></li>  
  <li><a href = "" > Profîl </a></li> 
  <li><a href = "" > Peyam </a></li> 
  <li><a href = "" > Mîhengan </a></li> 
  <li><a href = "" > Têkilî </a></li> 
</ul>

Pagination

Rûpelek pir hêsan û hindik bi şêwazê ku ji hêla Rdio ve hatî îlhama kirin. Bloka mezin zehmet e ku meriv ji bîr neke, bi hêsanî tê pîvandin, û deverên klîk ên mezin peyda dike.

<div class="pagination"> class = "rûpelkirin" >
  <ul>
    <li class = "prev disabled" ><a href = "" > ← Berê </a></li>  
    <li class = "çalak" ><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 = "next" ><a href = "" > Paşê → </a></li>  
  </ul>
</div>

alerts bingehîn

Peyamên yek-xêz ji bo ronîkirina têkçûn, têkçûna gengaz, an serfiraziya çalakiyek. Bi taybetî ji bo formên kêrhatî.

Mesajên asteng bikin

Ji bo peyamên ku hinekî ravekirinê hewce dikin, me hişyariyên şêwaza paragrafê hene. Vana ji bo guheztina peyamên xeletiyê yên dirêjtir, hişyarkirina bikarhênerek ji çalakiyek li bendê, an tenê pêşkêşkirina agahdariya ji bo hûrguliya bêtir li ser rûpelê bêkêmasî ne.

Modals

Modal - dîalog an qutiyên sivik - ji bo çalakiyên konteksî di rewşên ku girîng e ku çarçoveyek paşerojê were domandin de mezin in.

Popovers

Popoveran bikar bînin da ku agahdariya binetekstûalî pêşkêşî rûpelek bikin bêyî ku bandorê li sêwiranê bikin.

Bootstrap bi Preboot ve hatî çêkirin , pakêtek mîksîn û guherbaran-çavkaniya vekirî ya ku bi Less re, pêş-processorek CSS-ê ji bo pêşkeftina malperê zûtir û hêsantir tê bikar anîn.

Binihêrin ka me Preboot çawa di Bootstrap-ê de bikar anî û hûn çawa dikarin wê bikar bînin ger hûn hilbijêrin ku li ser projeya xweya paşîn Less bimeşînin.

Meriv çawa bikar tîne

Vê vebijarkê bikar bînin da ku guhêrbarên Kêmtir ên Bootstrap, mîksîn û hêlînên CSS-ê bi javascript-ê di geroka xwe de bi tevahî bikar bînin.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/kêm" type = "text/css" href = "kêmtir/bootstrap.less" medya = "hemû" />    
<typescript = " text/javascript" src = "js/less-1.0.41.min.js" </script>  

Çareseriya .js hîs nakin? Serlêdana Less Mac-ê biceribînin an jî Node.js bikar bînin da ku hûn koda xwe berhev bikin.

Çi tê de ye

Li vir hin hûrguliyên ku di Twitter Bootstrap-ê de wekî beşek Bootstrap-ê tê de hene hene. Serî malpera Bootstrap an rûpela projeya Github bidin da ku bêtir dakêşin û fêr bibin.

Guherbarên rengîn

Guherbarên di Less de ji bo domandin û nûvekirina serêşiya CSS-ya xwe ya belaş bêkêmasî ne. Gava ku hûn dixwazin nirxek rengîn an nirxek pir caran tê bikar anîn biguhezînin, wê li yek cîhek nûve bikin û hûn amade ne.

// Girêdan
@linkColor : #8b59c2;         
@linkColorHover : tarîkirin (     @linkColor , 10 ); 
// Gewr
@black : #000;             
@grayDark :           ronahîkirin ( @reş , 25 %); 
@grey :               ronahîkirin ( @reş , 50 %); 
@grayLight :          ronahîkirin ( @reş , 70 %); 
@grayLighter :        ronahîkirin ( @reş , 90 %); 
@white : #fff;             
// Rengên Devokê
@blue : #08b5fb;              
@green : #46a546;             
@red : #9d261d;               
@yellow : #ffc40d;            
@orange : #f89406;            
@pink : #c3325f;              
@purple : #7a43b6;            
// Bingehîn
@baseline : 20px ;          

Şîrovekirin

/* ... */Less ji bilî hevoksaziya normal a CSS-ê şêwazek din a şîrovekirinê jî peyda dike .

// Ev şîroveyek e
/* Ev jî şîroveyek e */

wazoo tevlihev dike

Miksîn bi bingehîn ji bo CSS-ê tê de an jî parçeyek in, ku dihêle hûn bloka kodê li yek hev bikin. Ew ji bo taybetmendiyên pêşgir ên firoşkar ên mîna box-shadow, gradientên gerokê yên cross-gerok, stûnên tîpan, û hêj bêtir mezin in. Li jêr nimûneyek mîksên ku bi Bootstrap-ê ve girêdayî ne.

Pişkên tîpan

#font {
  . kurtenivîs ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    font - size : @size ; 
    font - weight : @weight ; 
    line - height : @lineHeight ; 
  }
}

Gradients

#gradient {
  . horizontal ( @startColor : #555, @endColor: #333) { 
    background - color : @endColor ; 
    background - repeat : repeat - x ;
    paşxane - wêne : - khtml - gradient ( xêz , jor çep , jor rast , ji ( @startColor ), ber ( @endColor )); // Konqueror   
    paşxane - wêne : - moz - xêz - gradient ( çep , @startColor , @endColor ); // FF 3.6+    
    paşxane - wêne : - ms - xêz - gradient ( çep , @startColor , @endColor ); // IE10    
    paşxane - wêne : - webkit - gradient ( xêz , jor çep , jor rast , reng - rawest ( 0 %, @startColor ), reng - rawest ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    paşnav - wêne : - webkit - linear - gradient ( çep , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    paşnav - wêne : - o - xêz - gradient ( çep , @startColor , @endColor ); // Opera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
Parzûn : e (%( "     progid :DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    paşxane - wêne : xêz - gradient ( çep , @startColor , @endColor ); // Le standard   
  }
  . vertical ( @startColor : #555, @endColor: #333) { 
    background - color : @endColor ; 
    background - repeat : repeat - x ;
    paşxane - wêne : - khtml - gradient ( xêz , çepê jorîn , çepê jêrîn , ji ( @startColor ), ber ( @endColor )); // Konqueror   
    paşxane - wêne : - moz - xêz - gradient ( @startColor , @endColor ); // FF 3.6+   
    paşxane - wêne : - ms - xêz - gradient ( @startColor , @endColor ); // IE10   
    paşxane - wêne : - webkit - gradient ( xêz , jor çep , jêrîn çep , reng - rawestgeh ( 0 %, @startColor ), reng - rawest ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    paşxane - wêne : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    paşxane - wêne : - o - xêz - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
Parzûn : e (%( "     progid :DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    paşxane - wêne : xêz - gradient ( @startColor , @endColor ); // Standard  
  }
  . rêberî ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . vertîkal - sê - reng ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Operasyon û pergala torê

Xemgîn bibin û hin matematîkê pêk bînin da ku tevliheviyên maqûl û hêzdar ên mîna ya jêrîn biafirînin.

// Girtî
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// Sîstema Tûr
. konteynir {
  firehî : @siteWidth ; 
  margin : 0 auto ;  
  . zelalfix ();
}
. stûn ( @columnSpan : 1 ) {  
  nîşan : inline ; 
  float : çep ;
  firehî : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  margin - left : @gridGutterWidth ; 
  &: yekem - zarok {
    margin - left : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  margin - çep : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! girîng ;          
}