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.

Skiednis

Yn 'e eardere dagen fan Twitter brûkten yngenieurs hast elke bibleteek wêrmei't se bekend wiene om te foldwaan oan front-end easken. Bootstrap begon as in antwurd op 'e útdagings dy't presintearre en ûntwikkeling rap fersnelle tidens de earste Hackweek fan Twitter.

Mei de help en feedback fan in protte yngenieurs by Twitter, is Bootstrap signifikant groeid om net allinich basisstilen te omfetsje, mar mear elegante en duorsume front-end-ûntwerppatroanen.

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.

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

Wat is ynbegrepen

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

Alle orizjinele .less triemmen
Folslein kompilearre en minifisearre CSS
Folsleine styleguide dokumintaasje
Foarbyld fan sidesjabloan (mear komt gau)

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="row"> class = "rige" >
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 kolommen" > 
    ...
  </div>
</div>

Offset kolommen

8 sjo 4

4 sjo 4

5 fers3

10 offset 6

Fêste yndieling

In basis 940px breed, sintraal konteneryndieling foar sawat elke side of side.

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

Fluid yndieling

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

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

Kopteksten en kopy

In standert typografyske hierargy foar it strukturearjen fan jo websiden.

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, mar se komme net mear mei ynherinte stilen. <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 is hoe't it derút sjocht:

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

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

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.

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

<table class="common-table"> class = "mienskiplike tabel" >
  ...
</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

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

<table class="common-table sebra-striped"> class = "gewoane tafel 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
1	Dyn	Ien	Ingelsk
2	Joe	Sixpack	Ingelsk
3	Stu	Dent	Koade

<script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
<skript > 
  $ ( funksje () { 
    $ ( "tabel#sortTabelfoarbyld" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</skript>
<table class = "gewoane tafel 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.

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.

<ul class="tabs"> 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>

<ul class="pillen"> 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>

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="pagination"> class = "paginaasje" >
  <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

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

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

Holy gaucamole! Best kontrolearje jo sels, jo sjogge net te goed.

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.

Blokkearje berjochten

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.

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. Cras mattis consectetur purus sit amet fermentum.

Nim dizze aksje Of doch dit

Holy gaucamole! 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

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

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.

Tool Tips

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

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

ûnder!

rjochts!

links!

boppe!

Popovers

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

Bootstrap waard boud mei Preboot , in iepen-boarne-pakket fan mixins en fariabelen om te brûken yn kombinaasje 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="all" /> rel = "stylesheet/less" href = "less/bootstrap.less" media = "alles" />   
<script src = "js/less-1.0.41.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.

Kleur 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;            
// Basisline
@baseline : 20px ;

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 ; 
  }
  . serif ( @gewicht : normaal , @grutte : 14px , @lineHeight : 20px ) {     
    font - family : "Georgia" , Times New Roman , Times , sans - serif ;     
    lettertype - grutte : @grutte ; 
    lettertype - gewicht : @gewicht ; 
    line - hichte : @lineHeight ; 
  }
  . monospace ( @gewicht : normaal , @grutte : 12px , @lineHeight : 20px ) {     
    font - family : "Monaco" , Courier New , monospace ;   
    lettertype - grutte : @grutte ; 
    lettertype - gewicht : @gewicht ; 
    line - hichte : @lineHeight ; 
  }
}

Gradienten

#gradient {
  . horizontal ( @startColor : #555, @endColor: #333) { 
    eftergrûn - kleur : @endColor ; 
    eftergrûn - werhelje : werhelje - x ;
    eftergrûn - ôfbylding : - khtml - gradient ( lineêr , lofts boppe , rjochts boppe , fan ( @startColor ), nei ( @endColor )); // Konqueror   
    eftergrûn - ôfbylding : - moz - lineêr - gradient ( lofts , @startColor , @endColor ); // FF 3.6+    
    eftergrûn - ôfbylding : - ms - lineêre - gradient ( lofts , @startColor , @endColor ); // IE10    
    eftergrûn - ôfbylding : - webkit - gradient ( lineêr , lofts boppe , rjochts boppe , kleur - stop ( 0 %, @startColor ), kleur - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
    eftergrûn - ôfbylding : - webkit - lineêr - gradient ( lofts , @startColor , @endColor ); // Safari 5.1+, Chrome 10+    
    eftergrûn - ôfbylding : -o - linear - gradient ( lofts , @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 
    eftergrûn - ôfbylding : linear - gradient ( lofts , @startColor , @endColor ); // Le standert   
  }
  . 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   
    - 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 
    eftergrûn - ôfbylding : linear - gradient ( @startColor , @endColor ); // De standert  
  }
  . directional ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . fertikaal - trije - kleuren ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

Operaasje en grid systeem

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 ;   
// Grid System
. kontener {
  width : @siteWidth ; 
  marzje : 0 auto ;  
  . clearfix ();
}
. kolommen ( @columnSpan : 1 ) {  
  display : ynline ; 
  float : lofts ;
  width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  marzje - lofts : @gridGutterWidth ; 
  &: earste - bern {
    marzje - lofts : 0 ; 
  }
}
. offset ( @columnOffset : 1 ) {  
  marzje - lofts : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! wichtich ;          
}

Bootstrap

Bootstrap, fan Twitter

Hotlink de CSS

Brûk it mei Minder

Fork op GitHub

Oer Bootstrap Koarte skiednis, browserstipe, en mear

Skiednis

Browser stipe

Wat is ynbegrepen

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

Standert grid

Foarbyld grid markup

Offset kolommen

Layouts Basissjabloanen om websiden te meitsjen

Fêste yndieling

Fluid yndieling

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

Kopteksten en 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

Tabellen Foar, do hast it al, tabelgegevens

Bouwe tabellen

Foarbyld: Standert tabelstilen

Foarbyld: Zebra-striped

Foarbyld: Zebra-striped w / TableSorter.js

Formulieren

Standert stilen

Opsteapele foarmen

Knoppen

Foarbyld knoppen

Alternatyf maten

Utskeakele steat

Links

Knoppen

Navigaasje

Fêste topbalke

Projekt Namme

Wat is it

Oanpasber

Dropdowns ynbegrepen

Tabs en pillen

Paginaasje

Alerts en flaters Styles foar súkses, warskôging, en flater berjochten as warskôgings

Basis warskôgings

Blokkearje berjochten

Popovers- komponinten foar it werjaan fan ynhâld yn modalen, tooltips en popovers

Modals

Modale Heading

Tool Tips

Popovers

Popover titel

Mei help fan Bootstrap mei minder Supercharge jo CSS mei fariabelen, mixins en funksjes

Hoe te brûken

Wat is ynbegrepen

Kleur fariabelen

Kommentaar

Mixins de wazoo

Lettertype stapels

Gradienten

Operaasje en grid systeem

Net oardere`<ul>`

Unstyled`<ul.unstyled>`

Besteld`<ol>`

Beskriuwing`dl`