boppe

links

rjochts

ûnder

Hotlink de CSS

Kopiearje dit snippet gewoan nei jo webside foar de rapste en maklikste start.

Brûk it mei Minder

In fan fan it brûken fan Minder? Gjin probleem, kloon gewoan de repo en foegje dizze rigels ta:

Fork op GitHub

Download, fork, pull, triemproblemen, en mear mei de offisjele Bootstrap-repo op Github.

Bootstrap op GitHub »

Op it stuit v1.3.0

Skiednis

Yngenieurs by Twitter hawwe histoarysk hast elke bibleteek brûkt dy't se bekend wiene om te foldwaan oan front-end easken. Bootstrap begon as in antwurd op 'e útdagings dy't presintearre. Mei help fan in protte bjusterbaarlike minsken is Bootstrap signifikant groeid.

Lês mear op dev.twitter.com ›

Browser stipe

Bootstrap wurdt hifke en stipe yn grutte moderne browsers lykas Chrome, Safari, Internet Explorer, en Firefox.

Teste en stipe yn Chrome, Safari, Internet Explorer en Firefox

Lêste Safari
Lêste Google Chrome
Firefox 4+
Internet Explorer 7+
Opera 11

Wat is ynbegrepen

Bootstrap komt kompleet mei kompilearre CSS, net kompilearre, en foarbyldsjabloanen.

Javascript plugins
Alle orizjinele .less triemmen
Folslein kompilearre en minifisearre CSS
Folsleine styleguide dokumintaasje
Trije foarbyldsiden mei ferskillende opmaak

Quick-start foarbylden

Wat flugge sjabloanen nedich? Besjoch dizze basisfoarbylden dy't wy gearstald hawwe:

Standert grid

It standert rastersysteem levere as ûnderdiel fan Bootstrap is in 940px breed 16-kolom raster. It is in smaak fan it populêre 960-rastersysteem, mar sûnder de ekstra marzje / padding oan 'e linker- en rjochterkant.

Foarbyld grid markup

Lykas hjir te sjen is, kin in basisyndieling makke wurde mei twa "kolommen", elk oer in oantal fan 'e 16 fûnemintele kolommen dy't wy definieare as diel fan ús rastersysteem. Sjoch de foarbylden hjirûnder foar mear fariaasjes.

<div class = "rige" > 
  <div class = "span6" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

1/3

2/3

Offset kolommen

8 sjo 4

1/3 offset 2/3s

4 sjo 4

5 fers3

10 offset 6

Nesting kolommen

Nest jo ynhâld as jo moatte troch it meitsjen fan in .rowbinnen in besteande kolom.

Foarbyld fan nestele kolommen

Nivo 1 fan kolom

Nivo 2

<div class = "rige" > 
  <div class = "span12" > 
    Nivo 1 fan kolom
    <div class = "rige" > 
      <div class = "span6" > 
        Nivo 2
      </div>
      <div class = "span6" > 
        Nivo 2
      </div>
    </div>
  </div>
</div>

Rôlje jo eigen raster

Ynboud yn Bootstrap binne in hantsjefol fariabelen foar it oanpassen fan it standert 940px rastersysteem. Mei in bytsje oanpassing kinne jo de grutte fan kolommen, har geaten, en de kontener wêryn se wenje, oanpasse.

Binnen it raster

De fariabelen dy't nedich binne om it rastersysteem te feroarjen, wenje op it stuit allegear yn variables.less.

Fariabel	Standertwearde	Beskriuwing
`@gridColumns`	16	It oantal kolommen binnen it raster
`@gridColumnWidth`	40px	De breedte fan elke kolom binnen it raster
`@gridGutterWidth`	20px	De negative romte tusken elke kolom
`@siteWidth`	Berekkene som fan alle kolommen en goten	Wy brûke wat basiswedstriid om it oantal kolommen en gutters te tellen en de breedte fan 'e `.fixed-container()`mixin yn te stellen.

No om oan te passen

It wizigjen fan it raster betsjut it feroarjen fan de trije @grid-*fariabelen en it opnij kompilearjen fan de Minder bestannen.

Bootstrap komt útrist om in rastersysteem te behanneljen mei maksimaal 24 kolommen; de standert is gewoan 16. Hjir is hoe't jo rasterfariabelen sille sjen oanpast oan in 24-kolom raster.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;

Ienris opnij kompilearre, sille jo ynsteld wurde!

Fêste yndieling

De standert en ienfâldige 940px-brede, sintraal yndieling foar sawat elke webside of side levere troch ien <div.container>.

<body>
  <div class = "container" > 
    ...
  </div>
</body>

Fluid yndieling

In alternative, fleksibele floeibere sidestruktuer mei min- en max-breedtes en in sydbalke oan de linkerkant. Geweldich foar apps en dokuminten.

<body>
  <div class = "container-fluid" > 
    <div class = "sidebar" > 
      ...
    </div>
    <div class = "ynhâld" > 
      ...
    </div>
  </div>
</body>

Kopteksten & kopy

In standert typografyske hierargy foar it strukturearjen fan jo websiden.

De hiele typografyske raster is basearre op twa Minder fariabelen yn ús variables.less triem: @basefonten @baseline. De earste is de basislettertypegrutte dy't troch it heule brûkt wurdt en de twadde is de basislinehichte.

Wy brûke dy fariabelen, en wat wiskunde, om de marzjes, paddings, en line-hichtes fan al ús type en mear te meitsjen.

h1. Koptekst 1

h2. Koptekst 2

h3. Opskrift 3

h4. Opskrift 4

h5. Opskrift 5

h6. Opskrift 6

Foarbyld paragraaf

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.

Foarbyld heading Hat sub-heading...

Misc. eleminten

Mei klam, adressen en ôfkoartings

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

Wannear te brûken

De klam tags ( <strong>en <em>) moatte brûkt wurde om ekstra belang of klam oan te jaan fan in wurd of frase relatyf oan de omlizzende kopy. Brûk <strong>foar belang en <em>foar stress klam.

De klam yn in paragraaf

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, in pharetra augue.

Opmerking: it is noch altyd goed om <b>en <i>tags te brûken yn HTML5 en se hoege respektivelik net fet en kursyf te wurden (alhoewol't d'r in mear semantysk elemint is, brûk it dan). <b>is bedoeld om wurden of útdrukkingen te markearjen sûnder ekstra belang oer te bringen, wylst <i>it meast foar stim, technyske termen, ensfh.

Adressen

It <address>elemint wurdt brûkt foar kontaktynformaasje foar syn neiste foarâlden, as it hiele lichem fan wurk. Hjir binne twa foarbylden fan hoe't it kin wurde brûkt:

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

Folsleine namme
[email protected]

Opmerking: Elke rigel yn in <address>moat einigje mei in line-break ( <br />) of wurde ferpakt yn in tag op bloknivo (bgl. <p>) om de ynhâld goed te strukturearjen.

Ofkoartings

Foar ôfkoartings en akronyms, brûk de <abbr>tag ( <acronym>is ôfret yn HTML5 ). Set it koartskriuwformulier yn 'e tag en set in titel yn foar de folsleine namme.

Blockquotes

<blockquote> <p> <small>

Hoe sitearje

Om in blokquote op te nimmen, wikkel <blockquote>om <p>en <small>tags. Brûk it <small>elemint om jo boarne te neamen en jo krije —dêrfoar in em-streepje.

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

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat in ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

Listen

Net oardere`<ul>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem by massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- 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 by massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Besteld`<ol>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem by massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Beskriuwing`dl`

Beskriuwingslisten: In beskriuwingslist is perfekt foar it definiearjen fan termen.
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.

Koade

<code> <pre>

Pimp jo koade yn styl mei twa ienfâldige tags. Foar noch mear awesomeness fia javascript, drop yn Google's koade prettify-bibleteek en jo binne ynsteld.

Presintearje koade

Koade, blokken fan of gewoan snippets ynline, kinne wurde werjûn mei styl gewoan troch de juste tag yn te wikkeljen. <pre>Brûk it elemint foar blokken fan koade dy't meardere rigels oerspant. Foar inline koade, brûk it <code>elemint.

Elemint Resultaat

<code> Yn in rigel fan tekst lykas dizze sil jo ynpakt koade der útsjen as dit <html>elemint.

Elemint	Resultaat
`<code>`	Yn in rigel fan tekst lykas dizze sil jo ynpakt koade der útsjen as dit `<html>`elemint.
`<pre>`	<div> <h1>Heading</h1> <p>Hjir krekt wat...</p> </div> Opmerking: Wês wis dat jo koade binnen `<pre>`tags sa ticht mooglik by de lofter hâlde; it sil alle ljeppers werjaan.
`<pre class="prettyprint">`	Mei de google-code-prettify-bibleteek krije jo koadeblokken in wat oare fisuele styl en automatyske syntaksismarkearring. <div> <h1> Koptekst </h1> <p> Hjir wat krekt... </p> </div> Download google-code-prettify en besjoch de readme foar hoe te brûken.

<pre>

<div>
  <h1>Heading</h1>
  <p>Hjir krekt wat...</p>
</div>

Opmerking: Wês wis dat jo koade binnen <pre>tags sa ticht mooglik by de lofter hâlde; it sil alle ljeppers werjaan.

<pre class="prettyprint">

Mei de google-code-prettify-bibleteek krije jo koadeblokken in wat oare fisuele styl en automatyske syntaksismarkearring.

<div> <h1> Koptekst </h1> <p> Hjir wat krekt... </p> </div>

Download google-code-prettify en besjoch de readme foar hoe te brûken.

Inline labels

<span class="label">

Rop omtinken foar of markearje elke frase yn jo lichemstekst.

Label alles

Ea nedich ien fan dy fancy New! of Wichtige flaggen by it skriuwen fan koade? No, no hawwe jo se. Hjir is wat standert opnommen is:

Etiket	Resultaat
`<span class="label">Default</span>`	Standert
`<span class="label success">New</span>`	Nij
`<span class="label warning">Warning</span>`	Warskôging
`<span class="label important">Important</span>`	Belangryk
`<span class="label notice">Notice</span>`	Notysje

Media grid

Toan thumbnails fan ferskate grutte op siden mei in lege HTML-fuotprint en minimale stilen.

Foarbyld thumbnails

Miniatueren yn 'e .media-gridkin elke grutte wêze, mar se wurkje it bêste as se direkt yn kaart brocht wurde nei it ynboude Bootstrap-rastersysteem. Ofbyldingsbreedtes lykas 90, 210 en 330 kombinearje mei in pear piksels fan padding om de .span2, .span4, en .span6kolomgrutte te lykjen.

Grut

Medium

Lyts

Kodearje se

Mediarasters binne maklik te brûken en frij ienfâldich oan 'e markupkant. Harren ôfmjittings binne suver basearre op de grutte fan 'e ôfbyldings opnommen.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Bouwe tabellen

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

Tafels binne geweldich - foar in protte dingen. Geweldige tabellen hawwe lykwols in bytsje markupleafde nedich om nuttich, skalberber en lêsber te wêzen (op koadenivo). Hjir binne in pear tips om te helpen.

Wrap jo kolomkoppen altyd yn <thead>sa'n hiërargy is <thead>>> <tr>.<th>

Fergelykber mei de kolomkoppen, moat de hiele lichemynhâld fan jo tabel wurde ferpakt yn in <tbody>sadat jo hiërargy <tbody>>> is <tr>.<td>

Foarbyld: Standert tabelstilen

Alle tabellen wurde automatysk stilearre mei allinich de essensjele grinzen om lêsberens te garandearjen en struktuer te behâlden. Gjin needsaak om ekstra klassen of attributen ta te foegjen.

#	Foarnamme	Achternamme	Taal
1	Guon	Ien	Ingelsk
2	Joe	Sixpack	Ingelsk
3	Stu	Dent	Koade

<tabel>
  ...
</tabel>

Foarbyld: Condensed table

Foar tabellen dy't fereaskje mear gegevens yn strakkere romten, brûk de gecondenseerde smaak dy't snijt padding yn de helte. It kin ek brûkt wurde yn kombinaasje mei grinzen en sebra-stripen, krekt as de standert tabelstilen.

#	Foarnamme	Achternamme	Taal
1	Guon	Ien	Ingelsk
2	Joe	Sixpack	Ingelsk
3	Stu	Dent	Koade

Foarbyld: Bordered tabel

Lit jo tafels mar in bytsje slanker útsjen troch har hoeken te rûnen en rânen oan alle kanten ta te foegjen.

#	Foarnamme	Achternamme	Taal
1	Guon	Ien	Ingelsk
2	Joe	Sixpack	Ingelsk
3	Stu	Dent	Koade

<table class = "bordered-table" > 
  ...
</tabel>

Foarbyld: Zebra-striped

Krij in bytsje fancy mei jo tafels troch sebra-striping ta te foegjen - foegje gewoan de .zebra-stripedklasse ta.

#	Foarnamme	Achternamme	Taal
1	Guon	Ien	Ingelsk
2	Joe	Sixpack	Ingelsk
3	Stu	Dent	Koade
span 4 kolommen
span 2 kolommen		span 2 kolommen

Opmerking: Zebra-striping is in progressive ferbettering dy't net beskikber is foar âldere browsers lykas IE8 en hjirûnder.

<table class = "sebra-striped" > 
  ...
</tabel>

Foarbyld: Zebra-striped w / TableSorter.js

Troch it foarige foarbyld te nimmen, ferbetterje wy it nut fan ús tabellen troch sortearjen fan funksjonaliteit fia jQuery en de Tablesorter- plugin. Klikje op de koptekst fan elke kolom om de sortearring te feroarjen.

#	Foarnamme	Achternamme	Taal
2	Joe	Sixpack	Ingelsk
3	Stu	Dent	Koade
1	Dyn	Ien	Ingelsk

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<skript > 
  $ ( funksje () { 
    $ ( "tabel#sortTabelfoarbyld" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</skript>
<table class = "sebra-striped" > 
  ...
</tabel>

Fêste topbalke

Wat is it

Us topbalke is in fêste balke dy't it logo of namme fan in webside, primêre navigaasje, en sykformulier befettet.

Oanpasber

Alle eleminten binnen, en de heule topbalke ek, binne opsjoneel. Jo kinne kieze om in logo/namme, navigaasje, sykjen en in sekundêre navigaasje op te nimmen - of elke kombinaasje dêrfan.

Dropdowns ynbegrepen

As ûnderdiel fan 'e haadnavigaasje hawwe wy de mooglikheid opnommen foar jo om dropdowns ta te foegjen oan jo navigaasje. Besjoch de sekundêre nav hjirboppe (rjochts ôfstimd) om te sjen hoe't it dien is. Dropdown li-tags stypje ek .activefoar it werjaan fan aktuele sideseleksje.

Opmerking: As jo de boppebalke op elke side brûke, wês dan wis dat jo rekken hâlde mei de oerlap dy't it feroarsaket troch ta te foegjen padding-top: 40px;oan jo body.

Tabs en pillen

Meitsje ienfâldige sekundêre navigaasje mei in <ul>. Ruilje tusken ljeppers of pillen troch de passende klasse ta te foegjen.

Geweldich foar sub-seksjes fan ynhâld lykas ús akkountynstellingssiden en brûkerstiidlinen om te wikseljen tusken siden mei like ynhâld. Beskikber yn ljeppers of pilstilen.

Foarbyld fan Basic tabs

Ljepblêden kinne brûkt wurde as gewoane navigaasje (it laden fan eksterne siden yn deselde ljepper) of as ljepperbere ynhâldgebieten foar it wikseljen fan panielen fan ynhâld. Wy hawwe in ljepperplugin dat kin wurde brûkt om de lêste te yntegrearjen.

<ul class = "tabs" > 
  <li class = "aktyf" ><a href = "#" > Thús </a></li>  
  <li><a href = "#" > Profyl </a></li> 
  <li><a href = "#" > Berjochten </a></li> 
  <li><a href = "#"> Ynstellings </a> </li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Foarbyld fan Basic pills

<ul class = "pillen" > 
  <li class = "aktyf" ><a href = "#" > Thús </a></li>  
  <li><a href = "#" > Profyl </a></li> 
  <li><a href = "#" > Berjochten </a></li> 
  <li><a href = "#"> Ynstellings </a> </li> 
  <li><a href = "#" > Kontakt </a></li> 
</ul>

Broodkruimels

Breadcrumb-navigaasje wurdt brûkt as in manier om brûkers sjen te litten wêr't se binne binnen in app of in side, mar net foar primêre navigaasje.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Thús </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Middelste side </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Noch ien </a> <span class = "divider" > / </span></li>   
  <li class = "aktyf" > Jo binne hjir </li> 
</ul>

Paginaasje

Ultra-simplistysk en minimaal stylige paginaasje ynspireare troch Rdio. It grutte blok is min te missen, maklik skalberber en leveret grutte klikgebieten.

<div class = "pagina's" > 
  <ul>
    <li class = "foarige útskeakele" > <a href = "#"> ← Foarige </a></li>  
    <li class = "aktyf" ><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 = "folgjende" > <a href = "#"> Folgjende → </a></li>  
  </ul>
</div>

Basis warskôgings

.alert-message

Ien-line berjochten foar it markearjen fan it mislearjen, mooglik mislearjen of sukses fan in aksje. Benammen nuttich foar foarmen.

Krij it javaskript »

Hillige guacamole! Best kontrolearje jo sels, jo sjogge net te goed .

Oh snap! Feroarje dit en dat en besykje it nochris .

Goed dien! Jo hawwe dit warskôgingsberjocht mei súkses lêzen .

Heads up! Dit is in warskôging dy't jo oandacht nedich hat, mar it is noch net in enoarme prioriteit .

Foarbyld koade

<div class = "alert-berjocht warskôging" > 
  <a class = "slute" href = "#"> × </a> _  
  <p><strong> Hillige guacamole! </strong> Best kontrolearje jo sels, jo sjogge net te goed. </p>
</div>

Blokkearje berjochten

.alert-message.block-message

Foar berjochten dy't in bytsje útlis nedich binne, hawwe wy warskôgings foar paragraafstyl. Dizze binne perfekt om langere flaterberjochten op te blazen, in brûker te warskôgjen foar in aksje dy't yn behanneling is, of gewoan ynformaasje te presintearjen foar mear klam op 'e side.

Krij it javaskript »

Hillige guacamole! Dit is in warskôging! Best kontrolearje jo sels, jo sjogge net te goed. Nulla vitae elit libero, in pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Nim dizze aksje Of doch dit

Oh snap! Jo hawwe in flater! Feroarje dit en dat en besykje it nochris .

Duis mollis est non commodo luctus
Nisi erat porttitor ligula
Eget lacinia odio sem nec elit

Nim dizze aksje Of doch dit

Goed dien! Jo hawwe dit warskôgingsberjocht mei súkses lêzen. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

Nim dizze aksje Of doch dit

Heads up! Dit is in warskôging dy't jo oandacht nedich hat, mar it is noch net in enoarme prioriteit.

Nim dizze aksje Of doch dit

Foarbyld koade

<div class = "warskôging-berjocht block-berjocht warskôging" > 
  <a class = "slute" href = "#"> × </a> _  
  <p><strong> Hillige guacamole! Dit is in warskôging! </strong> Best kontrolearje jo sels, jo sjogge net te goed. Nulla vitae elit libero, in pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "alert-aksjes" > 
    <a class = "btn small" href = "#" > Nim dizze aksje </a> <a class = "btn small" href = "#" > Of doch dit </a>     
  </div>
</div>

Modals

Modalen - dialogen as ljochtboxen - binne geweldich foar kontekstuele aksjes yn situaasjes wêr't it wichtich is dat de eftergrûnkontekst behâlden wurdt.

Krij it javaskript »

Tooltips

Twipsies binne super nuttich om in betize brûker te helpen en se yn 'e goede rjochting te wizen.

Krij it javaskript »

Lorem ipsum dolar sit amet illo flater ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut 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 quae

Popovers

Brûk popovers om subtekstuele ynformaasje oan in side te jaan sûnder de yndieling te beynfloedzjen.

Krij it javaskript »

Begjinne

It yntegrearjen fan javascript mei de Bootstrap-bibleteek is super maklik. Hjirûnder geane wy oer de basis en jouwe jo wat bjusterbaarlike plugins om jo te begjinnen!

Besjoch javascript-dokuminten »

Wat is ynbegrepen

Bring guon fan Bootstrap's primêre komponinten ta libben mei nije oanpaste plugins dy't wurkje mei jQuery en Ender . Wy moedigje jo oan om se út te wreidzjen en te feroarjen om te passen by jo spesifike ûntwikkelingsbehoeften.

Map	Beskriuwing
bootstrap-modal.js	Us Modal plugin is in super slanke take op de tradisjonele modal js plugin! Wy namen spesjale soarch om allinich de bleate funksjonaliteit op te nimmen dy't wy op twitter fereaskje.
bootstrap-alerts.js	De warskôgingsplugin is in super lytse klasse foar it tafoegjen fan nauwe funksjonaliteit oan warskôgings.
bootstrap-dropdown.js	Dizze plugin is foar it tafoegjen fan dropdown-ynteraksje oan 'e bootstrap-topbalke of ljeppernavigaasjes.
bootstrap-scrollspy.js	De ScrollSpy-plugin is foar it tafoegjen fan in nav foar automatysk bywurkjen basearre op rôlposysje oan 'e bootstrap-topbalke.
bootstrap-buttons.js	De ScrollSpy-plugin is foar it tafoegjen fan in nav foar automatysk bywurkjen basearre op rôlposysje oan 'e bootstrap-topbalke.
bootstrap-tabs.js	Dizze plugin foeget rappe, dynamyske ljepper- en pilfunksjonaliteit ta foar it fytsen troch lokale ynhâld.
bootstrap-twipsy.js	Op grûn fan de treflike jQuery.tipsy plugin skreaun troch Jason Frame; twipsy is in bywurke ferzje, dy't net fertrout op ôfbyldings, brûkt css3 foar animaasjes, en data-attributen foar lokale titel opslach!
bootstrap-popover.js	De popover-plugin biedt in ienfâldige interface foar it tafoegjen fan popovers oan jo applikaasje. It wreidet de boostrap-twipsy.js- plugin út, dus wês der wis fan dat jo dat bestân ek pakke as jo popovers yn jo projekt opnimme!

Is javascript nedich?

Nee! Bootstrap is earst en foaral ûntworpen om in CSS-bibleteek te wêzen. Dit javaskript leveret in basis ynteraktive laach boppe op 'e opnommen stilen.

Foar dyjingen dy't wol javascript nedich hawwe, hawwe wy de boppesteande plugins levere om jo te helpen te begripen hoe't jo Bootstrap kinne yntegrearje mei javascript en om jo direkt in flugge, lichtgewicht opsje te jaan foar de basisfunksjonaliteit.

Foar mear ynformaasje en om wat live demo's te sjen, ferwize asjebleaft nei ús plugin dokumintaasje side .

Bootstrap waard boud fan Preboot , in iepen-boarne-pakket fan mixins en fariabelen om te brûken yn gearhing mei Less , in CSS preprocessor foar flugger en makliker webûntwikkeling.

Besjoch hoe't wy Preboot yn Bootstrap brûkten en hoe't jo der gebrûk fan kinne meitsje as jo kieze om Minder út te fieren op jo folgjende projekt.

Hoe te brûken

Brûk dizze opsje om folslein gebrûk te meitsjen fan Bootstrap's Minder fariabelen, mixins en nesting yn CSS fia javascript yn jo blêder.

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

Net fiele de .js oplossing? Besykje de Minder Mac-app of brûk Node.js om te kompilearjen as jo jo koade ynsette.

Wat is ynbegrepen

Hjir binne guon fan 'e hichtepunten fan wat is opnommen yn Twitter Bootstrap as ûnderdiel fan Bootstrap. Gean nei de Bootstrap-webside of Github-projektside om te downloaden en mear te learen.

Fariabelen

Fariabelen yn Minder binne perfekt foar it ûnderhâlden en bywurkjen fan jo CSS-hoofdpijnfrij. As jo in kleurwearde of in faak brûkte wearde wolle feroarje, aktualisearje it dan op ien plak en jo binne ynsteld.

// Keppelings
@linkColor : #8b59c2;         
@linkColorHover :     darken ( @linkColor , 10 ); 
 
// Griis
@swart : #000;             
@grayDark :           ljochtsje ( @swart , 25 %); 
@griis : ljochter (               @swart , 50 %); 
@grayLight :          ljochtsje ( @swart , 70 %); 
@grayLighter : ljochter (        @black , 90 %); 
@wyt : #fff ;             
 
// Accent Colors
@blau : #08b5fb;              
@grien : #46a546;             
@red : #9d261d;               
@giel : #ffc40d;            
@oranje : #f89406;            
@roze : #c3325f;              
@purple : #7a43b6;            
 
// Baseline grid
@basefont : 13px ;          
@baseline : 18px ;

Kommentaar

Minder leveret ek in oare styl fan kommentaar neist de normale /* ... */syntaksis fan CSS.

// Dit is in reaksje
/* Dit is ek in reaksje */

Mixins de wazoo

Mixins binne yn prinsipe omfettet as dieltsjes foar CSS, wêrtroch jo in blok koade yn ien kinne kombinearje. Se binne geweldich foar eigenskippen mei foarôfgeande ferkeaper lykas box-shadow, cross-browser gradients, lettertypestapels, en mear. Hjirûnder is in stekproef fan 'e mixins dy't binne opnommen mei Bootstrap.

Lettertype stapels

#lettertype {
  . shorthand ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    lettertype - grutte : @grutte ; 
    lettertype - gewicht : @gewicht ; 
    line - hichte : @lineHeight ; 
  }
  . sans - serif ( @gewicht : normaal , @grutte : 14px , @lineHeight : 20px ) {     
    font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
    lettertype - grutte : @grutte ; 
    lettertype - gewicht : @gewicht ; 
    line - hichte : @lineHeight ; 
  }
  ...
}

Gradienten

#gradient {
  ...
  . vertical ( @startColor : #555, @endColor: #333) { 
    eftergrûn - kleur : @endColor ; 
    eftergrûn - werhelje : werhelje - x ;
    eftergrûn - ôfbylding : - khtml - gradient ( lineêr , lofts boppe , lofts ûnder , fan ( @startColor ), nei ( @endColor )); // Konqueror   
    eftergrûn - ôfbylding : - moz - lineêr - gradient ( @startColor , @endColor ); // FF 3.6+   
    eftergrûn - ôfbylding : - ms - lineêre - gradient ( @startColor , @endColor ); // IE10   
    eftergrûn - ôfbylding : - webkit - gradient ( lineêr , lofts boppe , lofts ûnder , kleur - stop ( 0 %, @startColor ), kleur - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    eftergrûn - ôfbylding : - webkit - lineêre - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
    eftergrûn - ôfbylding : - o - lineêre - gradient ( @startColor , @endColor ); // Opera 11.10   
    eftergrûn - ôfbylding : linear - gradient ( @startColor , @endColor ); // De standert  
  }
  ...
}

Operations

Wês fancy en fier wat wiskunde út om fleksibele en krêftige mixins te generearjen lykas de hjirûnder.

// Grindiude
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// Meitsje inkele kolommen
. kolommen ( @columnSpan : 1 ) {  
  width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}

Minder kompilearje

Nei it wizigjen fan de .lesstriemmen yn /lib/, moatte jo se opnij kompilearje om de bootstrap-*.*.*.css- en bootstrap-*.*.*.min.css-bestannen opnij te meitsjen. As jo in pull-fersyk yntsjinje by GitHub, moatte jo altyd opnij kompilearje.

Manieren om te kompilearjen

Metoade	Stappen
Node mei makefile	Ynstallearje de minder kommandorigelkompiler mei npm troch it folgjende kommando út te fieren: $ npm ynstallearje lessc Ienris ynstalleare, rinne gewoan `make`fan 'e root fan jo bootstrap-map en jo binne allegear ynsteld. Derneist, as jo watchr ynstalleare hawwe, kinne jo rinne `make watch`om bootstrap automatysk opnij te meitsjen elke kear as jo in bestân yn 'e bootstrap lib bewurkje (dit is net fereaske, gewoan in gemaksmetoade).
Javascript	Download de lêste Less.js en befetsje it paad dernei (en Bootstrap) yn 'e `head`. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script> Om de .less-bestannen opnij te kompilearjen, bewarje se gewoan en laden jo side opnij. Less.js kompilearret se en bewarret se yn lokale opslach.
Kommandorigel	As jo it minder kommandorigel-ark ynstalleare hawwe, kinne jo gewoan it folgjende kommando útfiere: $ lessc ./lib/bootstrap.less > bootstrap.css Wês wis dat `--compress`jo dit kommando opnimme as jo besykje wat bytes te bewarjen!
Minder Mac-app	De net-offisjele Mac-app besjocht mappen fan .less-bestannen en kompilearret de koade nei lokale bestannen nei elke opslach fan in besjoen .less-bestân. As jo wolle, kinne jo foarkar yn 'e app wikselje foar automatysk minifysjen en yn hokker map de kompilearre bestannen einigje.

Hotlink de CSS

Brûk it mei Minder

Fork op GitHub

Oer Bootstrap Koarte skiednis, browserstipe, en mear

Skiednis

Browser stipe

Wat is ynbegrepen

Quick-start foarbylden

Grid systeem Rock de standert 940px of rôlje jo eigen

Standert grid

Foarbyld grid markup

Offset kolommen

Nesting kolommen

Foarbyld fan nestele kolommen

Rôlje jo eigen raster

Binnen it raster

No om oan te passen

Layouts Basissjabloanen om websiden te meitsjen

Fêste yndieling

Fluid yndieling

Typografy Headings, paragrafen, listen, en oare ynline type eleminten

Kopteksten & kopy

h1. Koptekst 1

h2. Koptekst 2

h3. Opskrift 3

h4. Opskrift 4

h5. Opskrift 5

h6. Opskrift 6

Foarbyld paragraaf

Foarbyld heading Hat sub-heading...

Misc. eleminten

Wannear te brûken

De klam yn in paragraaf

Adressen

Ofkoartings

Blockquotes

Hoe sitearje

Listen

Net oardere<ul>

Unstyled<ul.unstyled>

Besteld<ol>

Beskriuwingdl

Koade

Presintearje koade

Inline labels

Label alles

Media werjaan fan ôfbyldings en fideo's

Media grid

Foarbyld thumbnails

Grut

Medium

Lyts

Kodearje se

Tabellen Foar, do hast it al, tabelgegevens

Bouwe tabellen

Foarbyld: Standert tabelstilen

Foarbyld: Condensed table

Foarbyld: Bordered tabel

Foarbyld: Zebra-striped

Foarbyld: Zebra-striped w / TableSorter.js

Formulieren

Standert stilen

Opsteapele foarmen

Form fjild maten

Knoppen

Foarbyld knoppen

Alternatyf maten

Utskeakele steat

Links

Knoppen

Navigaasje

Fêste topbalke

Projekt Namme

Wat is it

Oanpasber

Dropdowns ynbegrepen

Tabs en pillen

Foarbyld fan Basic tabs

Foarbyld fan Basic pills

Broodkruimels

Net oardere`<ul>`

Unstyled`<ul.unstyled>`

Besteld`<ol>`

Beskriuwing`dl`