Sjálfgefið rist

Sjálfgefið netkerfi sem er hluti af Bootstrap er 940px breitt 16 dálka rist. Það er bragð af hinu vinsæla 960 ristkerfi, en án viðbótar spássíu/fyllingar á vinstri og hægri hlið.

Dæmi um álagningu hnitanets

Eins og sýnt er hér er hægt að búa til grunnútlit með tveimur „dálkum“, sem hver spannar fjölda af þeim 16 grunndálkum sem við skilgreindum sem hluta af netkerfi okkar. Sjá dæmin hér að neðan fyrir fleiri afbrigði.

<div class="row"> class = "röð" >
  <div class = "span6 dálkar" > 
    ...
  </div>
  <div class = "span10 dálkar" > 
    ...
  </div>
</div>

Fast skipulag

Einfalt 940px breitt, miðjusett gámaskipulag fyrir nánast hvaða síðu eða síðu sem er.

<líkami>
  <div class = "gámur" > 
    ...
  </div>
</body>

Vökvaskipulag

Sveigjanleg vökva- eða fljótandi síðubygging með lágmarks- og hámarksbreiddum og vinstri hliðarstiku. Frábært fyrir öpp.

<líkami>
  <div class = "ílát-vökvi" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Fyrirsagnir og afrit

Staðlað leturfræðistigveldi til að skipuleggja vefsíðurnar þínar.

h1. Fyrirsögn 1

h2. Fyrirsögn 2

h3. Fyrirsögn 3

h4. Fyrirsögn 4

h5. Fyrirsögn 5

h6. Fyrirsögn 6

Dæmi málsgrein

Nullam quis risus eget urna mollis ornare vel eu leo. Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til. Nullam id dolor id nibh ultricies vehicula ut id elit.

Dæmifyrirsögn Hefur undirfyrirsögn...

Þú getur líka bætt við undirfyrirsögnum með <strong>og<em>

Ýmislegt. þættir

Notaðu áherslur, heimilisföng og skammstafanir

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

Hvenær á að nota

Áherslumerki ( <strong>og <em>) ætti að nota til að bæta sjónrænan greinarmun á orði eða orðasambandi og afriti þess í kring. Notaðu <strong>fyrir venjulega gamla athygli og <em>fyrir flotta athygli og titla.

Áherslur í málsgrein

Fusce dapibus , tellus ac cursus commodo , Tortor mauris condimentum nibh , út fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Heimilisföng

Einingin addresser notuð fyrir — þú giskaðir á það! — heimilisföng. Svona lítur það út:

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

Athugið: Hver lína í línu addressverður að enda með línuskilum ( <br />) til að skipuleggja innihaldið á réttan hátt eins og það er lesið í raunveruleikanum án þess að stíll sé notaður.

Skammstafanir

Fyrir skammstafanir og skammstafanir, notaðu abbrmerkið ( acronymer úrelt í HTML5 ). Settu styttu eyðublaðið í merkinu og settu titil fyrir allt nafnið.

Blockquotes

<blockquote> <p> <cite>

Vertu viss um að vefja blockquoteum þig paragraphog citemerkja. Þegar þú vitnar í heimild, notaðu citeþáttinn. CSS mun sjálfkrafa setja em strik (—) á undan nafni.

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

Dr. Julius Hibbert

Óraðað<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Liðsfélagar mínir
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Jón Jakob
• Paul Pierce
• Kevin Garnett

Óstíll<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Liðsfélagar mínir
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Jón Jakob
• Paul Pierce
• Kevin Garnett

Pantaði<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Liðsfélagar mínir
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. Jón Jakob
7. Paul Pierce
8. Kevin Garnett

Lýsingdl

Lýsingarlistar

Lýsingarlisti er fullkominn til að skilgreina hugtök.

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.

Byggja borð

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

Borð eru frábær - fyrir margt. Frábærar töflur þurfa hins vegar smá merkingarást til að vera gagnlegar, skalanlegar og læsilegar (á kóðastigi). Hér eru nokkur ráð til að hjálpa.

Settu alltaf dálkahausana theadþannig að stigveldið sé thead> tr> th.

Svipað og dálkahausarnir, ætti allt meginefni töflunnar að vera pakkað inn í tbodysvo stigveldið þitt sé tbody> tr> td.

Dæmi: Sjálfgefin töflustíll

Allar töflur verða sjálfkrafa stílaðar með aðeins nauðsynlegum ramma til að tryggja læsileika og viðhalda uppbyggingu. Engin þörf á að bæta við auka flokkum eða eiginleikum.

#	Fyrsta nafn	Eftirnafn	Tungumál
1	Sumir	Einn	Enska
2	Jói	Kippa	Enska
3	Stu	Dent	Kóði

<table class="common-table"> class = "algengt borð" >
  ...
</table>

Dæmi: Zebra-röndótt

Vertu smá flottur með borðin þín með því að bæta við sebra-röndum - bættu bara við .zebra-stripedbekknum.

#	Fyrsta nafn	Eftirnafn	Tungumál
1	Sumir	Einn	Enska
2	Jói	Kippa	Enska
3	Stu	Dent	Kóði

<table class="common-table zebra-striped"> class = "algengt borð sebra-röndóttur" >
...
</table>

Dæmi: Zebra-röndótt m/ TableSorter.js

Með því að taka fyrra dæmið bætum við notagildi borðanna okkar með því að bjóða upp á flokkunarvirkni í gegnum jQuery og Tablesorter viðbótina. Smelltu á haus hvaða dálks sem er til að breyta röðun.

#	Fyrsta nafn	Eftirnafn	Tungumál
1	Þinn	Einn	Enska
2	Jói	Kippa	Enska
3	Stu	Dent	Kóði

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<handritsgerð = " texti/javascript" > 
  $ ( skjal ). tilbúinn ( fall () { 
    $ ( "tafla#flokkaTaflaDæmi" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "algengt borð sebra-röndóttur" > 
  ...
</table>

Sjálfgefin stíll

Öll eyðublöð fá sjálfgefna stíla til að setja þau fram á læsilegan og skalanlegan hátt. Stílar eru til staðar fyrir textainnslátt, vallista, textasvæði, valhnappa og gátreiti og hnappa.

Dæmi um form þjóðsaga

X-Large inntak

Veldu

1 2 3 4 5

Veldu

1 2 3 4 5

Óbreytanlegt inntak

Eitthvað gildi hér

Óvirkt inntak

X-Large inntak

Lítið brot af hjálpartexta

Dæmi um form þjóðsaga

Áfram texti

@

Áfram gátreitur

Meðfylgjandi gátreitur

Skrá inntak

Dæmi um form þjóðsaga

Listi yfir valkosti

• Valkostur eitt er þetta og hitt - vertu viss um að láta fylgja með hvers vegna það er frábært
• Einnig er hægt að haka við valmöguleika tvö og vera með í eyðublaðsniðurstöðum
• Valkostur þrjú er líka hægt að athuga - já, þú giskaðir á það - og vera með í eyðublaðsniðurstöðum
• Ekki er hægt að haka við valkosti fjögur þar sem hann er óvirkur.

Athugið: Merkingar umlykja alla valkosti fyrir miklu stærri smellisvæði og nothæfara form.

Dagsetningarbil

til Allir tímar eru sýndir sem Pacific Standard Time (GMT -08:00).

Textasvæði

Blokk með hjálpartexta til að lýsa reitnum hér að ofan ef þörf krefur.

Listi yfir valkosti

• Valkostur eitt er þetta og hitt - vertu viss um að láta fylgja með hvers vegna það er frábært
• Einnig er hægt að haka við valmöguleika tvö og vera með í eyðublaðsniðurstöðum

Vista breytingar Hætta við

Staflað form

Bættu .form-stackedvið HTML eyðublaðsins þíns og þú munt hafa merki ofan á reitunum þeirra í stað þess að vera til vinstri. Þetta virkar frábærlega ef eyðublöðin þín eru stutt eða þú ert með tvo dálka af inntak fyrir þyngri eyðublöð.

Dæmi um form þjóðsaga

X-Large inntak

Veldu

1 2 3 4 5

Dæmi um form þjóðsaga

Listi yfir valkosti

• Valkostur eitt er þetta og hitt - vertu viss um að láta fylgja með hvers vegna það er frábært
• Einnig er hægt að haka við valmöguleika tvö og vera með í eyðublaðsniðurstöðum

Athugið: Merkingar umlykja alla valkosti fyrir miklu stærri smellisvæði og nothæfara form.

Vista breytingar Hætta við

Hnappar

Sem venja eru hnappar notaðir fyrir aðgerðir á meðan tenglar eru notaðir fyrir hluti. Til dæmis gæti "Hlaða niður" verið hnappur og "nýleg virkni" gæti verið hlekkur.

Allir hnappar hafa sjálfgefið ljósgráa stíl, en blár .primaryflokkur er í boði. Auk þess er auðvelt að rúlla eigin stílum.

Dæmi um hnappa

Hægt er að nota hnappastíla á hvað sem er með .btnbeittum. Venjulega viltu nota þetta aðeins á a, button, og valda inputþætti. Svona lítur það út:

Aðrar stærðir

Langar þig í stærri eða minni hnappa? Hafið það!

Óvirkt ástand

Notaðu óvirka stöðuna fyrir hnappa sem eru ekki virkir eða eru óvirkir af appinu af einni eða annarri ástæðu. Það er .disabledfyrir tengla og :disabledfyrir buttonþætti.

Tenglar

Hnappar

Hvað er það

Toppstikan okkar er fastur stika sem hýsir lógó eða nafn vefsíðu, aðalleiðsögn og leitarform.

Sérhannaðar

Allir þættir innan, og öll toppstikan líka, eru valfrjálsir. Þú getur valið að innihalda lógó/nafn, nav, leit og aukanav—eða einhverja samsetningu af því.

Fellilistar innifalinn

Sem hluti af aðalleiðsögninni höfum við innifalið möguleikann fyrir þig til að bæta fellivalmyndum við siglingakerfið þitt. Skoðaðu aukanav að ofan (hægrijafnað) til að sjá hvernig það er gert.

Tabs og pillur

Búðu til einfalda aukaleiðsögn með ul. Skiptu á milli flipa eða pilla með því að bæta við viðeigandi flokki.

Frábært fyrir undirkafla efnis eins og reikningsstillingasíður okkar og tímalínur notenda til að skipta á milli síðna með svipað efni. Fáanlegt í flipa eða pillum stíl.

• Heim
• Prófíll
• Skilaboð
• Stillingar
• Hafðu samband

<ul class="tabs"> class = "flipar" >
  <li class = "active" ><a href = "" > Heim </a></li>  
  <li><a href = "" > Prófíll </a></li> 
  <li><a href = "" > Skilaboð </a></li> 
  <li><a href = "" > Stillingar </a></li> 
  <li><a href = "" > Tengiliður </a></li> 
</ul>

• Heim
• Prófíll
• Skilaboð
• Stillingar
• Hafðu samband

<ul class="pills"> flokkur = "pillur" >
  <li class = "active" ><a href = "" > Heim </a></li>  
  <li><a href = "" > Prófíll </a></li> 
  <li><a href = "" > Skilaboð </a></li> 
  <li><a href = "" > Stillingar </a></li> 
  <li><a href = "" > Tengiliður </a></li> 
</ul>

Síðuskipting

Ofur einfölduð og lítillega stíluð blaðsíðugerð innblásin af Rdio. Erfitt er að missa af stóra kubbnum, hann er auðvelt að skala og býður upp á stór smellisvæði.

<div class="pagination"> class = "blaðsíðugerð" >
  <ul>
    <li class = "prev disabled" ><a href = "" > ← Fyrri </a></li>  
    <li class = "virkur" > <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 = "næsta" ><a href = "" > Næsta → </a></li>  
  </ul>
</div>

Grunnviðvaranir

Skilaboð í einni línu til að undirstrika bilun, hugsanlega mistök eða árangur aðgerðar. Sérstaklega gagnlegt fyrir eyðublöð.

Lokaðu fyrir skilaboð

Fyrir skilaboð sem krefjast smá útskýringar höfum við tilkynningar um málsgreinastíl. Þetta er fullkomið til að blaðra upp lengri villuskilaboð, vara notanda við aðgerð sem er í bið, eða bara kynna upplýsingar til að leggja meiri áherslu á síðuna.

Modals

Modals—dálka eða ljóskassa—eru frábært fyrir samhengisaðgerðir í aðstæðum þar sem mikilvægt er að bakgrunnssamhenginu sé viðhaldið.

Popovers

Notaðu sprettiglugga til að veita undirtextaupplýsingar á síðu án þess að hafa áhrif á uppsetningu.

Bootstrap var smíðað með Preboot , opnum pakka af blöndun og breytum til að nota í tengslum við Less , CSS forgjörva fyrir hraðari og auðveldari vefþróun.

Skoðaðu hvernig við notuðum Preboot í Bootstrap og hvernig þú getur nýtt þér það ef þú velur að keyra Less í næsta verkefni.

Hvernig á að nota það

Notaðu þennan valmöguleika til að fullnýta Bootstrap's Less breytur, mixins og hreiður í CSS í gegnum javascript í vafranum þínum.

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

Finnurðu ekki fyrir .js lausninni? Prófaðu Less Mac appið eða notaðu Node.js til að setja saman þegar þú setur upp kóðann þinn.

Hvað er innifalið

Hér eru nokkrir af hápunktum þess sem er innifalið í Twitter Bootstrap sem hluti af Bootstrap. Farðu yfir á Bootstrap vefsíðuna eða Github verkefnasíðuna til að hlaða niður og læra meira.

Litabreytur

Breytur í minna eru fullkomnar til að viðhalda og uppfæra CSS höfuðverk án. Þegar þú vilt breyta litagildi eða oft notaðu gildi, uppfærðu það á einum stað og þú ert tilbúinn.

// Tenglar
@linkColor : #8b59c2;         
@linkColorHover :     dökkna ( @linkColor , 10 ); 
// Gráir
@svartur : #000;             
@grayDark :           létta ( @black , 25 %); 
@grár :               létta ( @svartur , 50 %); 
@grayLight :          létta ( @black , 70 %); 
@grayLighter :        létta ( @black , 90 %); 
@hvítur : #fff;             
// Hreim litir
@blár : #08b5fb ;              
@grænn : #46a546 ;             
@rautt : #9d261d;               
@gulur : #ffc40d;            
@appelsínugult : #f89406 ;            
@bleikur : #c3325f;              
@fjólublátt : #7a43b6 ;            
// Grunnlína
@grunnlína : 20px ;          

Athugasemdir

Minna veitir einnig annan stíl athugasemda til viðbótar við venjulega /* ... */setningafræði CSS.

// Þetta er athugasemd
/* Þetta er líka athugasemd */

Blandar saman wazoo

Mixins eru í grundvallaratriðum innihalda eða hlutar fyrir CSS, sem gerir þér kleift að sameina kóðablokk í einn. Þeir eru frábærir fyrir eiginleika með forskeyti söluaðila eins og box-shadow, halla yfir vafra, leturstafla og fleira. Hér að neðan er sýnishorn af blöndunum sem fylgja með Bootstrap.

Leturstaflar

#font {
  . stytting ( @þyngd : venjuleg , @stærð : 14px , @línahæð : 20px ) {     
    leturstærð : @ stærð ; _ 
    leturgerð - þyngd : @þyngd ; 
    lína - hæð : @línahæð ; 
  }
  . sans - serif ( @þyngd : venjuleg , @stærð : 14px , @lineHeight : 20px ) {     
    leturgerð - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
    leturstærð : @ stærð ; _ 
    leturgerð - þyngd : @þyngd ; 
    lína - hæð : @línahæð ; 
  }
  . serif ( @þyngd : venjuleg , @stærð : 14px , @línahæð : 20px ) {     
    leturgerð - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    leturstærð : @ stærð ; _ 
    leturgerð - þyngd : @þyngd ; 
    lína - hæð : @línahæð ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    leturgerð - family : "Monaco" , Courier New , monospace ;   
    leturstærð : @ stærð ; _ 
    leturgerð - þyngd : @þyngd ; 
    lína - hæð : @línahæð ; 
  }
}

Halli

#gradient {
  . lárétt ( @startColor : #555, @endColor: #333) { 
    bakgrunnslitur : @endColor ; _ _ 
    bakgrunnur - endurtaka : endurtaka - x ;
    bakgrunnur - mynd : - khtml - halli ( línulegur , vinstri efst , hægri efst , frá ( @startColor ), til ( @endColor )); // Konqueror   
    bakgrunnur - mynd : - moz - línuleg - halli ( vinstri , @startColor , @endColor ); // FF 3.6+    
    bakgrunnur - mynd : - ms - línuleg - halli ( vinstri , @startColor , @endColor ); // IE10    
    bakgrunnur - mynd : - webkit - halli ( línuleg , vinstri efst , hægri efst , litur - stopp ( 0 %, @startColor ), litur - stopp ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    bakgrunnur - mynd : - vefsett - línuleg - halli ( vinstri , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    bakgrunnsmynd : -o - línuleg - halli ( vinstri , @startColor , @endColor ) ; _ _ // Ópera 11.10    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 og IE7 
    bakgrunnur - mynd : línuleg - halli ( vinstri , @startColor , @endColor ); // Le standard   
  }
  . lóðrétt ( @startColor : #555, @endColor: #333) { 
    bakgrunnslitur : @endColor ; _ _ 
    bakgrunnur - endurtaka : endurtaka - x ;
    bakgrunnur - mynd : - khtml - halli ( línuleg , vinstri efst , vinstri neðst , frá ( @startColor ), til ( @endColor )); // Konqueror   
    bakgrunnur - mynd : - moz - línuleg - halli ( @startColor , @endColor ); // FF 3.6+   
    background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); // IE8+
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE6 & IE7
    background-image: linear-gradient(@startColor, @endColor); // The standard
  }
  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
    ...
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
    ...
  }
}

Rekstur og netkerfi

Vertu flottur og gerðu smá stærðfræði til að búa til sveigjanlegar og öflugar blöndur eins og hér að neðan.

// Grindin
@gridColumns:       16;
@gridColumnWidth:   40px;
@gridGutterWidth:   20px;
// Grid System
.container {
  width: @siteWidth;
  margin: 0 auto;
  .clearfix();
}
.columns(@columnSpan: 1) {
  display: inline;
  float: left;
  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
  margin-left: @gridGutterWidth;
  &:first-child {
    margin-left: 0;
  }
}
.offset(@columnOffset: 1) {
  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
}