Histori

Matsatsing a pejana a Twitter, baenjiniere ba ne ba sebelisa laebrari efe kapa efe eo ba e tloaetseng ho fihlela litlhoko tsa pele. Bootstrap e qalile e le karabo ea liqholotso tse hlahisitsoeng le nts'etsopele e potlakileng nakong ea Hackweek ea pele ea Twitter.

Ka thuso le maikutlo a baenjiniere ba bangata ba Twitter, Bootstrap e holile haholo ho kenyelletsa eseng feela mekhoa ea mantlha, empa le mekhoa e metle le e tšoarellang ea meralo e ka pele.

Bala haholoanyane ho dev.twitter.com ›

Tšehetso ea sebatli

Bootstrap e lekoa le ho tšehetsoa ho libatli tse kholo tsa sejoale-joale joalo ka Chrome, Safari, Internet Explorer le Firefox.

• Safari ea morao-rao
• Google Chrome ea morao-rao
• Firefox 4+
• Internet Explorer 7+

Se kenyellelitsoeng

Bootstrap e tla e phethehile ka CSS e hlophisitsoeng, e sa kopanngoang, le litempele tsa mohlala.

• Lifaele tsohle tsa mantlha tsa .less
• CSS e hlophisitsoeng ka botlalo le e ntlafalitsoeng
• Litokomane tse felletseng tsa styleguide
• Mohlala oa leqephe la template (tse ling li tla tla haufinyane)

Gridi ea kamehla

Sistimi ea grid ea kamehla e fanoeng e le karolo ea Bootstrap ke marang-rang a 940px a bophara ba likholomo tse 16. Ke tatso ea sistimi e tsebahalang ea grid ea 960, empa ntle le marang-rang / padding ka lehlakoreng le letšehali le le letona.

Mohlala oa marang-rang

Joalokaha ho bontšitsoe mona, moralo oa motheo o ka etsoa ka "likholomo" tse peli, e 'ngoe le e' ngoe e nka palo ea litšiea tse 16 tseo re li hlalositseng e le karolo ea tsamaiso ea rona ea marang-rang. Sheba mehlala e ka tlase bakeng sa mefuta e meng e fapaneng.

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

Sebopeho se tsitsitseng

Sebopeho sa mantlha sa 940px se pharaletseng, se bohareng bakeng sa sebaka kapa leqephe lefe kapa lefe.

<'mele>
  <div class = "setshelo" > 
    ...
  </ div>
</ mmele>

Sebopeho sa mokelikeli

Mokelikeli o feto-fetohang kapa sebopeho sa leqephe la metsi le nang le min- le max-widths le lehlakore le letšehali. E ntle bakeng sa lisebelisoa.

<'mele>
  <div class = "setshelo-mokelikeli" > 
    <div class = "sidebar" > 
      ...
    </ div>
    <div class = "dikahare" > 
      ...
    </ div>
  </ div>
</ mmele>

Lihlooho le kopi

Tsamaiso e tloaelehileng ea typographic bakeng sa ho hlophisa maqephe a hau a tepo.

h1. Sehlooho sa 1

h2. Sehlooho sa 2

h3. Sehlooho sa 3

h4. Sehlooho sa 4

h5. Sehlooho sa 5

h6. Sehlooho sa 6

Serapa sa mohlala

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.

Sehloho sa mohlala Se na le sehloohoana...

Tse ling likarolo

Ho sebelisoa khatiso, liaterese le khutsufatso

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

Nako ea ho sebelisoa

Li-tag tsa khatiso ( <strong>le <em>) li lokela ho sebelisoa ho bontša bohlokoa bo eketsehileng kapa khatiso ea lentsoe kapa poleloana e amanang le kopi e potolohileng eona. Sebelisa <strong>bakeng sa bohlokoa le <em>bakeng sa ho hatisa khatello .

Ho hatisoa serapeng

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.

Tlhokomeliso: Ho ntse ho lokile ho sebelisa <b>le <i>li-tag ho HTML5, empa ha li sa tla le mekhoa ea tlhaho. <b>e reretsoe ho totobatsa mantsoe kapa lipoleloana ntle le ho fana ka bohlokoa bo eketsehileng, athe <i>hangata e le ea lentsoe, mantsoe a theknoloji, joalo-joalo.

Liaterese

The <address>element e sebelisetsoa tlhahisoleseling bakeng sa moholo-holo oa eona ea haufi, kapa sehlopha sohle sa mosebetsi. Mona ke kamoo e shebahalang kateng:

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

Tlhokomeliso: Mola o mong le o mong o <address>tlameha ho qetella ka ho khaoha ( <br />) kapa o phuthetsoe ka lebokose la "block-level" (mohlala, <p>) ho hlophisa litaba hantle.

Likgutsufatso

Bakeng sa khutsufatso le li-acronyms, sebelisa <abbr>tag ( <acronym>e tlositsoe ho HTML5 ). Kenya foromo e khuts'oane ka har'a tag ebe u beha sehlooho sa lebitso le felletseng.

Mantsoe a thibelang

<blockquote> <p> <small>

Mokhoa oa ho qotsa

Ho kenyelletsa blockquote, thatela <blockquote>hohle <p>le <small>li-tag. Sebelisa <small>element ho qotsa mohloli oa hau mme o tla fumana lebelo la em —pele ho lona.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante venenatis dapibus posuere velit aliquet.

Ngaka Julius Hibbert

Ha ea laeloa<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem le massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Likokoana-hloko tsa Purus sodales
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

Unstyled<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem le massa
• Facilisis in pretium nisl aliquet
• Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Likokoana-hloko tsa Purus sodales
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
• Faucibus porta lacus fringilla vel
• Aenean sit amet erat nunc
• Eget porttitor lorem

E laetsoe<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem le massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Tlhalosodl

Manane a tlhaloso

Lethathamo la litlhaloso le nepahetse bakeng sa ho hlalosa mantsoe.

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.

Ho aha litafole

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

Litafole li ntle - bakeng sa lintho tse ngata. Litafole tse kholo, leha ho le joalo, li hloka lerato la "markup" hore le be molemo, le fokotsehe, 'me le balehe (boemong ba khoutu). Litlhahiso tse 'maloa tse ka u thusang ke tsena.

Ka linako tsohle phuthela lihlooho tsa kholomo ea hau ka tsela <thead>eo bolaoli bo leng teng <thead>> <tr>> <th>.

Joalo ka lihlooho tsa kholomo, litaba tsohle tsa 'mele oa tafole ea hau li lokela ho koaheloa ka hore sehlopha sa <tbody>hau sa maemo ke <tbody>> <tr>> <td>.

Mohlala: Mekhoa ea litafole ea kamehla

Litafole tsohle li tla etsoa ka mokhoa oa boiketsetso ka meeli ea bohlokoa feela ho netefatsa hore li balehe le ho boloka sebopeho. Ha ho hlokahale ho eketsa litlelase kapa litšobotsi tse ling.

#	Lebitso la pele	Fane	Puo
1	Ba bang	E 'ngoe	Senyesemane
2	Joe	Sixpack	Senyesemane
3	Stu	Sebono	Khoutu

< sehlopha sa tafole = "tafole e tloaelehileng" > 
  ...
</tafole>

Mohlala: Qoaha e metsero

Fumana monate ka litafole tsa hau ka ho eketsa liqoaha-tsenya .zebra-stripedsehlopha.

#	Lebitso la pele	Fane	Puo
1	Ba bang	E 'ngoe	Senyesemane
2	Joe	Sixpack	Senyesemane
3	Stu	Sebono	Khoutu

Tlhokomeliso: Zebra-striping ke ntlafatso e tsoelang pele ha e fumanehe bakeng sa libatli tsa khale joalo ka IE8 le ka tlase.

< sehlopha sa tafole = "tse tloaelehileng-tafole liqoaha tse mebala-bala" > 
...
</tafole>

Mohlala: Zebra-striped w/ TableSorter.js

Ho nka mohlala o fetileng, re ntlafatsa molemo oa litafole tsa rona ka ho fana ka ts'ebetso ea ho hlophisa ka jQuery le plugin ea Tablesorter . Tobetsa sehlooho sa kholomo efe kapa efe ho fetola mofuta.

#	Lebitso la pele	Fane	Puo
1	Hao	E 'ngoe	Senyesemane
2	Joe	Sixpack	Senyesemane
3	Stu	Sebono	Khoutu

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<script > 
  $ ( mosebetsi () { 
    $ ( "tafole#sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
< sehlopha sa tafole = "tse tloaelehileng-tafole liqoaha tse mebala-bala" > 
  ...
</tafole>

Mekhoa ea kamehla

Liforomo tsohle li fuoa mekhoa e sa lekanyetsoang ho li hlahisa ka mokhoa o balehang le o ka qhekellang. Litaele li fanoe bakeng sa ho kenya mongolo, ho khetha manane, libaka tsa mongolo, likonopo tsa seea-le-moea le li-checkbox, le likonopo.

Tšōmo ea sebopeho sa mohlala

Kenyeletso ea X-E kholo

Khetha

1 2 3 4 5

Khetha

1 2 3 4 5

Kenyo e sa Fetoheng

Boleng bo itseng Mona

Kenyelletso e Tiisitsoeng

Kenyeletso ea X-E kholo

Sekhechana se senyane sa mongolo oa thuso

Tšōmo ea sebopeho sa mohlala

Mongolo o Reriloeng Pele

@

Lebokose la ho Hlahloba le Hlophisitsoeng

Lebokose la ho hlahloba le kentsoeng

Kenyo ea Faele

Tšōmo ea sebopeho sa mohlala

Lethathamo la Likhetho

• Khetho ea pele ke ena le eane-etsa bonnete ba hore o kenyelletsa hore na hobaneng e le ntle
• Khetho ea bobeli e ka hlahlojoa le ho kenyelletsoa liphethong tsa foromo
• Khetho ea boraro e ka—e, u e hakanyelitse—hape e ka hlahlojoa le ho kenyelletsoa liphethong tsa foromo
• Khetho ea bone e ke ke ea hlahlojoa kaha e koetsoe.

Tlhokomeliso: Li-labels li pota-potile likhetho tsohle bakeng sa libaka tse kholoanyane tsa ho tobetsa le foromo e sebetsang haholoanyane.

Letsatsi Range

ho Linako tsohle li hlahisoa e le Nako e Tloaelehileng ea Pacific (GMT -08:00).

Textarea

Sengoloa sa thuso se hlalosang karolo e kaholimo ha ho hlokahala.

Lethathamo la Likhetho

• Khetho ea pele ke ena le eane-etsa bonnete ba hore o kenyelletsa hore na hobaneng e le ntle
• Khetho ea bobeli e ka hlahlojoa le ho kenyelletsoa liphethong tsa foromo

Boloka Liphetoho  Hlakola

Liforomo tse pakiloeng

Eketsa .form-stackedho HTML ea foromo ea hau 'me u tla ba le li-label ka holim'a masimo a bona ho e-na le ho le letšehali. Sena se sebetsa hantle haeba liforomo tsa hau li le khuts'oane kapa u na le mela e 'meli ea litlatsetso bakeng sa liforomo tse boima.

Tšōmo ea sebopeho sa mohlala

Kenyeletso ea X-E kholo

Khetha

1 2 3 4 5

Tšōmo ea sebopeho sa mohlala

Kenyeletso ea X-E kholo

Sekhechana se senyane sa mongolo oa thuso

Lethathamo la Likhetho

• Khetho ea pele ke ena le eane-etsa bonnete ba hore o kenyelletsa hore na hobaneng e le ntle
• Khetho ea bobeli e ka hlahlojoa le ho kenyelletsoa liphethong tsa foromo

Tlhokomeliso: Li-labels li pota-potile likhetho tsohle bakeng sa libaka tse kholoanyane tsa ho tobetsa le foromo e sebetsang haholoanyane.

Boloka Liphetoho  Hlakola

Likonopo

Joalo ka kopano, likonopo li sebelisetsoa liketso ha lihokelo li sebelisetsoa lintho. Mohlala, "Khoasolla" e ka ba konopo mme "ts'ebetso ea morao-rao" e ka ba sehokelo.

Likonopo tsohle li ikamahanya le setaele se boputsoa bo bobebe, empa mofuta o moputsoa .primaryoa fumaneha. Ho feta moo, ho roala setaele sa hau ho bonolo.

Likonopo tsa mohlala

Mefuta ea likonopo e ka sebelisoa ho eng kapa eng e .btnsebelisitsoeng. Ka tloaelo u tla batla ho sebelisa tsena ho feela <a>, <button>, le ho khetha <input>likarolo. Mona ke kamoo e shebahalang kateng:

Mefuta e fapaneng

U batla likonopo tse kholoanyane kapa tse nyane? E etse joalo!

Boemo ba bokooa

Bakeng sa likonopo tse sa sebetseng kapa tse koetsoeng ke sesebelisoa ka mabaka a mang, sebelisa boemo ba batho ba holofetseng. Ke tsa .disabledlihokelo le :disabledtsa <button>likarolo.

Lihokelo

Likonopo

Ke eng

Topbar ea rona ke bar e tsitsitseng e bolokang logo kapa lebitso la sebaka sa Marang-rang, navigation ea mantlha, le foromo ea ho batla.

Customizable

Likarolo tsohle tse ka hare, le topbar kaofela, ke boikhethelo. U ka khetha ho kenyelletsa logo/lebitso, nav, search, le nav ea bobeli-kapa motsoako ofe kapa ofe oa seo.

Li-dropdown li kenyelelitsoe

Joalo ka karolo ea mantlha ea ho sesa, re kenyelelitse bokhoni ba hore u kenye litheolelo ho nav ea hau. Sheba nav ea bobeli ka holimo (e eme ka ho le letona) ho bona hore na e etsoa joang.

Li-tab le lipilisi

Etsa mokhoa o bonolo oa ho tsamaea oa bobeli ka <ul>. Fetola pakeng tsa li-tab kapa lipilisi ka ho eketsa sehlopha se nepahetseng.

E nepahetse bakeng sa likaroloana tsa litaba tse kang maqephe a litlhophiso tsa ak'haonte le linako tsa basebelisi bakeng sa ho fetola maqephe a litaba tse tšoanang. E fumaneha ka mefuta ea li-tabbed kapa lipilisi.

• Lehae
• Profile
• Melaetsa
• Litlhophiso
• Ikopanye

<ul class = "tabs" > 
  <li class = "active" ><a href = "#"> Lehae </a></li >  
  <li><a href = "#"> Boemo </a> </li> 
  <li><a href = "#"> Melaetsa </a> </li> 
  <li><a href = "#"> Litlhophiso </a> </li> 
  <li><a href = "#"> Ikopanye </a> </li> 
</ul>

• Lehae
• Profile
• Melaetsa
• Litlhophiso
• Ikopanye

<ul sehlopha = "lipilisi" > 
  <li class = "active" ><a href = "#"> Lehae </a></li >  
  <li><a href = "#"> Boemo </a> </li> 
  <li><a href = "#"> Melaetsa </a> </li> 
  <li><a href = "#"> Litlhophiso </a> </li> 
  <li><a href = "#"> Ikopanye </a> </li> 
</ul>

Pagination

Mokhoa o bonolo le o sa reng letho oa pagination o khothalelitsoeng ke Rdio. Sebaka se seholo se thata ho fosa, se ka senyeha habonolo, 'me se fana ka libaka tse kholo tsa ho tobetsa.

<div class = "pagination" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← E fetileng </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="#">Next &rarr;</a></li>
  </ul>
</div>

Basic alerts

One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.

Block messages

For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.

Modals

Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.

Tool Tips

Twipsies are super useful for aiding a confused user and pointing them in the right direction.

Popovers

Use popovers to provide subtextual information to a page without affecting layout.

Bootstrap was built with Preboot, an open-source pack of mixins and variables to be used in conjunction with Less, a CSS preprocessor for faster and easier web development.

Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.

How to use it

Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.

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

Not feeling the .js solution? Try the Less Mac app or use Node.js to compile when you deploy your code.

What’s included

Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.

Color variables

Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.

// Links
@linkColor:         #8b59c2;
@linkColorHover:    darken(@linkColor, 10);
 
// Grays
@black:             #000;
@grayDark:          lighten(@black, 25%);
@gray:              lighten(@black, 50%);
@grayLight:         lighten(@black, 70%);
@grayLighter:       lighten(@black, 90%);
@white:             #fff;
 
// Accent Colors
@blue:              #08b5fb;
@green:             #46a546;
@red:               #9d261d;
@yellow:            #ffc40d;
@orange:            #f89406;
@pink:              #c3325f;
@purple:            #7a43b6;
 
// Baseline
@baseline:          20px;

Commenting

Less also provides another style of commenting in addition to CSS’s normal /* ... */ syntax.

// This is a comment
/* This is also a comment */

Mixins up the wazoo

Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.

Font stacks

#font {
  .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
    font-family: "Georgia", Times New Roman, Times, sans-serif;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
  .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
    font-family: "Monaco", Courier New, monospace;
    font-size: @size;
    font-weight: @weight;
    line-height: @lineHeight;
  }
}

Gradients

#gradient {
  .horizontal (@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
    background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
    -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); // IE8+
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE6 & IE7
    background-image: linear-gradient(left, @startColor, @endColor); // Le standard
  }
  .vertical (@startColor: #555, @endColor: #333) {
    background-color: @endColor;
    background-repeat: repeat-x;
    background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
    background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
    background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
    background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
    background-image: -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 & IE7
    background-image: linear-gradient(@startColor, @endColor); // The standard
  }
  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
    ...
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
    ...
  }
}

Operations and grid system

Get fancy and perform some math to generate flexible and powerful mixins like the one below.

// Griditude
@gridColumns:       16;
@gridColumnWidth:   40px;
@gridGutterWidth:   20px;
 
// Grid System
.container {
  width: @siteWidth;
  margin: 0 auto;
  .clearfix();
}
.columns(@columnSpan: 1) {
  display: inline;
  float: left;
  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
  margin-left: @gridGutterWidth;
  &:first-child {
    margin-left: 0;
  }
}
.offset(@columnOffset: 1) {
  margin - ka ho le letšehali : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! bohlokoa ;          
}