Gridi chaguo-msingi

Mfumo wa gridi chaguo-msingi uliotolewa kama sehemu ya Bootstrap ni gridi ya safu wima 16 yenye upana wa 940px. Ni ladha ya mfumo maarufu wa gridi ya 960, lakini bila ukingo wa ziada kwenye pande za kushoto na kulia.

Mfano wa alama ya gridi

Kama inavyoonyeshwa hapa, mpangilio msingi unaweza kuundwa kwa "safu" mbili, kila moja ikijumuisha idadi ya safu wima 16 tulizofafanua kama sehemu ya mfumo wetu wa gridi ya taifa. Tazama mifano hapa chini kwa tofauti zaidi.

<div class = "safu" > 
  <div class = "span6 columns" > 
    ...
  </ div>
  <div class = "span10 columns" > 
    ...
  </ div>
</ div>

Mpangilio usiohamishika

Mpangilio wa msingi wa kontena wenye upana wa 940px, ulio katikati kwa takriban tovuti au ukurasa wowote.

<mwili>
  <div class = "chombo" > 
    ...
  </ div>
</ mwili>

Mpangilio wa maji

Muundo wa ukurasa wa kimiminika au kioevu chenye upana wa chini na wa juu zaidi na utepe wa upande wa kushoto. Nzuri kwa programu.

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

Vichwa na nakala

Daraja la kawaida la uchapaji kwa ajili ya kuunda kurasa zako za tovuti.

h1. Kichwa 1

h2. Kichwa cha 2

h3. Kichwa cha 3

h4. Kichwa cha 4

h5. Kichwa cha 5

h6. Kichwa cha 6

Mfano aya

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.

Mfano wa kichwa Kina kichwa kidogo...

Unaweza pia kuongeza vichwa vidogo <strong>na<em>

Nyingine. vipengele

Kwa kutumia msisitizo, anwani na vifupisho

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

Wakati wa kutumia

Lebo za kusisitiza ( <strong>na <em>) zinapaswa kutumika kuongeza tofauti ya kuona kati ya neno au kifungu cha maneno na nakala yake inayozunguka. Tumia <strong>kwa umakini wa zamani na <em>kwa umakini na mada.

Mkazo katika aya

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.

Anwani

Kipengele addresshiki kinatumika—umekisia!—anwani. Hivi ndivyo inavyoonekana:

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

Kumbuka: Kila mstari katika addresssharti umalizike kwa kukatika kwa mstari ( <br />) ili kupanga maudhui vizuri jinsi yanavyosomwa katika maisha halisi bila mitindo yoyote kutumika.

Vifupisho

Kwa vifupisho na vifupisho, tumia abbrlebo ( acronymimeacha kutumika katika HTML5 ). Weka fomu ya mkato ndani ya lebo na weka kichwa cha jina kamili.

Nukuu za kuzuia

<blockquote> <p> <cite>

Hakikisha umefunika blockquotena paragraphvitambulisho citevyako. Unapotaja chanzo, tumia citekipengele. CSS itatangulia jina kiotomatiki kwa kistari cha em (—).

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

Julius Hibbert

Haijaagizwa<ul>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Wenzangu wa Timu
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Yohana Jacob
• Paul Pierce
• Kevin Garnett

Isiyo na mtindo<ul.unstyled>

• Jeremy Bixby
• Robert Dezure
• Josh Washington
• Anton Capresi
• Wenzangu wa Timu
  • George Castanza
  • Jerry Seinfeld
  • Cosmo Kramer
  • Elaine Bennis
  • Newman
• Yohana Jacob
• Paul Pierce
• Kevin Garnett

Imeagizwa<ol>

1. Jeremy Bixby
2. Robert Dezure
3. Josh Washington
4. Anton Capresi
5. Wenzangu wa Timu
   1. George Castanza
   2. Jerry Seinfeld
   3. Cosmo Kramer
   4. Elaine Bennis
   5. Newman
6. Yohana Jacob
7. Paul Pierce
8. Kevin Garnett

Maelezodl

Orodha za maelezo

Orodha ya maelezo ni kamili kwa kufafanua maneno.

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.

Kujenga meza

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

Jedwali ni nzuri - kwa mambo mengi. Jedwali kubwa, hata hivyo, zinahitaji upendo wa kuashiria ili ziwe na manufaa, scalable, na kusomeka (katika kiwango cha msimbo). Hapa kuna vidokezo vichache vya kusaidia.

Daima funga vichwa vya safu yako kwa theadnamna ambayo uongozi ni thead> tr> th.

Sawa na vichwa vya safu wima, maudhui yote ya jedwali lako yanapaswa kufungwa a tbodyili daraja lako liwe tbody> tr> td.

Mfano: Mitindo chaguomsingi ya jedwali

Majedwali yote yatawekwa kiotomatiki kwa kutumia mipaka muhimu pekee ili kuhakikisha usomaji na kudumisha muundo. Hakuna haja ya kuongeza madarasa ya ziada au sifa.

#	Jina la kwanza	Jina la familia	Lugha
1	Baadhi	Moja	Kiingereza
2	Joe	Sixpack	Kiingereza
3	Stu	Kinyesi	Kanuni

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

Mfano: Zebra-striped

Pata kupendeza kidogo na meza zako kwa kuongeza zebra-striping-ongeza tu .zebra-stripeddarasa.

#	Jina la kwanza	Jina la familia	Lugha
1	Baadhi	Moja	Kiingereza
2	Joe	Sixpack	Kiingereza
3	Stu	Kinyesi	Kanuni

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

Mfano: Zebra-striped w/ TableSorter.js

Kwa kuchukua mfano uliopita, tunaboresha manufaa ya jedwali zetu kwa kutoa utendakazi wa kupanga kupitia jQuery na programu-jalizi ya Tablesorter . Bofya kichwa cha safu yoyote ili kubadilisha aina.

#	Jina la kwanza	Jina la familia	Lugha
1	Wako	Moja	Kiingereza
2	Joe	Sixpack	Kiingereza
3	Stu	Kinyesi	Kanuni

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

Mitindo chaguomsingi

Fomu zote hupewa mitindo chaguo-msingi ili kuziwasilisha kwa njia inayoweza kusomeka na inayoweza kupanuka. Mitindo hutolewa kwa ingizo za maandishi, chagua orodha, sehemu za maandishi, vitufe vya redio na visanduku vya kuteua, na vitufe.

Mfano wa hadithi ya fomu

Ingizo la X-Kubwa

Chagua

1 2 3 4 5

Chagua

1 2 3 4 5

Ingizo lisiloweza kuhaririwa

Baadhi ya Thamani Hapa

Ingizo Limezimwa

Ingizo la X-Kubwa

Kijisehemu kidogo cha maandishi ya usaidizi

Mfano wa hadithi ya fomu

Maandishi Yanayotangulizwa

@

Kisanduku cha kuteua Kilichotangulizwa

Kisanduku cha kuteua kilichoongezwa

Ingizo la Faili

Mfano wa hadithi ya fomu

Orodha ya Chaguzi

• Chaguo la kwanza ni hili na lile—hakikisha umejumuisha kwa nini ni nzuri
• Chaguo la pili pia linaweza kuangaliwa na kujumuishwa katika matokeo ya fomu
• Chaguo la tatu linaweza—ndiyo, ulikisia—pia kuangaliwa na kujumuishwa katika matokeo ya fomu
• Chaguo la nne haliwezi kuangaliwa kwa kuwa limezimwa.

Kumbuka: Lebo huzunguka chaguo zote kwa maeneo makubwa zaidi ya kubofya na fomu inayoweza kutumika zaidi.

Masafa ya Tarehe

kwa Saa zote zinaonyeshwa kama Saa Wastani ya Pasifiki (GMT -08:00).

Eneo la maandishi

Kizuizi cha maandishi ya usaidizi kuelezea sehemu iliyo hapo juu ikihitajika.

Orodha ya Chaguzi

• Chaguo la kwanza ni hili na lile—hakikisha umejumuisha kwa nini ni nzuri
• Chaguo la pili pia linaweza kuangaliwa na kujumuishwa katika matokeo ya fomu

Hifadhi mabadiliko Ghairi

Fomu zilizopangwa

Ongeza .form-stackedkwenye HTML ya fomu yako na utakuwa na lebo juu ya sehemu zao badala ya kushoto kwao. Hii inafanya kazi vizuri ikiwa fomu zako ni fupi au una safu wima mbili za pembejeo za fomu nzito zaidi.

Mfano wa hadithi ya fomu

Ingizo la X-Kubwa

Chagua

1 2 3 4 5

Mfano wa hadithi ya fomu

Orodha ya Chaguzi

• Chaguo la kwanza ni hili na lile—hakikisha umejumuisha kwa nini ni nzuri
• Chaguo la pili pia linaweza kuangaliwa na kujumuishwa katika matokeo ya fomu

Kumbuka: Lebo huzunguka chaguo zote kwa maeneo makubwa zaidi ya kubofya na fomu inayoweza kutumika zaidi.

Hifadhi mabadiliko Ghairi

Vifungo

Kama mkusanyiko, vitufe hutumiwa kwa vitendo wakati viungo vinatumika kwa vitu. Kwa mfano, "Pakua" inaweza kuwa kitufe na "shughuli za hivi majuzi" inaweza kuwa kiungo.

Vifungo vyote chaguomsingi kwa mtindo wa kijivu hafifu, lakini .primarydarasa la bluu linapatikana. Kwa kuongeza, kutengeneza mitindo yako mwenyewe ni rahisi sana.

Vifungo vya mfano

Mitindo ya vifungo inaweza kutumika kwa kitu chochote .btnkilichowekwa. Kwa kawaida utataka kutumia hizi kwa pekee a, button, na kuchagua inputvipengele. Hivi ndivyo inavyoonekana:

Ukubwa mbadala

Ungependa vitufe vikubwa au vidogo? Kuwa na hayo!

Jimbo la walemavu

Kwa vitufe ambavyo havitumiki au vimezimwa na programu kwa sababu moja au nyingine, tumia hali ya ulemavu. Hiyo ni .disabledkwa viungo na :disabledkwa buttonvipengele.

Viungo

Vifungo

Ni nini

Upau wetu wa juu ni upau usiobadilika unaohifadhi nembo au jina la tovuti, urambazaji msingi, na fomu ya utafutaji.

Inaweza kubinafsishwa

Vipengele vyote ndani, na upau wa juu wote pia, ni chaguo. Unaweza kuchagua kujumuisha nembo/jina, nav, utafutaji, na nav ya pili—au mchanganyiko wowote wa hayo.

Kunjuzi pamoja

Kama sehemu ya urambazaji mkuu, tumejumuisha uwezo wako wa kuongeza menyu kunjuzi kwenye nav yako. Angalia nav ya pili hapo juu (iliyopangiliwa kulia) ili kuona jinsi inafanywa.

Vichupo na vidonge

Unda urambazaji rahisi wa upili na ul. Badilisha kati ya vichupo au vidonge kwa kuongeza darasa linalofaa.

Inafaa kwa sehemu ndogo za maudhui kama vile kurasa za mipangilio ya akaunti yetu na kalenda ya matukio ya mtumiaji ya kubadilisha kati ya kurasa za maudhui kama hayo. Inapatikana katika mitindo ya vichupo au vidonge.

• Nyumbani
• Wasifu
• Ujumbe
• Mipangilio
• Wasiliana

<ul class = "tabs" > 
  <li class = "active" ><a href = "" > Nyumbani </a></li>  
  <li><a href = "" > Wasifu </a></li> 
  <li><a href = "" > Ujumbe </a></li> 
  <li><a href = "" > Mipangilio </a></li> 
  <li><a href = "" > Wasiliana </a></li> 
</ul>

• Nyumbani
• Wasifu
• Ujumbe
• Mipangilio
• Wasiliana

<ul class = "vidonge" > 
  <li class = "active" ><a href = "" > Nyumbani </a></li>  
  <li><a href = "" > Wasifu </a></li> 
  <li><a href = "" > Ujumbe </a></li> 
  <li><a href = "" > Mipangilio </a></li> 
  <li><a href = "" > Wasiliana </a></li> 
</ul>

Pagination

Urahisi wa hali ya juu na upagishaji wa muundo wa chini uliochochewa na Rdio. Kizuizi kikubwa ni ngumu kukosa, kinaweza kuongezwa kwa urahisi, na hutoa maeneo makubwa ya kubofya.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "" > ← Iliyotangulia </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 = "" > Inayofuata → </a></li>  
  </ul>
</ div>

Tahadhari za msingi

Ujumbe wa mstari mmoja wa kuangazia kutofaulu, kutofaulu kunakowezekana, au kufaulu kwa kitendo. Hasa muhimu kwa fomu.

Zuia ujumbe

Kwa ujumbe unaohitaji maelezo kidogo, tuna arifa za mtindo wa aya. Hizi ni bora kwa kuburudisha ujumbe mrefu wa makosa, kuonya mtumiaji juu ya kitendo kinachosubiri, au kuwasilisha tu habari kwa msisitizo zaidi kwenye ukurasa.

Mitindo

Mipangilio—vidirisha au visanduku vyepesi—ni vyema kwa vitendo vya muktadha katika hali ambapo ni muhimu kwamba muktadha wa usuli udumishwe.

Popovers

Tumia popover kutoa maelezo ya maandishi kwa ukurasa bila kutekeleza mpangilio.

Bootstrap iliundwa kwa Preboot , kifurushi cha chanzo huria cha michanganyiko na viambajengo vya kutumika pamoja na Less , kichakataji awali cha CSS kwa ukuzaji wa wavuti haraka na rahisi.

Angalia jinsi tulivyotumia Preboot katika Bootstrap na jinsi unavyoweza kuitumia ikiwa utachagua kuendesha Chini kwenye mradi wako unaofuata.

Jinsi ya kuitumia

Tumia chaguo hili kutumia kikamilifu vigeu vya Bootstrap's Less, michanganyiko, na kuweka kiota katika CSS kupitia javascript kwenye kivinjari chako.

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

Je! huhisi suluhisho la .js? Jaribu programu ya Less Mac au tumia Node.js kukusanya unapotuma msimbo wako.

Ni nini kimejumuishwa

Hapa kuna baadhi ya mambo muhimu ya kile kilichojumuishwa kwenye Twitter Bootstrap kama sehemu ya Bootstrap. Nenda kwenye tovuti ya Bootstrap au ukurasa wa mradi wa Github ili kupakua na kujifunza zaidi.

Vigezo vya rangi

Vigezo katika Chini ni bora kwa kudumisha na kusasisha maumivu ya kichwa yako ya CSS bila malipo. Unapotaka kubadilisha thamani ya rangi au thamani inayotumika mara kwa mara, isasishe katika sehemu moja na umewekwa.

// Viungo
@linkColor : #8b59c2;         
@linkColorHover :     giza ( @linkColor , 10 ); 
 
// Grey
@nyeusi : #000;             
@grayDark : wepesi (           @nyeusi , 25 %); 
@kijivu : wepesi (               @nyeusi , 50 %); 
@grayLight :          nyepesi ( @nyeusi , 70 %); 
@grayLighter :        nyepesi ( @black , 90 %); 
@mzungu : #fff;             
 
// Rangi za Lafudhi
@bluu : #08b5fb;              
@kijani : #46a546;             
@nyekundu : #9d261d;               
@njano : #ffc40d;            
@chungwa : #f89406;            
@pink : #c3325f;              
@zambarau : #7a43b6;            
 
// Msingi
@msingi : 20px ;          

Kutoa maoni

Chini pia hutoa mtindo mwingine wa kutoa maoni pamoja na /* ... */sintaksia ya kawaida ya CSS.

// Haya ni maoni
/* Haya pia ni maoni */

Inachanganya wazoo

Mchanganyiko kimsingi ni pamoja na au sehemu za CSS, hukuruhusu kuchanganya kizuizi cha msimbo kuwa moja. Ni nzuri kwa sifa zilizoangaziwa awali za muuzaji kama vile box-shadow, gradients za kivinjari, safu za fonti na zaidi. Ifuatayo ni sampuli ya michanganyiko ambayo imejumuishwa na Bootstrap.

Mlundikano wa fonti

#fonti {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
saizi ya     fonti : @size ; 
    font - uzito : @uzito ; 
urefu wa     mstari : @lineHeight ; 
  }
  . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - familia : "Helvetica Neue" , ​​Helvetica , Arial , sans - serif ;   
saizi ya     fonti : @size ; 
    font - uzito : @uzito ; 
urefu wa     mstari : @lineHeight ; 
  }
  . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    font - familia : "Georgia" , Times New Roman , Times , sans - serif ;     
saizi ya     fonti : @size ; 
    font - uzito : @uzito ; 
urefu wa     mstari : @lineHeight ; 
  }
  . nafasi moja ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    font - familia : "Monaco" , Courier Mpya , monospace ;   
saizi ya     fonti : @size ; 
    font - uzito : @uzito ; 
urefu wa     mstari : @lineHeight ; 
  }
}

Gradients

#gradient {
  . mlalo ( @startColor : #555, @endColor: #333) { 
    mandharinyuma - rangi : @endColor ; 
    background - kurudia : kurudia - x ;
    mandharinyuma - picha : - khtml - gradient ( linear , kushoto juu , kulia juu , kutoka ( @startColor ), hadi ( @endColor )); // Konqueror   
    mandharinyuma - picha : - moz - linear - gradient ( kushoto , @startColor , @endColor ); // FF 3.6+    
    mandharinyuma - picha : - ms - linear - gradient ( kushoto , @startColor , @endColor ); // IE10    
    mandharinyuma - picha : - webkit - gradient ( linear , kushoto juu , kulia juu , rangi - kuacha ( 0 %, @startColor ), rangi - kuacha ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    mandharinyuma - picha : - webkit - linear - gradient ( kushoto , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    mandharinyuma - picha : - o - linear - gradient ( kushoto , @startColor , @endColor ); // Opera 11.10    
    - ms - chujio : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    chujio : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7 
    mandharinyuma - picha : mstari - upinde rangi ( kushoto , @startColor , @endColor ); // Le kiwango   
  }
  . wima ( @startColor : #555, @endColor: #333) { 
    mandharinyuma - rangi : @endColor ; 
    background - kurudia : kurudia - x ;
    mandharinyuma - picha : - khtml - gradient ( linear , kushoto juu , kushoto chini , kutoka ( @startColor ), hadi ( @endColor )); // Konqueror   
    mandharinyuma - picha : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
    mandharinyuma - picha : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
    mandharinyuma - picha : - webkit - gradient ( linear , kushoto juu , kushoto chini , rangi - kuacha ( 0 %, @startColor ), rangi - kuacha ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    mandharinyuma - picha : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    mandharinyuma - picha : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
    - ms - chujio : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    chujio : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7 
    mandharinyuma - picha : mstari - gradient ( @startColor , @endColor ); // Kiwango  
  }
  . mwelekeo ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . wima - tatu - rangi ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Uendeshaji na mfumo wa gridi ya taifa

Furahia na ufanye hesabu ili kuzalisha michanganyiko inayoweza kunyumbulika na yenye nguvu kama hii hapa chini.

// Griditudo
@gridSafu : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
 
// Mfumo wa Gridi
. chombo {
  upana : @siteWidth ; 
  ukingo : 0 otomatiki ;  
  . clearfix ();
}
. safu wima ( @columnSpan : 1 ) {  
  onyesho : inline ; 
  kuelea : kushoto ;
  upana : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
ukingo - kushoto :   @gridGutterWidth ; 
  &: mtoto wa kwanza {
    ukingo - kushoto : 0 ; 
  }
}
. kukabiliana ( @columnOffset : 1 ) {  
ukingo - kushoto : (   @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! muhimu ;          
}