Saga

Á fyrri dögum Twitter notuðu verkfræðingar nánast hvaða bókasafn sem þeir þekktu til að uppfylla kröfur um framhlið. Bootstrap byrjaði sem svar við áskorunum sem komu fram og þróun hraðaði hratt á fyrstu Hackweek Twitter.

Með hjálp og endurgjöf margra verkfræðinga hjá Twitter hefur Bootstrap vaxið verulega og nær ekki aðeins yfir grunnstíla, heldur glæsilegri og endingargóðari hönnunarmynstur að framan.

Lestu meira á dev.twitter.com ›

Stuðningur við vafra

Bootstrap er prófað og stutt í helstu nútímavöfrum eins og Chrome, Safari, Internet Explorer og Firefox.

• Nýjasta Safari
• Nýjasta Google Chrome
• Firefox 4+
• Internet Explorer 7+
• Ópera 11

Hvað er innifalið

Bootstrap kemur heill með samansettum CSS, ósamsettum og dæmigerðum sniðmátum.

• Allar upprunalegar .less skrár
• Alveg samansett og minnkað CSS
• Heill stílleiðbeiningarskjöl
• Dæmi um síðusniðmát (meira að koma fljótlega)

Sjálfgefið rist

Sjálfgefið netkerfi sem er hluti af Bootstrap er 940px breitt 16 dálka rist. Það er bragð af hinu vinsæla 960 ristkerfi, en án viðbótar spássíu/fyllingar á vinstri og hægri hlið.

Dæmi um álagningu hnitanets

Eins og sýnt er hér er hægt að búa til grunnútlit með tveimur „dálkum“, sem hver spannar fjölda af þeim 16 grunndálkum sem við skilgreindum sem hluta af netkerfi okkar. Sjá dæmin hér að neðan fyrir fleiri afbrigði.

<div class = "röð" > 
  <div class = "span6 dálkar" > 
    ...
  </div>
  <div class = "span10 dálkar" > 
    ...
  </div>
</div>

Fast skipulag

Sjálfgefið og einfalt 940px-breitt, miðja skipulag fyrir nánast hvaða vefsíðu eða síðu sem er frá einni <div.container>.

<líkami>
  <div class = "gámur" > 
    ...
  </div>
</body>

Vökvaskipulag

Önnur, sveigjanleg fljótandi síðuuppbygging með lágmarks- og hámarksbreiddum og vinstri hliðarstiku. Frábært fyrir forrit og skjöl.

<líkami>
  <div class = "ílát-vökvi" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "content" > 
      ...
    </div>
  </div>
</body>

Fyrirsagnir & afrit

Staðlað leturfræðistigveldi til að skipuleggja vefsíðurnar þínar.

Allt leturfræðinetið er byggt á tveimur Less breytum í preboot.less skránni okkar: @basefontog @baseline. Sú fyrri er grunnleturstærðin sem notuð er í gegn og sú seinni er grunnlínuhæðin.

Við notum þessar breytur, og smá stærðfræði, til að búa til spássíur, fyllingar og línuhæðir allra okkar tegunda og fleira.

h1. Fyrirsögn 1

h2. Fyrirsögn 2

h3. Fyrirsögn 3

h4. Fyrirsögn 4

h5. Fyrirsögn 5

h6. Fyrirsögn 6

Dæmi málsgrein

Nullam quis risus eget urna mollis ornare vel eu leo. Þegar þú ert samfélagslegur og stórkostlegur í fæðingu, verður þú að hlakka til. Nullam id dolor id nibh ultricies vehicula ut id elit.

Dæmifyrirsögn Hefur undirfyrirsögn...

Ýmislegt. þættir

Notaðu áherslur, heimilisföng og skammstafanir

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

Hvenær á að nota

Áherslumerki ( <strong>og <em>) ætti að nota til að gefa til kynna frekari mikilvægi eða áherslu orðs eða orðasambands miðað við afrit þess í kring. Notaðu <strong>fyrir mikilvægi og <em>fyrir streituáherslu .

Áherslur í málsgrein

Fusce dapibus , tellus ac cursus commodo , Tortor mauris condimentum nibh , út fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.

Athugið: Það er samt í lagi að nota <b>og <i>merki í HTML5 og þau þurfa ekki að vera feitletruð og skáletruð í sömu röð (þó notaðu það ef það er merkingarlegra þáttur). <b>er ætlað að varpa ljósi á orð eða orðasambönd án þess að koma til með að auka mikilvægi, en <i>er aðallega fyrir rödd, tæknileg hugtök osfrv.

Heimilisföng

Einingin <address>er notuð fyrir tengiliðaupplýsingar fyrir næsta forföður hans, eða allt verkið. Svona lítur það út:

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

Athugið: Hver lína í línu <address>verður að enda með línuskilum ( <br />) eða vera vafin inn í blokkarmerki (td <p>) til að skipuleggja innihaldið á réttan hátt.

Skammstafanir

Fyrir skammstafanir og skammstafanir, notaðu <abbr>merkið ( <acronym>er úrelt í HTML5 ). Settu styttu eyðublaðið í merkinu og settu titil fyrir allt nafnið.

Blockquotes

<blockquote> <p> <small>

Hvernig á að vitna

Til að innihalda tilvitnun skaltu vefja <blockquote>um <p>og <small>merkja. Notaðu <small>þáttinn til að vitna í uppruna þinn og þú munt fá em strik á —undan honum.

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

Dr. Julius Hibbert

Óraðað<ul>

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

Óstíll<ul.unstyled>

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

Pantaði<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Heiltala molestie lorem at 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

Lýsingdl

Lýsingarlistar

Lýsingarlisti er fullkominn til að skilgreina hugtök.

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.

Byggja borð

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

Borð eru frábær - fyrir margt. Frábærar töflur þurfa hins vegar smá merkingarást til að vera gagnlegar, skalanlegar og læsilegar (á kóðastigi). Hér eru nokkur ráð til að hjálpa.

Settu alltaf dálkahausana <thead>þannig að stigveldið sé <thead>> <tr>> <th>.

Svipað og dálkahausarnir, ætti allt meginefni töflunnar að vera pakkað inn í <tbody>svo stigveldið þitt sé <tbody>> <tr>> <td>.

Dæmi: Sjálfgefin töflustíll

Allar töflur verða sjálfkrafa stílaðar með aðeins nauðsynlegum ramma til að tryggja læsileika og viðhalda uppbyggingu. Engin þörf á að bæta við auka flokkum eða eiginleikum.

#	Fyrsta nafn	Eftirnafn	Tungumál
1	Sumir	Einn	Enska
2	Jói	Kippa	Enska
3	Stu	Dent	Kóði

<borð>
  ...
</table>

Dæmi: Zebra-röndótt

Vertu smá flottur með borðin þín með því að bæta við sebra-röndum - bættu bara við .zebra-stripedbekknum.

#	Fyrsta nafn	Eftirnafn	Tungumál
1	Sumir	Einn	Enska
2	Jói	Kippa	Enska
3	Stu	Dent	Kóði

Athugið: Zebra-striping er framsækin aukahlutur sem ekki er í boði fyrir eldri vafra eins og IE8 og neðar.

<table class = "zebra-röndóttur" > 
...
</table>

Dæmi: Zebra-röndótt m/ TableSorter.js

Með því að taka fyrra dæmið bætum við notagildi borðanna okkar með því að bjóða upp á flokkunarvirkni í gegnum jQuery og Tablesorter viðbótina. Smelltu á haus hvaða dálks sem er til að breyta röðun.

#	Fyrsta nafn	Eftirnafn	Tungumál
1	Þinn	Einn	Enska
2	Jói	Kippa	Enska
3	Stu	Dent	Kóði

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<handrit > 
  $ ( fall () { 
    $ ( "tafla#flokkaTaflaDæmi" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<table class = "zebra-röndóttur" > 
  ...
</table>

Sjálfgefin stíll

Öll eyðublöð fá sjálfgefna stíla til að setja þau fram á læsilegan og skalanlegan hátt. Stílar eru til staðar fyrir textainnslátt, vallista, textasvæði, valhnappa og gátreiti og hnappa.

Dæmi um form þjóðsaga

X-Large inntak

Veldu

1 2 3 4 5

Veldu

1 2 3 4 5

Óbreytanlegt inntak

Eitthvað gildi hér

Óvirkt inntak

X-Large inntak

Lítið brot af hjálpartexta

Dæmi um form þjóðsaga

Áfram texti

@

Áfram gátreitur

Meðfylgjandi gátreitur

Skrá inntak

Dæmi um form þjóðsaga

Listi yfir valkosti

• Valkostur eitt er þetta og hitt - vertu viss um að láta fylgja með hvers vegna það er frábært
• Einnig er hægt að haka við valmöguleika tvö og vera með í eyðublaðsniðurstöðum
• Valkostur þrjú er líka hægt að athuga - já, þú giskaðir á það - og vera með í eyðublaðsniðurstöðum
• Ekki er hægt að haka við valkosti fjögur þar sem hann er óvirkur.

Athugið: Merkingar umlykja alla valkosti fyrir miklu stærri smellisvæði og nothæfara form.

Dagsetningarbil

til Allir tímar eru sýndir sem Pacific Standard Time (GMT -08:00).

Textasvæði

Blokk með hjálpartexta til að lýsa reitnum hér að ofan ef þörf krefur.

Listi yfir valkosti

• Valkostur eitt er þetta og hitt - vertu viss um að láta fylgja með hvers vegna það er frábært
• Valkostur tvö dós er eitthvað annað og ef hann velur mun valkostur 1 afvelja

  Hætta við

Staflað form

Bættu .form-stackedvið HTML eyðublaðsins þíns og þú munt hafa merki ofan á reitunum þeirra í stað þess að vera til vinstri. Þetta virkar frábærlega ef eyðublöðin þín eru stutt eða þú ert með tvo dálka af inntak fyrir þyngri eyðublöð.

Dæmi um form þjóðsaga

X-Large inntak

Veldu

1 2 3 4 5

Dæmi um form þjóðsaga

X-Large inntak

Lítið brot af hjálpartexta

Listi yfir valkosti

• Valkostur eitt er þetta og hitt - vertu viss um að láta fylgja með hvers vegna það er frábært
• Einnig er hægt að haka við valmöguleika tvö og vera með í eyðublaðsniðurstöðum

Athugið: Merkingar umlykja alla valkosti fyrir miklu stærri smellisvæði og nothæfara form.

Vista breytingar  Hætta við

Hnappar

Sem venja eru hnappar notaðir fyrir aðgerðir á meðan tenglar eru notaðir fyrir hluti. Til dæmis gæti "Hlaða niður" verið hnappur og "nýleg virkni" gæti verið hlekkur.

Allir hnappar hafa sjálfgefið ljósgráa stíl, en hægt er að nota fjölda hagnýtra flokka fyrir mismunandi litastíla. Þessir flokkar innihalda bláan .primaryflokk, ljósbláan .infoflokk, grænan .successflokk og rauðan .dangerflokk. Auk þess er auðvelt að rúlla eigin stílum.

Dæmi um hnappa

Hægt er að nota hnappastíla á hvað sem er með .btnbeittum. Venjulega viltu nota þetta aðeins á <a>, <button>, og valda <input>þætti. Svona lítur það út:

Aðrar stærðir

Langar þig í stærri eða minni hnappa? Hafið það!

Óvirkt ástand

Notaðu óvirka stöðuna fyrir hnappa sem eru ekki virkir eða eru óvirkir af appinu af einni eða annarri ástæðu. Það er .disabledfyrir tengla og :disabledfyrir <button>þætti.

Tenglar

Hnappar

Hvað er það

Toppstikan okkar er fastur stika sem hýsir lógó eða nafn vefsíðu, aðalleiðsögn og leitarform.

Sérhannaðar

Allir þættir innan, og öll toppstikan líka, eru valfrjálsir. Þú getur valið að innihalda lógó/nafn, nav, leit og aukanav—eða einhverja samsetningu af því.

Fellilistar innifalinn

Sem hluti af aðalleiðsögninni höfum við innifalið möguleikann fyrir þig til að bæta fellivalmyndum við siglingakerfið þitt. Skoðaðu aukanav að ofan (hægrijafnað) til að sjá hvernig það er gert.

Tabs og pillur

Búðu til einfalda aukaleiðsögn með <ul>. Skiptu á milli flipa eða pilla með því að bæta við viðeigandi flokki.

Frábært fyrir undirkafla efnis eins og reikningsstillingasíður okkar og tímalínur notenda til að skipta á milli síðna með svipað efni. Fáanlegt í flipa eða pillum stíl.

• Heim
• Prófíll
• Skilaboð
• Stillingar
• Hafðu samband
• Fellilisti
  • Aukatengill
  • Eitthvað annað hérna
  • Annar linkur

<ul class = "flipar" > 
  <li class = "active" ><a href = "#" > Heim </a></li>  
  <li><a href = "#" > Prófíll </a></li> 
  <li><a href = "#" > Skilaboð </a></li> 
  <li><a href = "#" > Stillingar </a></li> 
  <li><a href = "#" > Tengiliður </a></li> 
</ul>

• Heim
• Prófíll
• Skilaboð
• Stillingar
• Hafðu samband

<ul class = "pillur" > 
  <li class = "active" ><a href = "#" > Heim </a></li>  
  <li><a href = "#" > Prófíll </a></li> 
  <li><a href = "#" > Skilaboð </a></li> 
  <li><a href = "#" > Stillingar </a></li> 
  <li><a href = "#" > Tengiliður </a></li> 
</ul>

Síðuskipting

Ofur einfölduð og lítillega stíluð blaðsíðugerð innblásin af Rdio. Erfitt er að missa af stóra kubbnum, hann er auðvelt að skala og býður upp á stór smellisvæði.

<div class = "pagetion" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← Fyrri </a></li>  
    <li class = "virkur" ><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 = "#" > Næsta → </a></li>  
  </ul>
</div>

Grunnviðvaranir

div.alert-message

Skilaboð í einni línu til að undirstrika bilun, hugsanlega mistök eða árangur aðgerðar. Sérstaklega gagnlegt fyrir eyðublöð.

Block messages

div.alert-message.block-message

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.1.3.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.

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 grid
@basefont:          13px;
@baseline:          18px;

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
    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
    background-image: linear-gradient(@startColor, @endColor); // The standard
  }
  .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
    ...
  }
  .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @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;
@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
 
// Grid System
.container {
  width: @siteWidth;
  margin: 0 auto;
  .clearfix();
}
.columns(@columnSpan: 1) {
  width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
}
.offset(@columnOffset: 1) {
  margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
}