Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum na eros.
Bootstrap ni zana kutoka Twitter iliyoundwa ili kuanzisha uundaji wa programu za wavuti na tovuti.
Inajumuisha CSS msingi na HTML kwa uchapaji, fomu, vitufe, majedwali, gridi, urambazaji, na zaidi.
Arifa ya Nerd: Bootstrap imeundwa kwa Chini na iliundwa kufanya kazi nje ya lango kwa kuzingatia vivinjari vya kisasa pekee.
Kwa mwanzo wa haraka na rahisi zaidi, nakili kijisehemu hiki kwenye ukurasa wako wa tovuti.
Shabiki wa kutumia Chini? Hakuna shida, fanya tu repo na uongeze mistari hii:
Pakua, uma, vuta, masuala ya faili, na zaidi ukitumia repo rasmi la Bootstrap kwenye Github.
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.
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 wa msingi wa kontena wenye upana wa 940px, ulio katikati kwa takriban tovuti au ukurasa wowote.
- <mwili>
- <div class = "chombo" >
- ...
- </ div>
- </ mwili>
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>
Daraja la kawaida la uchapaji kwa ajili ya kuunda kurasa zako za tovuti.
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.
Unaweza pia kuongeza vichwa vidogo <strong>
na<em>
Kwa kutumia msisitizo, anwani na vifupisho
<strong>
<em>
<address>
<abbr>
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.
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.
Kipengele address
hiki kinatumika—umekisia!—anwani. Hivi ndivyo inavyoonekana:
Kumbuka: Kila mstari katika address
sharti umalizike kwa kukatika kwa mstari ( <br />
) ili kupanga maudhui vizuri jinsi yanavyosomwa katika maisha halisi bila mitindo yoyote kutumika.
Kwa vifupisho na vifupisho, tumia abbr
lebo ( acronym
imeacha kutumika katika HTML5 ). Weka fomu ya mkato ndani ya lebo na weka kichwa cha jina kamili.
<blockquote>
<p>
<cite>
Hakikisha umefunika blockquote
na paragraph
vitambulisho cite
vyako. Unapotaja chanzo, tumia cite
kipengele. 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
<ul>
<ul.unstyled>
<ol>
dl
<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 thead
namna ambayo uongozi ni thead
> tr
> th
.
Sawa na vichwa vya safu wima, maudhui yote ya jedwali lako yanapaswa kufungwa a tbody
ili daraja lako liwe tbody
> tr
> td
.
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>
Pata kupendeza kidogo na meza zako kwa kuongeza zebra-striping-ongeza tu .zebra-striped
darasa.
# | 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>
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>
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.
Ongeza .form-stacked
kwenye 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.
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 .primary
darasa la bluu linapatikana. Kwa kuongeza, kutengeneza mitindo yako mwenyewe ni rahisi sana.
Mitindo ya vifungo inaweza kutumika kwa kitu chochote .btn
kilichowekwa. Kwa kawaida utataka kutumia hizi kwa pekee a
, button
, na kuchagua input
vipengele. Hivi ndivyo inavyoonekana:
Ungependa vitufe vikubwa au vidogo? Kuwa na hayo!
Kwa vitufe ambavyo havitumiki au vimezimwa na programu kwa sababu moja au nyingine, tumia hali ya ulemavu. Hiyo ni .disabled
kwa viungo na :disabled
kwa button
vipengele.
Ujumbe wa mstari mmoja wa kuangazia kutofaulu, kutofaulu kunakowezekana, au kufaulu kwa kitendo. Hasa muhimu kwa fomu.
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.
Mipangilio—vidirisha au visanduku vyepesi—ni vyema kwa vitendo vya muktadha katika hali ambapo ni muhimu kwamba muktadha wa usuli udumishwe.
Mwili mmoja mzuri ...
Twipsies ni muhimu sana kwa kumsaidia mtumiaji aliyechanganyikiwa na kuwaelekeza katika mwelekeo sahihi.
Inaaminika kuwa ipsum imetokea bila makosa ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptate explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dictaum quae fugit accusant accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dictaum quae fugit accusate accusative
Tumia popover kutoa maelezo ya maandishi kwa ukurasa bila kutekeleza mpangilio.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum na eros.
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.
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.
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 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 ;
Chini pia hutoa mtindo mwingine wa kutoa maoni pamoja na /* ... */
sintaksia ya kawaida ya CSS.
- // Haya ni maoni
- /* Haya pia ni maoni */
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.
- #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 ;
- }
- }
- #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) {
- ...
- }
- }
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 ;
- }