Gridi yofikira

Makina osasinthika a gridi omwe amaperekedwa ngati gawo la Bootstrap ndi grid ya 940px wide 16-column grid. Ndikokoma kwa makina odziwika bwino a gridi ya 960, koma opanda malire / padding kumanzere ndi kumanja.

Chitsanzo cha grid markup

Monga tawonera apa, mawonekedwe oyambira atha kupangidwa ndi "mizere" iwiri, iliyonse ikatenga magawo 16 oyambira omwe tafotokoza ngati gawo la gridi yathu. Onani zitsanzo pansipa kuti mumve zambiri.

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

Masanjidwe okhazikika

Mawonekedwe a 940px okulirapo, okhazikika apakati pa tsamba lililonse kapena tsamba.

<thupi>
  <div class = "chotengera" > 
    ...
  </div>
</ thupi>

Kapangidwe kamadzimadzi

Masamba osinthika amadzimadzi kapena amadzimadzi okhala ndi min- ndi max-widths ndi kampando wakumanzere. Zabwino kwa mapulogalamu.

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

Mitu ndi kukopera

Mndandanda wokhazikika wa typographic pakukonza masamba anu.

h1 ndi. Mutu 1

h2 ndi. Mutu 2

h3 ndi. Mutu 3

h4 ndi. Mutu 4

h5 ndi. Mutu 5

h6 ndi. Mutu 6

Chitsanzo ndime

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.

Mutu wachitsanzo uli ndi mutu waung'ono...

Mukhozanso kuwonjezera timitu tating'ono <strong>ndi<em>

Zina. zinthu

Pogwiritsa ntchito kutsindika, maadiresi, ndi mawu achidule

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

Nthawi yoti mugwiritse ntchito

Ma tag otsindika ( <strong>ndi <em>) ayenera kugwiritsidwa ntchito kuwonjezera kusiyana pakati pa liwu kapena chiganizo ndi mawu ozungulira. Gwiritsani <strong>ntchito chidwi chachikale komanso chidwi <em>chambiri ndi maudindo.

Kutsindika m'ndime

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

Maadiresi

Chigawocho addresschimagwiritsidwa ntchito - mwaganiza! - maadiresi. Umu ndi momwe zimawonekera:

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

Zindikirani: Mzere uliwonse mumzere addressuyenera kutha ndi kuthyola mzere ( <br />) kuti mukonze bwino zomwe zili momwe zimawerengedwa m'moyo weniweni popanda masitayelo aliwonse.

Chidule cha mawu

Pachidule ndi ma acronyms, gwiritsani ntchito abbrtag ( acronymyatsitsidwa mu HTML5 ). Ikani mawonekedwe achidule mkati mwa tag ndikuyika mutu wa dzina lathunthu.

Mawu a blockquotes

<blockquote> <p> <cite>

Onetsetsani kuti mwakulunga blockquotemozungulira paragraphndi citema tag. Potchula gwero, gwiritsani ntchito citechinthucho. CSS idzayamba dzina lokhala ndi em dash (—).

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

Dr. Julius Hibbert

Osalamulidwa<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Team Anzanga
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Yohane Yakobo
• Paul Pierce
• Kevin Garnett

Osatchulidwa<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Team Anzanga
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Yohane Yakobo
• Paul Pierce
• Kevin Garnett

Adalamulidwa<ol>

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

Kufotokozeradl

Mndandanda wamafotokozedwe

Mndandanda wamafotokozedwe ndi abwino kufotokozera mawu.

Euismod

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

Donec id ili si mi porta gravida ndi eget metus.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

Kumanga matebulo

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

Matebulo ndi abwino - pazinthu zambiri. Magome abwino, komabe, amafunikira chikondi chocheperako kuti chikhale chothandiza, chokhazikika, komanso chowerengeka (pamlingo wamakhodi). Nawa malangizo angapo othandiza.

Mangirirani mitu yanu nthawi theadzonse kuti utsogoleri ndi thead> tr> th.

Mofanana ndi mitu yazagawo, zonse zomwe zili patebulo lanu ziyenera kukulungidwa tbodykuti utsogoleri wanu ukhale tbody> tr> td.

Chitsanzo: Masitayelo a tebulo

Matebulo onse azisinthidwa okha ndi malire ofunikira kuti awonetsetse kuti awerengeka komanso kukonza bwino. Palibe chifukwa chowonjezera makalasi owonjezera kapena mawonekedwe.

#	Dzina loyamba	Dzina lomaliza	Chiyankhulo
1	Ena	Mmodzi	Chingerezi
2	Joe	Sixpack	Chingerezi
3	Stu	Dent	Kodi

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

Chitsanzo: Zamizeremizere Mbidzi

Pezani zokometsera pang'ono ndi matebulo anu powonjezera mbidzi - ingowonjezerani .zebra-stripedkalasi.

#	Dzina loyamba	Dzina lomaliza	Chiyankhulo
1	Ena	Mmodzi	Chingerezi
2	Joe	Sixpack	Chingerezi
3	Stu	Dent	Kodi

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

Chitsanzo: Mizere ya Mbidzi w/ TableSorter.js

Kutengera chitsanzo cham'mbuyomu, timawongolera magwiridwe antchito a matebulo athu popereka magwiridwe antchito kudzera pa jQuery ndi pulogalamu yowonjezera ya Tablesorter . Dinani mutu wagawo lililonse kuti musinthe mtundu.

#	Dzina loyamba	Dzina lomaliza	Chiyankhulo
1	Anu	Mmodzi	Chingerezi
2	Joe	Sixpack	Chingerezi
3	Stu	Dent	Kodi

<script type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>  
<script type = "text/javascript" > 
  $ ( chikalata ). okonzeka ( ntchito () { 
    $ ( "table#sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<table class = "common-table zebra-milozo" > 
  ...
</table>

Masitayilo ofikira

Mafomu onse amapatsidwa masitayelo osasinthika kuti awawonetse m'njira yowerengeka komanso yowonjezereka. Masitayilo amaperekedwa pazolowetsa mawu, sankhani ndandanda, zolemba, mabatani a wailesi ndi mabokosi otsimikizira, ndi mabatani.

Nthano yachitsanzo

Zolowetsa X-Zazikulu

Sankhani

1 2 3 4 5

Sankhani

1 2 3 4 5

Zolowetsa Zosasinthika

Zina Zamtengo Pano

Zolowetsa Zoyimitsidwa

Zolowetsa X-Zazikulu

Kagawo kakang'ono ka mawu othandizira

Nthano yachitsanzo

Mawu Okonzedweratu

@

Bokosi Loyang'anira

Bokosi Lowonjezera

Kulowetsa Fayilo

Nthano yachitsanzo

Mndandanda wa Zosankha

• Njira yoyamba ndi iyi ndi iyo-onetsetsani kuti mukuphatikiza chifukwa chake zili bwino
• Njira yachiwiri ingathenso kufufuzidwa ndikuphatikizidwa muzotsatira za fomu
• Njira yachitatu ingathe-inde, munangoganiza - iwunikiridwanso ndikuphatikizidwa muzotsatira zamafomu
• Njira zinayi sizingawunikidwe chifukwa ndizozimitsa.

Zindikirani: Malebulo amazungulira zonse zomwe mungasankhe pazigawo zazikuluzikulu zodina komanso mawonekedwe osavuta kugwiritsa ntchito.

Date Range

ku Nthawi zonse zimawonetsedwa ngati Pacific Standard Time (GMT -08:00).

Textarea

Malemba othandizira ofotokozera gawo lomwe lili pamwambapa ngati likufunika.

Mndandanda wa Zosankha

• Njira yoyamba ndi iyi ndi iyo-onetsetsani kuti mukuphatikiza chifukwa chake zili bwino
• Njira yachiwiri ingathenso kufufuzidwa ndikuphatikizidwa muzotsatira za fomu

Sungani Zosintha Letsani

mafomu osanjikizidwa

Onjezani .form-stackedku HTML ya fomu yanu ndipo mudzakhala ndi zilembo pamwamba pamasamba awo m'malo mwa kumanzere kwawo. Izi zimagwira ntchito bwino ngati mafomu anu ali aafupi kapena muli ndi magawo awiri olowera mafomu olemera.

Nthano yachitsanzo

Zolowetsa X-Zazikulu

Sankhani

1 2 3 4 5

Nthano yachitsanzo

Mndandanda wa Zosankha

• Njira yoyamba ndi iyi ndi iyo-onetsetsani kuti mukuphatikiza chifukwa chake zili bwino
• Njira yachiwiri ingathenso kufufuzidwa ndikuphatikizidwa muzotsatira za fomu

Zindikirani: Malebulo amazungulira zonse zomwe mungasankhe pazigawo zazikuluzikulu zodina komanso mawonekedwe osavuta kugwiritsa ntchito.

Sungani Zosintha Letsani

Mabatani

Monga msonkhano, mabatani amagwiritsidwa ntchito pochita zinthu pomwe maulalo amagwiritsidwa ntchito pazinthu. Mwachitsanzo, "Kutsitsa" kungakhale batani ndipo "zochitika zaposachedwa" zitha kukhala ulalo.

Mabatani onse amasinthidwa kukhala mtundu wotuwa, koma gulu labuluu .primarylikupezeka. Komanso, kugubuduza masitayelo anu ndikosavuta.

Mwachitsanzo mabatani

Mabatani a mabatani amatha kugwiritsidwa ntchito pa chilichonse chomwe .btnchikugwiritsidwa ntchito. Nthawi zambiri mudzafuna kugwiritsa ntchito izi pazokha a, button, ndikusankha inputzinthu. Umu ndi momwe zimawonekera:

Kukula kosinthika

Mukufuna mabatani akulu kapena ang'onoang'ono? Khalani nazo!

Dziko olumala

Kwa mabatani omwe sakugwira ntchito kapena oyimitsidwa ndi pulogalamuyi pazifukwa zina, gwiritsani ntchito malo olumala. Ndiwo .disabledmaulalo ndi :disabledzinthu button.

Maulalo

Mabatani

Ndi chiyani

Topbar yathu ndi bala yokhazikika yomwe imakhala ndi logo kapena dzina la webusayiti, mayendedwe oyambira, ndi mawonekedwe osakira.

Customizable

Zinthu zonse mkati, ndi topbar yonse, ndizosankha. Mutha kusankha kuphatikiza logo/dzina, nav, kusaka, ndi nav yachiwiri-kapena kuphatikiza kulikonse.

Zotsitsa zikuphatikizidwa

Monga gawo lalikulu lakusakatula, taphatikizanso kuthekera kwakuti muwonjezere zotsikira ku nav yanu. Onani nav yachiwiri pamwambapa (yolumikizidwa kumanja) kuti muwone momwe zimachitikira.

Ma tabu ndi mapiritsi

Pangani navigation yosavuta yachiwiri ndi ul. Sinthani pakati pa ma tabo kapena mapiritsi powonjezera kalasi yoyenera.

Zabwino kwambiri pamagawo ang'onoang'ono monga masamba ochunira akaunti yathu komanso nthawi ya ogwiritsa ntchito kuti asinthe pakati pamasamba omwe ali ngati. Amapezeka mumitundu yama tabbed kapena mapiritsi.

• Kunyumba
• Mbiri
• Mauthenga
• Zokonda
• Contact

<ul class = "ma tabu" > 
  <li class = "active" > <a href = ""> Kwawo </a></li>  
  <li><a href = ""> Mbiri </a> </li> 
  <li><a href = ""> Mauthenga </a> </li> 
  <li><a href = ""> Zokonda </a> </li> 
  <li><a href = ""> Lumikizanani </a> </li> 
</ul>

• Kunyumba
• Mbiri
• Mauthenga
• Zokonda
• Contact

<ul class = "mapiritsi" > 
  <li class = "active" > <a href = ""> Kwawo </a></li>  
  <li><a href = ""> Mbiri </a> </li> 
  <li><a href = ""> Mauthenga </a> </li> 
  <li><a href = ""> Zokonda </a> </li> 
  <li><a href = ""> Lumikizanani </a> </li> 
</ul>

Pagination

Ultra mophweka komanso kalembedwe pang'ono pagination wouziridwa ndi Rdio. Chotchinga chachikulu ndi chovuta kuphonya, chiwonjezeke mosavuta, ndipo chimapereka malo akulu odina.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "" > ← Zam'mbuyo </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 = "next" > <a href = ""> Chotsatira → </a></li>  
  </ul>
</div>

Zidziwitso zoyambira

Mauthenga a mzere umodzi wowunikira kulephera, kulephera kotheka, kapena kupambana kwa chinthu. Zothandiza makamaka mafomu.

Letsani mauthenga

Pamauthenga omwe amafunikira kufotokozera pang'ono, tili ndi zidziwitso za mawonekedwe a ndime. Izi ndi zabwino potulutsa mauthenga olakwika ataliatali, kuchenjeza wogwiritsa ntchito zomwe akuyembekezera, kapena kungopereka chidziwitso kuti mutsindike kwambiri patsamba.

Makhalidwe

Ma modals—ma dialogs kapena lightboxes—ndiabwino pa zochitika zapanthawi yomwe kuli kofunika kuti nkhani yakumbuyo isungidwe.

Popovers

Gwiritsani ntchito popovers kuti mupereke zambiri pamasamba osasintha masanjidwe.

Bootstrap inamangidwa ndi Preboot , paketi yotseguka ya zosakaniza ndi zosinthika kuti zigwiritsidwe ntchito pamodzi ndi Zochepa , CSS preprocessor kuti ikhale yofulumira komanso yosavuta.

Onani momwe tidagwiritsira ntchito Preboot mu Bootstrap ndi momwe mungagwiritsire ntchito ngati mutasankha kuyendetsa Zochepa pa polojekiti yanu yotsatira.

Momwe mungagwiritsire ntchito

Gwiritsani ntchito njirayi kuti mugwiritse ntchito mokwanira za Bootstrap's Less variables, mixin, ndi nesting mu CSS kudzera pa javascript mu msakatuli wanu.

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

Simukumva yankho la .js? Yesani pulogalamu ya Less Mac kapena gwiritsani ntchito Node.js kuti muphatikize mukatumiza khodi yanu.

Zomwe zikuphatikizidwa

Nawa zina mwazabwino kwambiri zomwe zikuphatikizidwa mu Twitter Bootstrap ngati gawo la Bootstrap. Pitani patsamba la Bootstrap kapena tsamba la polojekiti ya Github kuti mutsitse ndikuphunzira zambiri.

Zosintha zamitundu

Zosintha mu Pang'ono ndizabwino posungira ndikusintha mutu wanu wa CSS kwaulere. Mukafuna kusintha mtundu kapena mtengo womwe umagwiritsidwa ntchito pafupipafupi, sinthani pamalo amodzi ndipo mwakhazikitsidwa.

// Zogwirizana
@linkColor : #8b59c2;         
@linkColorHover :     mdima ( @linkColor , 10 ); 
 
// Magulu
@wakuda : #000;             
@grayDark : chepetsa (           @black , 25 %); 
@imvi : chepetsa (               @black , 50 %); 
@grayLight : chepetsa (          @black , 70 %); 
@grayLighter : chepetsa (        @black , 90 %); 
@woyera : #fff;             
 
// Mitundu ya Mawu
@buluu : #08b5fb;              
@wobiriwira : #46a546;             
@chofiira : #9d261d;               
@chikasu : #ffc40d;            
@lalanje : #f89406;            
@pinki : #c3325f;              
@wofiirira : #7a43b6;            
 
// Zoyambira
@chiyambi : 20px ;          

Kupereka ndemanga

Pang'ono amaperekanso njira ina yoperekera ndemanga kuwonjezera pa /* ... */mawu abwinobwino a CSS.

// Awa ndi ndemanga
/* Ilinso ndi ndemanga */

Amasakaniza wazoo

Mixins amaphatikizanso kapena magawo a CSS, kukulolani kuti muphatikize ma code kukhala amodzi. Ndiabwino kwa ogulitsa omwe ali ndi prefixed monga box-shadow, ma gradients abrowser, masanjidwe amtundu, ndi zina zambiri. Pansipa pali zitsanzo za zosakaniza zomwe zikuphatikizidwa ndi Bootstrap.

Mitundu ya zilembo

#mtundu {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
kukula kwa     font : @size ; 
    font - kulemera : @weight ; 
    mzere - kutalika : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
kukula kwa     font : @size ; 
    font - kulemera : @weight ; 
    mzere - kutalika : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
kukula kwa     font : @size ; 
    font - kulemera : @weight ; 
    mzere - kutalika : @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
kukula kwa     font : @size ; 
    font - kulemera : @weight ; 
    mzere - kutalika : @lineHeight ; 
  }
}

Ma gradients

#gradient {
  . yopingasa ( @startColor : #555, @endColor: #333) { 
    maziko - mtundu : @endColor ; 
    maziko - kubwereza : kubwereza - x ;
    maziko - chithunzi : - khtml - gradient ( mzere , kumanzere pamwamba , kumanja kumanja , kuchokera ( @startColor ), mpaka ( @endColor )); // Konqueror   
    maziko - chithunzi : - moz - mzere - gradient ( kumanzere , @startColor , @endColor ); // FF 3.6+    
    maziko - chithunzi : - ms - mzere - gradient ( kumanzere , @startColor , @endColor ); // IE10    
    maziko - chithunzi : - webkit - gradient ( mzere , kumanzere pamwamba , kumanja kumanja , mtundu - imani ( 0 %, @startColor ), mtundu - imani ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    maziko - chithunzi : - webkit - linear - gradient ( kumanzere , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    maziko - chithunzi : - o - mzere - gradient ( kumanzere , @startColor , @endColor ); // Opera 11.10    
    - ms - fyuluta : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    fyuluta : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    maziko - chithunzi : mzere - gradient ( kumanzere , @startColor , @endColor ); // Le standard   
  }
  . ofukula ( @startColor : #555, @endColor: #333) { 
    maziko - mtundu : @endColor ; 
    maziko - kubwereza : kubwereza - x ;
    maziko - chithunzi : - khtml - gradient ( mzere , kumanzere pamwamba , kumanzere kumanzere , kuchokera ( @startColor ), kupita ku ( @endColor )); // Konqueror   
    maziko - chithunzi : - moz - mzere - gradient ( @startColor , @endColor ); // FF 3.6+   
    maziko - chithunzi : - ms - mzere - gradient ( @startColor , @endColor ); // IE10   
    maziko - chithunzi : - webkit - gradient ( mzere , kumanzere pamwamba , kumanzere kumanzere , mtundu - imani ( 0 %, @startColor ), mtundu - imani ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    maziko - chithunzi : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    maziko - chithunzi : - o - mzere - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - fyuluta : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    fyuluta : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    maziko - chithunzi : mzere - gradient ( @startColor , @endColor ); // Muyezo  
  }
  . mbali ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . ofukula - mitundu itatu ( @startColor : # 00b3ee , @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Ntchito ndi grid system

Sangalalani ndikuchita masamu kuti mupange zosakaniza zosinthika komanso zamphamvu ngati zomwe zili pansipa.

// Griditude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Grid System
. chidebe {
  m'lifupi : @siteWidth ; 
  malire : 0 auto ;  
  . clearfix ();
}
. mizati ( @columnSpan : 1 ) {  
  kuwonetsera : mkati ; 
  kuyandama : kumanzere ;
  m'lifupi : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  malire - kumanzere : @gridGutterWidth ; 
  & : mwana woyamba {
    malire - kumanzere : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  malire - kumanzere : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! zofunika ;          
}