Etiam porta sem malesuada magna mollis euismod. Espesye sa tanom nga bulak ang Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ug eros.
Ang Bootstrap usa ka toolkit gikan sa Twitter nga gilaraw aron masugdan ang pag-develop sa mga webapp ug site.
Naglakip kini sa base nga CSS ug HTML alang sa typography, mga porma, mga buton, mga lamesa, mga grids, nabigasyon, ug uban pa.
Alerto sa Nerd: Ang Bootstrap gihimo uban ang Mas Gamay ug gidisenyo aron magtrabaho sa gawas sa ganghaan uban ang mga modernong browser sa hunahuna.
Para sa pinakadali ug pinakasayon nga pagsugod, kopyaha lang kini nga snippet sa imong webpage.
Usa ka fan sa paggamit sa Less? Walay problema, i-clone lang ang repo ug idugang kini nga mga linya:
Pag-download, tinidor, pagbitad, mga isyu sa pag-file, ug daghan pa gamit ang opisyal nga Bootstrap repo sa Github.
Sa una nga mga adlaw sa Twitter, gigamit sa mga inhenyero ang hapit bisan unsang librarya nga pamilyar nila aron matubag ang mga kinahanglanon sa unahan. Nagsugod ang Bootstrap isip tubag sa mga hagit nga gipresentar ug paspas nga gipaspasan sa pag-uswag sa una nga Hackweek sa Twitter.
Uban sa tabang ug feedback sa daghang mga inhenyero sa Twitter, ang Bootstrap miuswag pag-ayo aron malakip dili lamang ang mga batakang estilo, apan mas elegante ug lig-on nga mga pattern sa disenyo sa atubangan.
Basaha ang dugang sa dev.twitter.com ›
Ang Bootstrap gisulayan ug gisuportahan sa dagkong modernong mga browser sama sa Chrome, Safari, Internet Explorer, ug Firefox.
Ang Bootstrap kompleto sa gihugpong nga CSS, wala gihugpong, ug mga panig-ingnan nga mga template.
Ang default grid system nga gihatag isip kabahin sa Bootstrap kay 940px ang gilapdon nga 16-column grid. Kini usa ka lami sa sikat nga 960 grid system, apan walay dugang nga margin/padding sa wala ug tuo nga kilid.
Sama sa gipakita dinhi, ang usa ka sukaranan nga layout mahimong mahimo nga adunay duha ka "kolum," ang matag usa naglangkob sa usa ka gidaghanon sa 16 nga mga kolum nga pundasyon nga among gipasabut ingon bahin sa among sistema sa grid. Tan-awa ang mga pananglitan sa ubos alang sa dugang nga mga kalainan.
- <div class="row"> klase = "laray" >
- <div class = "span6 nga kolum" >
- ...
- </div>
- <div class = "span10 nga mga kolum" >
- ...
- </div>
- </div>
Usa ka sukaranan nga 940px ang gilapdon, nakasentro nga layout sa sulud alang sa bisan unsang site o panid.
- <lawas>
- <div class = "sudlanan" >
- ...
- </div>
- </body>
Usa ka flexible fluid o liquid page structure nga adunay min-ug max-widths ug usa ka left-hand sidebar. Maayo alang sa mga app.
- <lawas>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "sulod" >
- ...
- </div>
- </div>
- </body>
Usa ka sagad nga typographic hierarchy alang sa pag-istruktura sa imong mga webpage.
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.
Gamit ang emphasis, adres, ug abbreviation
<strong>
<em>
<address>
<abbr>
Ang emphasis tags ( <strong>
ug <em>
) kinahanglang gamiton sa pagpaila sa dugang importansya o empasis sa usa ka pulong o prase nga may kalabotan sa naglibot nga kopya niini. Gamita <strong>
para sa importansya ug <em>
para sa stress empasis.
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Espesye sa tanom nga bulak ang Maecenas faucibus mollis interdum. Nulla vitae elit libero, usa ka pharetra augue.
Mubo nga sulat: Okay ra gihapon ang paggamit <b>
ug <i>
mga tag sa HTML5, pero wala na silay dala nga mga istilo. <b>
gituyo aron ipasiugda ang mga pulong o hugpong sa mga pulong nga wala maghatag dugang nga importansya, samtang <i>
kasagaran alang sa tingog, teknikal nga mga termino, ug uban pa.
Ang <address>
elemento gigamit alang sa impormasyon sa pagkontak alang sa iyang labing duol nga katigulangan, o sa tibuok nga pundok sa trabaho. Ania ang hitsura niini:
Mubo nga sulat: Ang matag linya sa usa <address>
kinahanglan matapos sa usa ka line-break ( <br />
) o maputos sa usa ka block-level nga tag (pananglitan, <p>
) aron sa hustong pagkahan-ay sa sulod.
Para sa mga abbreviation ug acronym, gamita ang <abbr>
tag ( <acronym>
wala na gamita sa HTML5 ). Ibutang ang shorthand nga porma sulod sa tag ug magbutang ug titulo para sa kompletong ngalan.
<blockquote>
<p>
<small>
Aron maapil ang usa ka blockquote, pagputos ug <blockquote>
mga tag. Gamita ang elemento sa pagkutlo sa imong tinubdan ug makakuha ka og em dash sa wala pa kini.<p>
<small>
<small>
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Nindot ang mga lamesa—alang sa daghang butang. Ang maayo nga mga lamesa, bisan pa, nanginahanglan gamay nga gugma sa markup aron mahimong mapuslanon, mabag-o, ug mabasa (sa lebel sa code). Ania ang pipila ka mga tip aron makatabang.
Kanunay ibutang ang imong mga ulohan sa kolum sa <thead>
ingon nga hierarchy mao ang <thead>
> <tr>
> <th>
.
Sama sa mga ulohan sa kolum, ang tanan nga sulud sa lawas sa imong lamesa kinahanglan nga giputos sa usa <tbody>
aron ang imong hierarchy mao ang <tbody>
> <tr>
> <td>
.
Ang tanan nga mga lamesa awtomatikong i-istilo nga adunay hinungdanon nga mga utlanan aron masiguro ang pagkabasa ug pagpadayon sa istruktura. Dili kinahanglan nga magdugang dugang nga mga klase o mga hiyas.
# | Unang Ngalan | Apelyido | Pinulongan |
---|---|---|---|
1 | Ang uban | Sa usa ka | English |
2 | Joe | Sixpack | English |
3 | Si Stu | Dent | Code |
- <table class = "common-table" >
- ...
- </table>
Paglingaw og gamay sa imong mga lamesa pinaagi sa pagdugang og zebra-striping—idugang lang ang .zebra-striped
klase.
# | Unang Ngalan | Apelyido | Pinulongan |
---|---|---|---|
1 | Ang uban | Sa usa ka | English |
2 | Joe | Sixpack | English |
3 | Si Stu | Dent | Code |
Mubo nga sulat: Ang Zebra-striping usa ka progresibong pagpaayo nga dili magamit alang sa mga daan nga browser sama sa IE8 ug sa ubos.
- <table class = "common-table nga zebra-striped" >
- ...
- </table>
Pagkuha sa miaging pananglitan, among gipauswag ang kapuslanan sa among mga lamesa pinaagi sa paghatag ug paghan-ay nga gamit pinaagi sa jQuery ug ang Tablesorter plugin. Pag-klik sa bisan unsang ulohan sa kolum aron usbon ang klase.
# | Unang Ngalan | Apelyido | Pinulongan |
---|---|---|---|
1 | Ang imong | Sa usa ka | English |
2 | Joe | Sixpack | English |
3 | Si Stu | Dent | Code |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( function () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "common-table nga zebra-striped" >
- ...
- </table>
Ang tanan nga mga porma gihatagan ug default nga mga istilo aron ipakita kini sa usa ka mabasa ug masukod nga paagi. Gihatag ang mga istilo alang sa mga input sa teksto, pagpili sa mga lista, mga lugar sa teksto, mga buton sa radyo ug mga checkbox, ug mga buton.
Idugang .form-stacked
sa HTML sa imong porma ug aduna kay mga label sa ibabaw sa ilang mga field imbes sa ilang wala. Maayo kini kung ang imong mga porma mubo o ikaw adunay duha ka kolum sa mga input alang sa mas bug-at nga mga porma.
Ingon usa ka kombensiyon, ang mga buton gigamit alang sa mga aksyon samtang ang mga link gigamit alang sa mga butang. Pananglitan, ang "Pag-download" mahimong usa ka buton ug ang "bag-o nga kalihokan" mahimo nga usa ka link.
Ang tanan nga mga buton default sa usa ka light gray nga istilo, apan adunay usa ka asul .primary
nga klase. Dugang pa, ang pagpaligid sa imong kaugalingon nga mga istilo dali nga peasy.
Ang mga estilo sa buton mahimong magamit sa bisan unsang butang nga adunay .btn
gipadapat. Kasagaran gusto nimo nga gamiton kini sa <a>
, <button>
, ug pilia <input>
nga mga elemento. Ania ang hitsura niini:
Gusto nga mas dako o mas gagmay nga mga buton? Himoa kini!
Alang sa mga buton nga dili aktibo o gibabagan sa app tungod sa usa ka hinungdan o lain, gamita ang kahimtang nga adunay kapansanan. Kana .disabled
alang sa mga link ug :disabled
alang sa <button>
mga elemento.
Usa ka linya nga mga mensahe alang sa pagpasiugda sa kapakyasan, posible nga kapakyasan, o kalampusan sa usa ka aksyon. Ilabi na mapuslanon alang sa mga porma.
Alang sa mga mensahe nga nanginahanglan gamay nga katin-awan, kami adunay mga alerto sa istilo sa parapo. Perpekto kini alang sa pagpamulak sa mas taas nga mga mensahe sa sayup, pagpahimangno sa usa ka tiggamit sa usa ka pending nga aksyon, o pagpresentar lang sa impormasyon alang sa dugang nga pagpasiugda sa panid.
Ang mga modala—mga diyalogo o mga lightbox—maayo alang sa konteksto nga mga aksyon sa mga sitwasyon diin importante nga ang background nga konteksto mamentinar.
Usa ka maayong lawas…
Ang mga Twipsies labi ka mapuslanon alang sa pagtabang sa usa ka naglibog nga tiggamit ug pagtudlo kanila sa husto nga direksyon.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo volupremtis quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo volupremtas quasi fugit voluptatem
Gamita ang mga popover para maghatag ug subtextual nga impormasyon sa usa ka panid nga dili makaapekto sa layout.
Etiam porta sem malesuada magna mollis euismod. Espesye sa tanom nga bulak ang Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum ug eros.
Ang Bootstrap gitukod uban sa Preboot , usa ka open-source pack sa mga mixin ug variables nga gamiton inubanan sa Less , usa ka CSS preprocessor alang sa mas paspas ug mas sayon nga web development.
Tan-awa kung giunsa namon gigamit ang Preboot sa Bootstrap ug kung giunsa nimo magamit kini kung imong pilion nga modagan ang Dili kaayo sa imong sunod nga proyekto.
Gamita kini nga opsyon aron hingpit nga gamiton ang Bootstrap's Less variables, mixins, ug nesting sa CSS pinaagi sa javascript sa imong browser.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "tanan" />
- <script src = "js/less-1.0.41.min.js" ></script>
Dili gibati ang .js nga solusyon? Sulayi ang Less Mac app o gamita ang Node.js sa pag-compile kung imong i-deploy ang imong code.
Ania ang pipila sa mga highlight sa kung unsa ang gilakip sa Twitter Bootstrap isip bahin sa Bootstrap. Lakaw ngadto sa Bootstrap website o Github project page aron ma-download ug makakat-on pa.
Ang mga variable sa Less perpekto alang sa pagpadayon ug pag-update sa imong CSS nga wala’y labad sa ulo. Kung gusto nimo nga usbon ang usa ka kantidad sa kolor o usa ka kanunay nga gigamit nga kantidad, i-update kini sa usa ka lugar ug nabutang ka na.
- // Mga link
- @linkColor : #8b59c2;
- @linkColorHover : mongitngit ( @linkColor , 10 );
- // Mga Gray
- @itom : #000;
- @grayDark : pagpagaan ( @itom , 25 %);
- @gray : pagpagaan ( @itom , 50 %);
- @grayLight : pagpagaan ( @black , 70 %);
- @grayLighter : pagpagaan ( @itom , 90 %);
- @puti : #fff;
- // Mga Kolor sa Accent
- @asul : #08b5fb;
- @berde : #46a546;
- @pula : #9d261d;
- @yellow : #ffc40d;
- @orange : #f89406;
- @pink : #c3325f;
- @purpura : #7a43b6;
- // Baseline
- @baseline : 20px ;
Ang dili kaayo naghatag usab ug lain nga istilo sa pagkomento dugang sa normal nga /* ... */
syntax sa CSS.
- // Kini usa ka komento
- /* Kini usa usab ka komento */
Ang mga mixin kasagaran naglakip o mga partial alang sa CSS, nga nagtugot kanimo sa paghiusa sa usa ka block sa code ngadto sa usa. Maayo kini alang sa mga prefix nga kabtangan sa vendor sama sa box-shadow
, cross-browser gradients, font stack, ug uban pa. Sa ubos usa ka sample sa mga mixin nga gilakip sa Bootstrap.
- #font {
- . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- gidak-on sa font : @ gidak- on ;
- font - gibug-aton : @timbang ;
- linya - gitas-on : @lineHeight ;
- }
- . sans - serif ( @gibug -aton : normal , @gidak-on : 14px , @lineHeight : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- gidak-on sa font : @ gidak- on ;
- font - gibug-aton : @timbang ;
- linya - gitas-on : @lineHeight ;
- }
- . serif ( @gibug -aton : normal , @gidak-on : 14px , @lineHeight : 20px ) {
- font - family : "Georgia" , Times New Roman , Times , sans - serif ;
- gidak-on sa font : @ gidak- on ;
- font - gibug-aton : @timbang ;
- linya - gitas-on : @lineHeight ;
- }
- .monospace ( @bug -at : normal , @gidak-on : 12px , @lineHeight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- gidak-on sa font : @ gidak- on ;
- font - gibug-aton : @timbang ;
- linya - gitas-on : @lineHeight ;
- }
- }
- #gradient {
- . pinahigda ( @startColor : #555, @endColor: #333) {
- background - kolor : @endColor ;
- background - repeat : repeat - x ;
- background - hulagway : - khtml - gradient ( linear , left top , right top , gikan sa ( @startColor ), ngadto sa ( @endColor )); // Konqueror
- background - hulagway : - moz - linear - gradient ( wala , @startColor , @endColor ); // FF 3.6+
- background - hulagway : - ms - linear - gradient ( wala , @startColor , @endColor ); // IE10
- background - hulagway : - webkit - gradient ( linear , left top , right top , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - hulagway : - webkit - linear - gradient ( wala , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - hulagway : - o - linear - gradient ( wala , @startColor , @endColor ); // Opera 11.10
- - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- pagsala : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 ug IE7
- background - hulagway : linear - gradient ( wala , @startColor , @endColor ); // Ang standard
- }
- . bertikal ( @startColor : #555, @endColor: #333) {
- background - kolor : @endColor ;
- background- repeat : repeat - x ;
- background - hulagway : - khtml - gradient ( linear , left top , left bottom , gikan sa ( @startColor ), ngadto sa ( @endColor )); // Konqueror
- background - hulagway : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- background - hulagway : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- background - hulagway : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - hulagway : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - hulagway : - 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 ug IE7
- background - hulagway : linear - gradient ( @startColor , @endColor ); // Ang sumbanan
- }
- . direksyon ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . bertikal - tulo - kolor ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
Pagmagarbohon ug paghimo og pipila ka matematika aron makamugna og flexible ug gamhanan nga mga mixin sama sa ubos.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // Sistema sa Grid
- . sudlanan {
- gilapdon : @siteWidth ;
- margin : 0 awto ;
- . tin-aw nga pag-ayo ();
- }
- . mga kolum ( @columnSpan : 1 ) {
- display : inline ;
- lutaw : wala ;
- gilapdon : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- margin - wala : @gridGutterWidth ;
- &: unang - anak {
- margin - wala : 0 ;
- }
- }
- . offset ( @columnOffset : 1 ) {
- margin - wala : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! importante ;
- }