Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum by eros.
Bootstrap is 'n gereedskapstel van Twitter wat ontwerp is om die ontwikkeling van webtoepassings en werwe te begin.
Dit bevat basiese CSS en HTML vir tipografie, vorms, knoppies, tabelle, roosters, navigasie en meer.
Nerd waarskuwing: Bootstrap is gebou met Less en is ontwerp om uit die hek te werk met moderne blaaiers in gedagte.
Vir die vinnigste en maklikste begin, kopieer net hierdie brokkie na jou webblad.
'n Aanhanger van die gebruik van Minder? Geen probleem nie, kloon net die repo en voeg hierdie reëls by:
Laai af, vurk, trek, lêer kwessies, en meer met die amptelike Bootstrap-repo op Github.
In die vroeër dae van Twitter het ingenieurs byna enige biblioteek gebruik waarmee hulle vertroud was om aan die voorkantvereistes te voldoen. Bootstrap het begin as 'n antwoord op die uitdagings wat aangebied is en ontwikkeling het vinnig versnel tydens Twitter se eerste Hackweek.
Met die hulp en terugvoer van baie ingenieurs by Twitter, het Bootstrap aansienlik gegroei om nie net basiese style in te sluit nie, maar meer elegante en duursame front-end ontwerppatrone.
Lees meer op dev.twitter.com ›
Bootstrap word getoets en ondersteun in groot moderne blaaiers soos Chrome, Safari, Internet Explorer en Firefox.
Bootstrap kom kompleet met saamgestelde CSS, ongekompileerde en voorbeeldsjablone.
Die verstek roosterstelsel wat as deel van Bootstrap verskaf word, is 'n 940px wye 16-kolom rooster. Dit is 'n geur van die gewilde 960-roosterstelsel, maar sonder die bykomende marge/opvulling aan die linker- en regterkant.
Soos hier getoon, kan 'n basiese uitleg geskep word met twee "kolomme", wat elk oor 'n aantal van die 16 grondkolomme strek wat ons as deel van ons roosterstelsel gedefinieer het. Sien die voorbeelde hieronder vir meer variasies.
- <div klas = "ry" >
- <div klas = "span6 kolomme" >
- ...
- </div>
- <div klas = "span10 kolomme" >
- ...
- </div>
- </div>
Die verstek en eenvoudige 940px-wye, gesentreerde uitleg vir omtrent enige webwerf of bladsy wat deur 'n enkele <div.container>
.
- <liggaam>
- <div klas = "houer" >
- ...
- </div>
- </body>
'n Alternatiewe, buigsame vloeibare bladsystruktuur met min- en maksimum-breedtes en 'n linkerkantste sybalk. Ideaal vir toepassings en dokumente.
- <liggaam>
- <div klas = "houer-vloeistof" >
- <div class = "sidebar" >
- ...
- </div>
- <div klas = "inhoud" >
- ...
- </div>
- </div>
- </body>
'n Standaard tipografiese hiërargie vir die strukturering van jou webblaaie.
Die hele tipografiese rooster is gebaseer op twee Less veranderlikes in ons preboot.less lêer: @basefont
en @baseline
. Die eerste is die basiese lettergrootte wat deurgaans gebruik word en die tweede is die basislynhoogte.
Ons gebruik daardie veranderlikes, en 'n mate van wiskunde, om die marges, opvullings en lynhoogtes van al ons tipe en meer te skep.
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.
Gebruik klem, adresse en afkortings
<strong>
<em>
<address>
<abbr>
Klemmerkers ( <strong>
en <em>
) moet gebruik word om bykomende belangrikheid of klem van 'n woord of frase aan te dui relatief tot die omliggende kopie. Gebruik <strong>
vir belangrikheid en <em>
vir stresbeklemtoning .
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , uit fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, 'n pharetra augue.
Let wel: Dit is steeds in orde om <b>
en <i>
merkers in HTML5 te gebruik en hulle hoef nie onderskeidelik vet en kursief gestileer te word nie (hoewel as daar 'n meer semantiese element is, gebruik dit). <b>
is bedoel om woorde of frases uit te lig sonder om bykomende belangrikheid oor te dra, terwyl <i>
dit meestal vir stem, tegniese terme, ens.
Die <address>
element word gebruik vir kontakinligting vir sy naaste voorouer, of die hele liggaam van werk. Hier is hoe dit lyk:
Let wel: Elke reël in 'n <address>
moet eindig met 'n reëlbreuk ( <br />
) of toegedraai word in 'n blokvlakmerker (bv. <p>
) om die inhoud behoorlik te struktureer.
Vir afkortings en akronieme, gebruik die <abbr>
merker ( <acronym>
is afgekeur in HTML5 ). Plaas die snelskrifvorm binne die etiket en stel 'n titel vir die volledige naam.
<blockquote>
<p>
<small>
Om 'n blokaanhaling in te sluit, draai <blockquote>
om <p>
en <small>
merk. Gebruik die <small>
element om jou bron aan te haal en jy sal 'n em-streep —
voor dit kry.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Heelgetal posuere erat 'n ante venenatis dapibus posuere velit aliquet.
Dr Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Tafels is wonderlik - vir baie dinge. Groot tabelle het egter 'n bietjie opmaakliefde nodig om bruikbaar, skaalbaar en leesbaar te wees (op die kodevlak). Hier is 'n paar wenke om te help.
Draai altyd jou kolomopskrifte <thead>
so in dat hiërargie <thead>
> <tr>
> is <th>
.
Soortgelyk aan die kolomopskrifte, moet al jou tabel se liggaamsinhoud in 'n toegedraai word <tbody>
sodat jou hiërargie <tbody>
> <tr>
> is <td>
.
Alle tabelle sal outomaties gestileer word met slegs die noodsaaklike grense om leesbaarheid te verseker en struktuur te behou. Dit is nie nodig om ekstra klasse of eienskappe by te voeg nie.
# | Eerste naam | Van | Taal |
---|---|---|---|
1 | Sommige | Een | Engels |
2 | Joe | Sixpack | Engels |
3 | Stu | Duik | Kode |
- <tabel>
- ...
- </tabel>
Raak 'n bietjie fyn met jou tafels deur sebrastrepe by te voeg—voeg net die .zebra-striped
klas by.
# | Eerste naam | Van | Taal |
---|---|---|---|
1 | Sommige | Een | Engels |
2 | Joe | Sixpack | Engels |
3 | Stu | Duik | Kode |
Let wel: Zebra-striping is 'n progressiewe verbetering wat nie beskikbaar is vir ouer blaaiers soos IE8 en onder nie.
- <tafelklas = " sebra-gestreepte" >
- ...
- </tabel>
As ons die vorige voorbeeld neem, verbeter ons die bruikbaarheid van ons tabelle deur sorteerfunksies te verskaf via jQuery en die Tablesorter- inprop. Klik op enige kolom se opskrif om die sortering te verander.
# | Eerste naam | Van | Taal |
---|---|---|---|
1 | Jou | Een | Engels |
2 | Joe | Sixpack | Engels |
3 | Stu | Duik | Kode |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <skrif >
- $ ( funksie () {
- $ ( "tabel#sorteerTabelVoorbeeld" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <tafelklas = " sebra-gestreepte" >
- ...
- </tabel>
Alle vorms kry verstekstyle om dit op 'n leesbare en skaalbare manier aan te bied. Style word verskaf vir teksinvoere, kieslyste, teksareas, radioknoppies en merkblokkies, en knoppies.
Voeg .form-stacked
by jou vorm se HTML en jy sal etikette bo-op hul velde hê in plaas van aan hul linkerkant. Dit werk uitstekend as jou vorms kort is of as jy twee kolomme insette het vir swaarder vorms.
As 'n konvensie word knoppies vir aksies gebruik terwyl skakels vir voorwerpe gebruik word. Byvoorbeeld, "Laai af" kan 'n knoppie wees en "onlangse aktiwiteit" kan 'n skakel wees.
Alle knoppies is standaard 'n liggrys styl, maar 'n aantal funksionele klasse kan vir verskillende kleurstyle toegepas word. Hierdie klasse sluit 'n blou .primary
klas, 'n ligblou .info
klas, 'n groen .success
klas en 'n rooi .danger
klas in. Boonop is dit maklik om jou eie style te rol.
Knoppiestyle kan op enigiets met die .btn
toegepaste toegepas word. Tipies sal jy dit net op <a>
, <button>
, en selekteer <input>
-elemente wil toepas. Hier is hoe dit lyk:
Lus vir groter of kleiner knoppies? Hou dit aan!
Vir knoppies wat nie aktief is nie of om een of ander rede deur die toepassing gedeaktiveer word, gebruik die gedeaktiveerde toestand. Dit is .disabled
vir skakels en :disabled
vir <button>
elemente.
div.alert-message
Eenlynboodskappe om die mislukking, moontlike mislukking of sukses van 'n aksie uit te lig. Veral nuttig vir vorms.
div.alert-message.block-message
Vir boodskappe wat 'n bietjie verduideliking vereis, het ons paragraafstylwaarskuwings. Dit is perfek om langer foutboodskappe op te borrel, 'n gebruiker te waarsku oor 'n hangende handeling, of om net inligting aan te bied vir meer klem op die bladsy.
Modale—dialoë of ligkassies—is ideaal vir kontekstuele aksies in situasies waar dit belangrik is dat die agtergrondkonteks behou word.
Een fyn lyf...
Twipsies is baie nuttig om 'n verwarde gebruiker te help en hulle in die regte rigting te wys.
Lorem ipsum dolar sit amet illo fout 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 volupta quae quae quae quae
Gebruik opspringers om subtekstuele inligting aan 'n bladsy te verskaf sonder om uitleg te beïnvloed.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum by eros.
Bootstrap is gebou met Preboot , 'n oopbronpakket van mixins en veranderlikes wat saam met Less gebruik kan word , 'n CSS-voorverwerker vir vinniger en makliker webontwikkeling.
Kyk hoe ons Preboot in Bootstrap gebruik het en hoe jy dit kan gebruik as jy kies om Less op jou volgende projek te laat loop.
Gebruik hierdie opsie om ten volle gebruik te maak van Bootstrap se Less veranderlikes, mixins en nesting in CSS via javascript in jou blaaier.
- <skakel rel = "stylesheet/less" href = "less/bootstrap.less" media = "alles" />
- <script src = "js/less-1.1.3.min.js" ></script>
Voel u nie die .js-oplossing nie? Probeer die Less Mac-toepassing of gebruik Node.js om saam te stel wanneer jy jou kode ontplooi.
Hier is 'n paar van die hoogtepunte van wat ingesluit is in Twitter Bootstrap as deel van Bootstrap. Gaan na die Bootstrap-webwerf of Github-projekbladsy om af te laai en meer te wete te kom.
Veranderlikes in Minder is perfek vir die instandhouding en opdatering van jou CSS-hoofpynvry. Wanneer jy 'n kleurwaarde of 'n gereeld gebruikte waarde wil verander, werk dit op een plek op en jy is gereed.
- // Skakels
- @linkColor : #8b59c2;
- @linkColorHover : donkerder ( @linkColor , 10 );
- // Grys
- @swart : #000;
- @greyDark : verlig ( @swart , 25 %);
- @grys : verlig ( @swart , 50 %);
- @grayLight : verlig ( @swart , 70 %);
- @grayLighter : verlig ( @swart , 90 %);
- @wit : #fff;
- // Aksentkleure
- @blou : #08b5fb;
- @groen : #46a546;
- @rooi : #9d261d;
- @geel : #ffc40d;
- @oranje : #f89406;
- @pienk : #c3325f;
- @pers : #7a43b6;
- // Basislynrooster
- @basefont : 13px ;
- @basislyn : 18px ;
Less bied ook 'n ander styl van kommentaar bykomend tot CSS se normale /* ... */
sintaksis.
- // Hierdie is 'n opmerking
- /* Hierdie is ook 'n opmerking */
Mixins is basies ingesluit of gedeeltes vir CSS, sodat jy 'n blok kode in een kan kombineer. Hulle is ideaal vir eiendomsvoorvoegsels soos verkopersbox-shadow
, kruisblaaiergradiënte, lettertipestapels en meer. Hieronder is 'n voorbeeld van die mengsels wat by Bootstrap ingesluit is.
- #font {
- . snelskrif ( @gewig : normaal , @grootte : 14px , @lineHeight : 20px ) {
- lettergrootte : @grootte ; _ _
- lettertipe - gewig : @gewig ;
- lyn - hoogte : @lynhoogte ;
- }
- . sans - serif ( @gewig : normaal , @grootte : 14px , @lineHeight : 20px ) {
- font - family : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- lettergrootte : @grootte ; _ _
- lettertipe - gewig : @gewig ;
- lyn - hoogte : @lynhoogte ;
- }
- . serif ( @gewig : normaal , @grootte : 14px , @lineHeight : 20px ) {
- font - family : "Georgia" , Times New Roman , Times , sans - serif ;
- lettergrootte : @grootte ; _ _
- lettertipe - gewig : @gewig ;
- lyn - hoogte : @lynhoogte ;
- }
- . monospace ( @gewig : normaal , @grootte : 12px , @lynhoogte : 20px ) {
- font - family : "Monaco" , Courier New , monospace ;
- lettergrootte : @grootte ; _ _
- lettertipe - gewig : @gewig ;
- lyn - hoogte : @lynhoogte ;
- }
- }
- #gradiënt {
- . horisontaal ( @startColor : #555, @endColor: #333) {
- agtergrond - kleur : @endColor ;
- agtergrond - herhaal : herhaal - x ;
- agtergrond - beeld : - khtml - gradiënt ( lineêr , links bo , regs bo , van ( @startColor ), na ( @endColor )); // Konqueror
- agtergrond - beeld : - moz - lineêr - gradiënt ( links , @startColor , @endColor ); // FF 3.6+
- agtergrond - beeld : - ms - lineêr - gradiënt ( links , @startColor , @endColor ); // IE10
- agtergrond - beeld : - webkit - gradiënt ( lineêr , links bo , regs bo , kleur - stop ( 0 %, @startColor ), kleur - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- agtergrond - beeld : - webkit - lineêr - gradiënt ( links , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- agtergrond - beeld : - o - lineêre - gradiënt ( links , @startColor , @ endColor ); // Opera 11.10
- agtergrond - beeld : lineêre - gradiënt ( links , @startColor , @endColor ); // Le standaard
- }
- . vertikale ( @startColor : #555, @endColor: #333) {
- agtergrond - kleur : @endColor ;
- agtergrond - herhaal : herhaal - x ;
- agtergrond - beeld : - khtml - gradiënt ( lineêr , links bo , links onder , van ( @startColor ), na ( @endColor )); // Konqueror
- agtergrond - beeld : - moz - lineêr - gradiënt ( @startColor , @endColor ); // FF 3.6+
- agtergrond - beeld : - ms - lineêre - gradiënt ( @startColor , @endColor ); // IE10
- agtergrond - beeld : - webkit - gradiënt ( lineêr , links bo , links onder , kleur - stop ( 0 %, @startColor ), kleur - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- agtergrond - beeld : - webkit - lineêr - gradiënt ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- agtergrond - beeld : - o - lineêre - gradiënt ( @startColor , @endColor ); // Opera 11.10
- agtergrond - beeld : lineêre - gradiënt ( @startColor , @endColor ); // Die standaard
- }
- . directional ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . vertikaal - drie - kleure ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Raak lus en voer 'n bietjie wiskunde uit om buigsame en kragtige mengsels soos die een hieronder te genereer.
- // Gritude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Roosterstelsel
- . houer {
- breedte : @siteWidth ;
- marge : 0 outo ;
- . clearfix ();
- }
- . kolomme ( @columnSpan : 1 ) {
- width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . offset ( @columnOffset : 1 ) {
- kantlyn - links : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }