Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Ang Bootstrap ay isang toolkit mula sa Twitter na idinisenyo upang simulan ang pagbuo ng mga webapp at site.
Kabilang dito ang base CSS at HTML para sa typography, form, button, table, grids, navigation, at higit pa.
Nerd alert: Ang Bootstrap ay binuo gamit ang Less at idinisenyo upang gumana sa labas ng gate na may mga modernong browser sa isip.
Para sa pinakamabilis at pinakamadaling pagsisimula, kopyahin lang ang snippet na ito sa iyong webpage.
Isang tagahanga ng paggamit ng Mas Kaunti? Walang problema, i-clone lang ang repo at idagdag ang mga linyang ito:
I-download, tinidor, hilahin, mga isyu sa file, at higit pa gamit ang opisyal na Bootstrap repo sa Github.
Sa mga naunang araw ng Twitter, ginamit ng mga inhinyero ang halos anumang library na pamilyar sa kanila upang matugunan ang mga kinakailangan sa front-end. Nagsimula ang Bootstrap bilang sagot sa mga hamon na ipinakita at mabilis na bumilis ang pag-unlad sa unang Hackweek ng Twitter.
Sa tulong at feedback ng maraming mga inhinyero sa Twitter, ang Bootstrap ay lumago nang malaki upang sumaklaw hindi lamang sa mga pangunahing istilo, ngunit mas elegante at matibay na mga pattern ng disenyo sa harap.
Magbasa pa sa dev.twitter.com ›
Ang Bootstrap ay sinubukan at sinusuportahan sa mga pangunahing modernong browser tulad ng Chrome, Safari, Internet Explorer, at Firefox.
Kumpleto ang Bootstrap sa pinagsama-samang CSS, hindi na-compile, at mga halimbawang template.
Ang default na grid system na ibinigay bilang bahagi ng Bootstrap ay isang 940px na lapad na 16-column na grid. Isa itong lasa ng sikat na 960 grid system, ngunit walang karagdagang margin/padding sa kaliwa at kanang bahagi.
Gaya ng ipinapakita dito, maaaring gumawa ng pangunahing layout gamit ang dalawang "column," bawat isa ay sumasaklaw sa isang bilang ng 16 na pundasyong column na tinukoy namin bilang bahagi ng aming grid system. Tingnan ang mga halimbawa sa ibaba para sa higit pang mga variation.
- <div class = "row" >
- <div class = "span6 na hanay" >
- ...
- </div>
- <div class = "span10 column" >
- ...
- </div>
- </div>
Ang default at simpleng 940px-wide, nakasentro na layout para sa halos anumang website o page na ibinigay ng iisang <div.container>
.
- <katawan>
- <div class = "lalagyan" >
- ...
- </div>
- </body>
Isang alternatibo, nababaluktot na istraktura ng tuluy-tuloy na pahina na may min- at max-width at isang kaliwang sidebar. Mahusay para sa mga app at doc.
- <katawan>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "nilalaman" >
- ...
- </div>
- </div>
- </body>
Isang karaniwang typographic hierarchy para sa pagbubuo ng iyong mga webpage.
Ang buong typographic grid ay batay sa dalawang Less variable sa aming preboot.less file: @basefont
at @baseline
. Ang una ay ang base font-size na ginamit sa kabuuan at ang pangalawa ay ang base line-height.
Ginagamit namin ang mga variable na iyon, at ilang matematika, upang gawin ang mga margin, padding, at line-height ng lahat ng aming uri at higit pa.
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.
Paggamit ng diin, mga address, at mga pagdadaglat
<strong>
<em>
<address>
<abbr>
Dapat gamitin ang mga emphasis tag ( <strong>
at <em>
) upang ipahiwatig ang karagdagang kahalagahan o diin ng isang salita o parirala na nauugnay sa nakapaligid na kopya nito. Gamitin <strong>
para sa kahalagahan at <em>
para sa diin na diin.
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, a pharetra augue.
Tandaan: Okay pa rin ang paggamit <b>
at mga <i>
tag sa HTML5 at hindi kailangang i-istilong bold at italic ang mga ito, ayon sa pagkakabanggit (bagaman kung mayroong mas semantic na elemento, gamitin ito). <b>
ay nilalayong i-highlight ang mga salita o parirala nang hindi nagbibigay ng karagdagang kahalagahan, habang <i>
kadalasan ay para sa boses, teknikal na termino, atbp.
Ginagamit ang <address>
elemento para sa impormasyon sa pakikipag-ugnayan para sa pinakamalapit na ninuno nito, o ang buong katawan ng trabaho. Narito ang hitsura nito:
Tandaan: Ang bawat linya sa isang <address>
ay dapat magtapos sa isang line-break ( <br />
) o balot sa isang block-level na tag (hal., <p>
) upang maayos na buuin ang nilalaman.
Para sa mga pagdadaglat at acronym, gamitin ang <abbr>
tag ( <acronym>
ay hindi na ginagamit sa HTML5 ). Ilagay ang shorthand form sa loob ng tag at magtakda ng pamagat para sa kumpletong pangalan.
<blockquote>
<p>
<small>
Upang magsama ng blockquote, balutin at <blockquote>
mga tag. Gamitin ang elemento upang banggitin ang iyong pinagmulan at makakakuha ka ng em dash bago ito.<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>
Mahusay ang mga mesa—para sa maraming bagay. Gayunpaman, ang magagandang talahanayan ay nangangailangan ng kaunting pag-ibig sa markup upang maging kapaki-pakinabang, nasusukat, at nababasa (sa antas ng code). Narito ang ilang mga tip upang makatulong.
Palaging balutin ang iyong mga header ng column sa isang <thead>
tulad na hierarchy ay <thead>
> <tr>
> <th>
.
Katulad ng mga header ng column, ang lahat ng nilalaman ng katawan ng iyong talahanayan ay dapat na nakabalot sa isang <tbody>
upang ang iyong hierarchy ay <tbody>
> <tr>
> <td>
.
Ang lahat ng mga talahanayan ay awtomatikong i-istilo na may mga mahahalagang hangganan lamang upang matiyak ang pagiging madaling mabasa at mapanatili ang istraktura. Hindi na kailangang magdagdag ng mga karagdagang klase o katangian.
# | Pangalan | Huling pangalan | Wika |
---|---|---|---|
1 | Ang ilan | Isa | Ingles |
2 | Joe | Anim na pack | Ingles |
3 | Stu | Dent | Code |
- <talahanayan>
- ...
- </table>
Maging medyo magarbo sa iyong mga talahanayan sa pamamagitan ng pagdaragdag ng zebra-striping—idagdag lang ang .zebra-striped
klase.
# | Pangalan | Huling pangalan | Wika |
---|---|---|---|
1 | Ang ilan | Isa | Ingles |
2 | Joe | Anim na pack | Ingles |
3 | Stu | Dent | Code |
Tandaan: Ang zebra-striping ay isang progresibong pagpapahusay na hindi available para sa mga mas lumang browser tulad ng IE8 at mas mababa.
- <table class = "zebra-striped" >
- ...
- </table>
Sa pagkuha sa nakaraang halimbawa, pinapabuti namin ang pagiging kapaki-pakinabang ng aming mga talahanayan sa pamamagitan ng pagbibigay ng pag-uuri ng functionality sa pamamagitan ng jQuery at ang Tablesorter plugin. I-click ang anumang header ng column upang baguhin ang pag-uuri.
# | Pangalan | Huling pangalan | Wika |
---|---|---|---|
1 | Iyong | Isa | Ingles |
2 | Joe | Anim na pack | Ingles |
3 | Stu | Dent | Code |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( function () {
- $ ( "table#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </table>
Ang lahat ng mga form ay binibigyan ng mga default na istilo upang ipakita ang mga ito sa isang nababasa at nasusukat na paraan. Ibinibigay ang mga istilo para sa mga text input, mga piling listahan, mga textarea, mga radio button at checkbox, at mga button.
Idagdag .form-stacked
sa HTML ng iyong form at magkakaroon ka ng mga label sa ibabaw ng kanilang mga field sa halip na sa kanilang kaliwa. Mahusay itong gumagana kung maikli ang iyong mga form o mayroon kang dalawang column ng mga input para sa mas mabibigat na form.
Bilang isang convention, ang mga button ay ginagamit para sa mga aksyon habang ang mga link ay ginagamit para sa mga bagay. Halimbawa, ang "I-download" ay maaaring isang button at ang "kamakailang aktibidad" ay maaaring isang link.
Default ang lahat ng button sa isang light grey na istilo, ngunit maaaring ilapat ang ilang functional class para sa iba't ibang istilo ng kulay. Kasama sa mga klaseng ito ang isang asul .primary
na klase, isang mapusyaw na asul na .info
klase, isang berdeng .success
klase, at isang pulang .danger
klase. Dagdag pa, ang pag-roll ng iyong sariling mga estilo ay madaling peasy.
Maaaring ilapat ang mga istilo ng button sa anumang bagay na may .btn
inilapat. Karaniwang gugustuhin mong ilapat ang mga ito sa <a>
, <button>
, at mga piling <input>
elemento lamang. Narito ang hitsura nito:
Gusto mo ba ng mas malaki o mas maliit na mga pindutan? Gawin mo ito!
Para sa mga button na hindi aktibo o hindi pinagana ng app para sa isang dahilan o iba pa, gamitin ang disabled na estado. Iyon ay .disabled
para sa mga link at :disabled
para sa mga <button>
elemento.
div.alert-message
Isang linyang mensahe para sa pag-highlight ng kabiguan, posibleng pagkabigo, o tagumpay ng isang aksyon. Lalo na kapaki-pakinabang para sa mga form.
div.alert-message.block-message
Para sa mga mensaheng nangangailangan ng kaunting paliwanag, mayroon kaming mga alerto sa istilo ng talata. Ang mga ito ay perpekto para sa pagbubula ng mas mahabang mga mensahe ng error, babala sa isang gumagamit ng isang nakabinbing aksyon, o pagpapakita lamang ng impormasyon para sa higit na diin sa pahina.
Ang mga modal—mga dialog o lightbox—ay mahusay para sa mga aksyong ayon sa konteksto sa mga sitwasyon kung saan mahalagang mapanatili ang konteksto ng background.
Isang magandang katawan...
Ang Twipsies ay sobrang kapaki-pakinabang para sa pagtulong sa isang nalilitong user at pagturo sa kanila sa tamang direksyon.
Lorem ipsum dollar 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 volupremtas quasi fugit fugit
Gumamit ng mga popover upang magbigay ng subtextuwal na impormasyon sa isang pahina nang hindi naaapektuhan ang layout.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Binuo ang Bootstrap gamit ang Preboot , isang open-source pack ng mga mixin at variable na gagamitin kasabay ng Less , isang CSS preprocessor para sa mas mabilis at mas madaling pag-develop ng web.
Tingnan kung paano namin ginamit ang Preboot sa Bootstrap at kung paano mo ito magagamit kung pipiliin mong magpatakbo ng Mas kaunti sa iyong susunod na proyekto.
Gamitin ang opsyong ito upang lubos na magamit ang Mga Mas kaunting variable, mixin, at nesting ng Bootstrap sa CSS sa pamamagitan ng javascript sa iyong browser.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
Hindi nararamdaman ang .js na solusyon? Subukan ang Less Mac app o gamitin ang Node.js para mag-compile kapag na-deploy mo ang iyong code.
Narito ang ilan sa mga highlight ng kung ano ang kasama sa Twitter Bootstrap bilang bahagi ng Bootstrap. Tumungo sa website ng Bootstrap o pahina ng proyekto ng Github para mag-download at matuto pa.
Ang mga variable sa Less ay perpekto para sa pagpapanatili at pag-update ng iyong CSS na walang sakit sa ulo. Kapag gusto mong baguhin ang value ng kulay o value na madalas gamitin, i-update ito sa isang lugar at nakatakda ka na.
- // Mga link
- @linkColor : #8b59c2;
- @linkColorHover : darken ( @linkColor , 10 );
- // Mga Gray
- @black : #000;
- @grayDark : gumaan ( @black , 25 %);
- @gray : lumiwanag ( @black , 50 %);
- @grayLight : gumaan ( @black , 70 %);
- @grayLighter : gumaan ( @black , 90 %);
- @white : #fff;
- // Mga Kulay ng Accent
- @blue : #08b5fb;
- @berde : #46a546;
- @pula : #9d261d;
- @dilaw : #ffc40d;
- @orange : #f89406;
- @pink : #c3325f;
- @purple : #7a43b6;
- // Baseline grid
- @basefont : 13px ;
- @baseline : 18px ;
Nagbibigay din ang Less ng isa pang istilo ng pagkomento bilang karagdagan sa normal na /* ... */
syntax ng CSS.
- // Ito ay isang komento
- /* Comment din ito */
Ang mga mixin ay karaniwang kasama o mga partial para sa CSS, na nagbibigay-daan sa iyong pagsamahin ang isang bloke ng code sa isa. Mahusay ang mga ito para sa mga property na may prefix na vendor tulad ng box-shadow
, mga cross-browser gradient, font stack, at higit pa. Nasa ibaba ang isang sample ng mga mixin na kasama sa Bootstrap.
- #font {
- . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- laki ng font : @size ;
- font - timbang : @timbang ;
- linya - taas : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - pamilya : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- laki ng font : @size ;
- font - timbang : @timbang ;
- linya - taas : @lineHeight ;
- }
- . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - pamilya : "Georgia" , Times New Roman , Times , sans - serif ;
- laki ng font : @size ;
- font - timbang : @timbang ;
- linya - taas : @lineHeight ;
- }
- . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- laki ng font : @size ;
- font - timbang : @timbang ;
- linya - taas : @lineHeight ;
- }
- }
- #gradient {
- . pahalang ( @startColor : #555, @endColor: #333) {
- background - kulay : @endColor ;
- background - ulitin : ulitin - x ;
- background - image : - khtml - gradient ( linear , left top , right top , from ( @startColor ), to ( @endColor )); // Mananakop
- background - imahe : - moz - linear - gradient ( kaliwa , @startColor , @endColor ); // FF 3.6+
- background - imahe : - ms - linear - gradient ( kaliwa , @startColor , @endColor ); // IE10
- background - imahe : - webkit - gradient ( linear , left top , right top , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - imahe : - webkit - linear - gradient ( kaliwa , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - imahe : - o - linear - gradient ( kaliwa , @startColor , @endColor ); // Opera 11.10
- background - imahe : linear - gradient ( kaliwa , @startColor , @endColor ); // Ang pamantayan
- }
- . patayo ( @startColor : #555, @endColor: #333) {
- background - kulay : @endColor ;
- background - ulitin : ulitin - x ;
- background - image : - khtml - gradient ( linear , left top , left bottom , from ( @startColor ), to ( @endColor )); // Mananakop
- background - imahe : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- background - imahe : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- background - imahe : - webkit - gradient ( linear , left top , left bottom , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - imahe : - webkit - linear - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - larawan : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10
- background - larawan : linear - gradient ( @startColor , @endColor ); // Ang pamantayan
- }
- . direksyon ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . patayo - tatlong - kulay ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Maging magarbo at magsagawa ng ilang matematika upang makabuo ng mga flexible at makapangyarihang mixin tulad ng nasa ibaba.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Grid system
- . lalagyan {
- lapad : @siteWidth ;
- margin : 0 auto ;
- . clearfix ();
- }
- . mga hanay ( @columnSpan : 1 ) {
- lapad : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . offset ( @columnOffset : 1 ) {
- margin - kaliwa : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }