Etiam porta sem malesuada magna mollis euismod. Mecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap estas ilaro de Twitter desegnita por ekfunkciigi disvolviĝon de retejoj kaj retejoj.
Ĝi inkluzivas bazan CSS kaj HTML por tipografio, formoj, butonoj, tabeloj, kradoj, navigado kaj pli.
Nerd-atentigo: Bootstrap estas konstruita kun Less kaj estis desegnita por funkcii ekster la pordego kun modernaj retumiloj en menso.
Por la plej rapida kaj facila komenco, simple kopiu ĉi tiun fragmenton en vian retpaĝon.
Ĉu ŝatanto uzi Malpli? Neniu problemo, nur klonu la repo kaj aldonu ĉi tiujn liniojn:
Elŝutu, forku, tiru, dosierojn kaj pli kun la oficiala Bootstrap-repo sur Github.
En la pli fruaj tagoj de Twitter, inĝenieroj uzis preskaŭ ajnan bibliotekon, kun kiu ili konis por plenumi antaŭajn postulojn. Bootstrap komenciĝis kiel respondo al la defioj kiuj prezentis kaj evoluo rapide akcelis dum la unua Hackweek de Twitter.
Kun la helpo kaj sugestoj de multaj inĝenieroj ĉe Twitter, Bootstrap signife kreskis por ampleksi ne nur bazajn stilojn, sed pli elegantajn kaj daŭrajn antaŭajn desegnajn ŝablonojn.
Legu pli ĉe dev.twitter.com ›
Bootstrap estas provita kaj subtenata en ĉefaj modernaj retumiloj kiel Chrome, Safari, Internet Explorer kaj Firefox.
Bootstrap venas kompleta kun kompilitaj CSS, nekompilitaj kaj ekzemploŝablonoj.
La defaŭlta kradsistemo provizita kiel parto de Bootstrap estas 940px larĝa 16-kolumna krado. Ĝi estas gusto de la populara 960 kradsistemo, sed sen la aldona marĝeno/remburaĵo ĉe la maldekstraj kaj dekstraj flankoj.
Kiel montrite ĉi tie, baza aranĝo povas esti kreita kun du "kolumnoj", ĉiu ampleksanta kelkajn el la 16 fundamentaj kolumnoj, kiujn ni difinis kiel parto de nia kradsistemo. Vidu la ekzemplojn malsupre por pli da varioj.
- <div klaso = "vico" >
- <div class = "span6 kolumnoj" >
- ...
- </div>
- <div class = "span10 kolumnoj" >
- ...
- </div>
- </div>
La defaŭlta kaj simpla 940px-larĝa, centrita aranĝo por preskaŭ ajna retejo aŭ paĝo provizita de ununura <div.container>
.
- <korpo>
- <div class = "ujo" >
- ...
- </div>
- </korpo>
Alternativa, fleksebla fluida paĝa strukturo kun min- kaj max-larĝoj kaj maldekstra flanka kolumno. Bonega por programoj kaj dokumentoj.
- <korpo>
- <div class = "ujo-fluido" >
- <div class = "flankmenuo" >
- ...
- </div>
- <div class = "enhavo" >
- ...
- </div>
- </div>
- </korpo>
Norma tipografia hierarkio por strukturi viajn retpaĝojn.
La tuta tipografia krado baziĝas sur du Malpli variabloj en nia preboot.less dosiero: @basefont
kaj @baseline
. La unua estas la baza tiparo-grandeco uzata ĉie kaj la dua estas la bazlinia alteco.
Ni uzas tiujn variablojn, kaj iom da matematiko, por krei la randojn, kompletiĝojn kaj linio-altojn de ĉiuj niaj tipoj kaj pli.
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.
Uzante emfazon, adresojn kaj mallongigojn
<strong>
<em>
<address>
<abbr>
Emfazaj etikedoj ( <strong>
kaj <em>
) estu uzataj por indiki plian gravecon aŭ emfazon de vorto aŭ frazo rilate al ĝia ĉirkaŭa kopio. Uzu <strong>
por graveco kaj <em>
por emfazo .
Fusce dapibus , tellus ac cursus commodo , torttor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Noto: Estas ankoraŭ bone uzi <b>
kaj <i>
etikedojn en HTML5 kaj ili ne devas esti stilitaj respektive grasa kaj kursiva (kvankam se estas pli semantika elemento, uzu ĝin). <b>
celas reliefigi vortojn aŭ frazojn sen transdoni aldonan gravecon, dum <i>
estas plejparte por voĉo, teknikaj terminoj ktp.
La <address>
elemento estas uzata por kontaktinformoj por sia plej proksima prapatro, aŭ la tuta laboro. Jen kiel ĝi aspektas:
Noto: Ĉiu linio en <address>
devas finiĝi per linio-rompo ( <br />
) aŭ esti envolvita en bloknivela etikedo (ekz. <p>
) por taŭge strukturi la enhavon.
Por mallongigoj kaj akronimoj, uzu la <abbr>
etikedon ( <acronym>
estas malrekomendita en HTML5 ). Metu la stenografion en la etikedo kaj starigu titolon por la kompleta nomo.
<blockquote>
<p>
<small>
Por inkluzivi blokcitaĵon, envolvu kaj <blockquote>
etikedu . Uzu la elementon por citi vian fonton kaj vi ricevos em streketon antaŭ ĝi.<p>
<small>
<small>
—
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
D-ro Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Tabloj estas bonegaj—por multaj aferoj. Grandaj tabeloj, tamen, bezonas iom da markado-amo por esti utilaj, skaleblaj kaj legeblaj (ĉe la kodnivelo). Jen kelkaj konsiletoj por helpi.
Ĉiam envolvu viajn kolumnajn kapojn en <thead>
tia, ke hierarkio estas <thead>
> <tr>
> <th>
.
Simile al la kolumnaj kapoj, la tuta korpenhavo de via tabelo estu envolvita en <tbody>
tiel via hierarkio <tbody>
> <tr>
> <td>
.
Ĉiuj tabeloj estos aŭtomate stilitaj kun nur la esencaj randoj por certigi legeblecon kaj konservi strukturon. Ne necesas aldoni kromajn klasojn aŭ atributojn.
# | Antaŭnomo | Familia nomo | Lingvo |
---|---|---|---|
1 | Iuj | Unu | la angla |
2 | Joe | Sespako | la angla |
3 | Stu | Dent | Kodo |
- <tablo>
- ...
- </tablo>
Fariĝu iom per viaj tabloj aldonante zebro-striadon—nur aldonu la .zebra-striped
klason.
# | Antaŭnomo | Familia nomo | Lingvo |
---|---|---|---|
1 | Iuj | Unu | la angla |
2 | Joe | Sespako | la angla |
3 | Stu | Dent | Kodo |
Noto: Zebra-striado estas progresema plibonigo ne havebla por pli malnovaj retumiloj kiel IE8 kaj sube.
- <table class = "zebro-striita" >
- ...
- </tablo>
Prenante la antaŭan ekzemplon, ni plibonigas la utilecon de niaj tabeloj provizante ordigan funkcion per jQuery kaj la aldonaĵo Tablesorter . Alklaku la kaplinion de iu ajn kolumno por ŝanĝi la ordigon.
# | Antaŭnomo | Familia nomo | Lingvo |
---|---|---|---|
1 | Vian | Unu | la angla |
2 | Joe | Sespako | la angla |
3 | Stu | Dent | Kodo |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <skripto >
- $ ( funkcio () {
- $ ( "tabelo#sortTabeloEkzemplo" ). tabelordigilo ({ sortListo : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebro-striita" >
- ...
- </tablo>
Ĉiuj formoj ricevas defaŭltajn stilojn por prezenti ilin en legebla kaj skalebla maniero. Stiloj estas provizitaj por tekstaj enigaĵoj, elektaj listoj, tekstaj areoj, radiobutonoj kaj markobutonoj kaj butonoj.
Aldonu .form-stacked
al la HTML de via formularo kaj vi havos etikedojn supre de iliaj kampoj anstataŭ maldekstre. Ĉi tio bonege funkcias se viaj formoj estas mallongaj aŭ vi havas du kolumnojn da enigaĵoj por pli pezaj formoj.
Kiel konvencio, butonoj estas uzataj por agoj dum ligiloj estas uzataj por objektoj. Ekzemple, "Elŝutu" povus esti butono kaj "lasta agado" povus esti ligilo.
Ĉiuj butonoj defaŭlte al helgriza stilo, sed kelkaj funkciaj klasoj povas esti aplikataj por malsamaj kolorstiloj. Ĉi tiuj klasoj inkluzivas bluan .primary
klason, helbluan .info
klason, verdan .success
klason kaj ruĝan .danger
klason. Plie, ruli viajn proprajn stilojn estas facile facila.
Butonstiloj povas esti aplikitaj al io ajn kun la .btn
aplikata. Kutime vi volas apliki ĉi tiujn nur al <a>
, <button>
, kaj elektaj <input>
elementoj. Jen kiel ĝi aspektas:
Ĉu vi volas pli grandajn aŭ pli malgrandajn butonojn? Havu ĝin!
Por butonoj, kiuj ne estas aktivaj aŭ estas malŝaltitaj de la programo ial aŭ alia, uzu la malfunkciigitan staton. Tio estas .disabled
por ligiloj kaj :disabled
por <button>
elementoj.
div.alert-message
Unu-liniaj mesaĝoj por reliefigi la fiaskon, eblan malsukceson aŭ sukceson de ago. Aparte utila por formoj.
div.alert-message.block-message
Por mesaĝoj, kiuj postulas iom da klarigo, ni havas alineajn stilajn atentigojn. Ĉi tiuj estas perfektaj por bobeli pli longajn erarmesaĝojn, averti uzanton pri pritraktata ago aŭ simple prezenti informojn por pli emfazo sur la paĝo.
Modaloj—dialogoj aŭ lumketoj—estas bonegaj por kontekstaj agoj en situacioj kie gravas, ke la fonkunteksto estu konservita.
Unu bela korpo...
Twipsies estas tre utilaj por helpi konfuzitan uzanton kaj direkti ilin en la ĝustan direkton.
Lorem ipsum dolar sit amet illo error 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 nemo voluptas voluptatem rem quae aut veritatis quasi quae.
Uzu popovers por provizi subtekstan informon al paĝo sen tuŝi aranĝon.
Etiam porta sem malesuada magna mollis euismod. Mecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap estis konstruita kun Preboot , malfermfonta pako de miksaĵoj kaj variabloj uzeblaj kune kun Less , CSS-antaŭprocesoro por pli rapida kaj pli facila reto-disvolviĝo.
Rigardu kiel ni uzis Preboot en Bootstrap kaj kiel vi povas uzi ĝin se vi elektas ruli Malpli en via venonta projekto.
Uzu ĉi tiun opcion por plene uzi la Malpli variablojn, miksaĵojn kaj nestumon de Bootstrap en CSS per Javaskripto en via retumilo.
- <link rel = "stylesheet/malpli" href = "malpli/bootstrap.less" media = "ĉio" />
- <script src = "js/less-1.1.3.min.js" ></script>
Ĉu vi ne sentas la solvon .js? Provu la Less Mac-apon aŭ uzu Node.js por kompili kiam vi disvastigas vian kodon.
Jen kelkaj el la kulminaĵoj de tio, kio estas inkluzivita en Twitter Bootstrap kiel parto de Bootstrap. Iru al la retejo de Bootstrap aŭ al la paĝo de la projekto Github por elŝuti kaj lerni pli.
Variabloj en Less estas perfektaj por konservi kaj ĝisdatigi vian CSS-kapdoloron senpage. Kiam vi volas ŝanĝi kolorvaloron aŭ ofte uzatan valoron, ĝisdatigu ĝin en unu loko kaj vi fartas.
- // Ligiloj
- @linkColor : #8b59c2;
- @linkColorHover : mallumigi ( @linkColor , 10 );
- // Grizoj
- @nigra : #000;
- @grayDark : malpezigi ( @nigra , 25 %);
- @griza : malpezigi ( @nigra , 50 %);
- @grayLight : malpezigi ( @nigra , 70 %);
- @grayLighter : malpezigi ( @nigra , 90 %);
- @blanka : #fff;
- // Akcentaj Koloroj
- @blua : #08b5fb;
- @verda : #46a546;
- @ruĝa : # 9d261d ;
- @flava : #ffc40d;
- @orange : #f89406;
- @rozkolora : #c3325f;
- @purpuro : #7a43b6;
- // Bazlinia krado
- @bazfont : 13px ;
- @bazlinio : 18px ;
Malpli ankaŭ disponigas alian stilon de komentado krom la normala /* ... */
sintakso de CSS.
- // Ĉi tio estas komento
- /* Ĉi tio ankaŭ estas komento */
Miksinoj estas esence inkluditaj aŭ partaj por CSS, permesante vin kombini blokon de kodo en unu. Ili estas bonegaj por vendistaj prefiksitaj propraĵoj kiel box-shadow
, trans-retumilaraj gradientoj, tiparstakoj kaj pli. Malsupre estas specimeno de la miksaĵoj, kiuj estas inkluzivitaj kun Bootstrap.
- #tiparo {
- . stenografio ( @pezo : normala , @grandeco : 14px , @lineHeight : 20px ) {
- tiparo - grandeco : @grandeco ;
- tiparo - pezo : @pezo ;
- line - alteco : @lineHeight ;
- }
- . sans - serif ( @pezo : normala , @grandeco : 14px , @lineHeight : 20px ) {
- tiparo - familio : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- tiparo - grandeco : @grandeco ;
- tiparo - pezo : @pezo ;
- line - alteco : @lineHeight ;
- }
- . serifo ( @pezo : normala , @grandeco : 14px , @lineHeight : 20px ) {
- tiparo - familio : "Kartvelio" , Times New Roman , Times , sans - serif ;
- tiparo - grandeco : @grandeco ;
- tiparo - pezo : @pezo ;
- line - alteco : @lineHeight ;
- }
- . monospaco ( @pezo : normala , @grandeco : 12px , @lineHeight : 20px ) {
- tiparo - familio : "Monako" , Courier New , monospaco ;
- tiparo - grandeco : @grandeco ;
- tiparo - pezo : @pezo ;
- line - alteco : @lineHeight ;
- }
- }
- #gradiento {
- . horizontala ( @startColor : #555, @endColor: #333) {
- fono - koloro : @endColor ;
- fono - ripeti : ripeti - x ;
- fono - bildo : - khtml - gradiento ( lineara , maldekstra supro , dekstra supro , de ( @startColor ), ĝis ( @endColor )); // Konkeranto
- fono - bildo : - moz - lineara - gradiento ( maldekstre , @startColor , @endColor ); // FF 3.6+
- fono - bildo : - ms - lineara - gradiento ( maldekstre , @startColor , @endColor ); // IE10
- fono - bildo : - webkit - gradiento ( linia , maldekstra supro , dekstra supro , koloro - halto ( 0 %, @startColor ), koloro - halto ( 100 %, @endColor )); // Safaro 4+, Chrome 2+
- fono - bildo : - webkit - lineara - gradiento ( maldekstre , @startColor , @endColor ); // Safaro 5.1+, Chrome 10+
- fono - bildo : - o - lineara - gradiento ( maldekstre , @startColor , @endColor ); // Opero 11.10
- fono - bildo : lineara - gradiento ( maldekstre , @startColor , @endColor ); // Le standard
- }
- . vertikala ( @startColor : #555, @endColor: #333) {
- fono - koloro : @endColor ;
- fono - ripeti : ripeti - x ;
- fono - bildo : - khtml - gradiento ( lineara , maldekstra supro , maldekstra malsupro , de ( @startColor ), ĝis ( @endColor )); // Konkeranto
- fono - bildo : - moz - lineara - gradiento ( @startColor , @endColor ); // FF 3.6+
- fono - bildo : - ms - lineara - gradiento ( @startColor , @endColor ); // IE10
- fono - bildo : - webkit - gradiento ( linia , maldekstra supro , maldekstra malsupro , koloro - halto ( 0 %, @startColor ), koloro - halto ( 100 %, @endColor )); // Safaro 4+, Chrome 2+
- fono - bildo : - webkit - lineara - gradiento ( @startColor , @endColor ); // Safaro 5.1+, Chrome 10+
- fono - bildo : - o - lineara - gradiento ( @startColor , @endColor ); // Opero 11.10
- fono - bildo : lineara - gradiento ( @startColor , @endColor ); // La normo
- }
- . direkta ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . vertikala - tri - koloroj ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Imagu kaj faru iom da matematiko por generi flekseblajn kaj potencajn miksaĵojn kiel la sube.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Krada Sistemo
- . ujo {
- larĝo : @siteWidth ;
- marĝeno : 0 aŭto ;
- . clearfix ();
- }
- . kolumnoj ( @columnSpan : 1 ) {
- larĝo : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . ofseto ( @kolumnOffset : 1 ) {
- marĝeno - maldekstra : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }