Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum en eros.
Bootstrap is in toolkit fan Twitter ûntworpen om de ûntwikkeling fan webapps en siden te kickstarten.
It omfettet basis CSS en HTML foar typografy, formulieren, knoppen, tabellen, rasters, navigaasje, en mear.
Nerd alert: Bootstrap is boud mei Minder en is ûntworpen om út 'e poarte te wurkjen mei moderne browsers yn gedachten.
Kopiearje dit snippet gewoan nei jo webside foar de rapste en maklikste start.
In fan fan it brûken fan Minder? Gjin probleem, kloon gewoan de repo en foegje dizze rigels ta:
Download, fork, pull, triemproblemen, en mear mei de offisjele Bootstrap-repo op Github.
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 ›
Bootstrap wurdt hifke en stipe yn grutte moderne browsers lykas Chrome, Safari, Internet Explorer, en Firefox.
Bootstrap komt kompleet mei kompilearre CSS, net kompilearre, en foarbyldsjabloanen.
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.
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 columns" >
- ...
- </div>
- <div class = "span10 kolommen" >
- ...
- </div>
- </div>
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>
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>
In standert typografyske hierargy foar it strukturearjen fan jo websiden.
It hiele typografyske raster is basearre op twa Minder fariabelen yn ús preboot.less-bestân: @basefont
en @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.
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.
Mei klam, adressen en ôfkoartings
<strong>
<em>
<address>
<abbr>
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.
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.
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:
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.
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.
<blockquote>
<p>
<small>
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
<ul>
<ul.unstyled>
<ol>
dl
<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>
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>
Krij in bytsje fancy mei jo tafels troch sebra-striping ta te foegjen - foegje gewoan de .zebra-striped
klasse 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 = "sebra-striped" >
- ...
- </tabel>
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>
- <skript >
- $ ( funksje () {
- $ ( "tabel#sortTabelfoarbyld" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </skript>
- <table class = "sebra-striped" >
- ...
- </tabel>
Alle formulieren krije standertstilen om se op in lêsbere en skalbere manier te presintearjen. Stilen wurde levere foar tekstynfier, selektearjelisten, tekstgebieten, radioknoppen en karfakjes, en knoppen.
Foegje .form-stacked
oan de HTML fan jo formulier ta en jo sille labels boppe op har fjilden hawwe ynstee fan oan har lofts. Dit wurket geweldich as jo formulieren koart binne of jo hawwe twa kolommen mei ynputs foar swierdere formulieren.
As konvinsje wurde knoppen brûkt foar aksjes, wylst keppelings wurde brûkt foar objekten. Bygelyks, "Download" kin in knop wêze en "resinte aktiviteit" kin in keppeling wêze.
Alle knoppen standert nei in ljocht grize styl, mar in oantal funksjonele klassen kinne tapast wurde foar ferskillende kleur stilen. Dizze klassen omfetsje in blauwe .primary
klasse, in ljochtblau .info
klasse, in griene .success
klasse en in reade .danger
klasse. Plus, it rôljen fan jo eigen stilen is maklik peasy.
Knopstilen kinne wurde tapast op alles mei de .btn
tapaste. Typysk wolle jo dizze allinich tapasse op <a>
, <button>
, en selektearje <input>
eleminten. Hjir is hoe't it derút sjocht:
Wolle jo gruttere of lytsere knoppen? Hawwe it oan!
Foar knoppen dy't net aktyf binne of wurde útskeakele troch de app om ien of oare reden, brûk de útskeakele steat. Dat is .disabled
foar keppelings en :disabled
foar <button>
eleminten.
div.alert-message
Ien-line berjochten foar it markearjen fan it mislearjen, mooglik mislearjen of sukses fan in aksje. Benammen nuttich foar foarmen.
div.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.
Modalen - dialogen as ljochtboxen - binne geweldich foar kontekstuele aksjes yn situaasjes wêr't it wichtich is dat de eftergrûnkontekst behâlden wurdt.
In moai lichem...
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 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
Brûk popovers om subtekstuele ynformaasje oan in side te jaan sûnder de yndieling te beynfloedzjen.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum en eros.
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.
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.
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 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 : ljochter ( @black , 25 %);
- @griis : ljochter ( @swart , 50 %);
- @grayLight : ljochter ( @black , 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 ;
Minder leveret ek in oare styl fan kommentaar neist de normale /* ... */
syntaksis fan CSS.
- // Dit is in reaksje
- /* Dit is ek in reaksje */
Mixins binne yn prinsipe omfettet as dieltsjes foar CSS, wêrtroch jo in blok koade yn ien kinne kombinearje. Se binne geweldich foar ferkeaper prefix eigenskippen lykasbox-shadow
, cross-browser gradients, lettertypestapels, en mear. Hjirûnder is in stekproef fan 'e mixins dy't binne opnommen mei Bootstrap.
- #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 ;
- }
- }
- #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
- 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
- eftergrûn - ôfbylding : linear - gradient ( @startColor , @endColor ); // De standert
- }
- . directional ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . fertikaal - trije - kleuren ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
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 ));
- // Grid System
- . kontener {
- width : @siteWidth ;
- marzje : 0 auto ;
- . clearfix ();
- }
- . kolommen ( @columnSpan : 1 ) {
- width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . offset ( @columnOffset : 1 ) {
- marzje - lofts : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }