Etiam porta sem malesuada magna mollis euismod. Mecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap és un conjunt d'eines de Twitter dissenyat per impulsar el desenvolupament d'aplicacions web i llocs.
Inclou CSS i HTML bàsics per a tipografia, formularis, botons, taules, quadrícules, navegació i molt més.
Alerta nerd: Bootstrap s'ha creat amb Less i s'ha dissenyat per funcionar des de la porta tenint en compte els navegadors moderns.
Per començar de manera més ràpida i senzilla, només cal que copieu aquest fragment a la vostra pàgina web.
Un fan d'utilitzar Less? Cap problema, només cal clonar el repo i afegir aquestes línies:
Baixeu, forqueu, extreu, fitxers problemes i molt més amb el repositori oficial de Bootstrap a Github.
En els primers dies de Twitter, els enginyers utilitzaven gairebé qualsevol biblioteca que estaven familiaritzats per complir els requisits del front-end. Bootstrap va començar com una resposta als reptes que es van presentar i el desenvolupament es va accelerar ràpidament durant la primera Hackweek de Twitter.
Amb l'ajuda i els comentaris de molts enginyers de Twitter, Bootstrap ha crescut significativament per incloure no només estils bàsics, sinó patrons de disseny frontal més elegants i duradors.
Més informació a dev.twitter.com ›
Bootstrap es prova i és compatible amb els principals navegadors moderns com Chrome, Safari, Internet Explorer i Firefox.
Bootstrap ve complet amb CSS compilat, no compilat i plantilles d'exemple.
El sistema de quadrícula predeterminat que es proporciona com a part de Bootstrap és una quadrícula de 16 columnes de 940 píxels d'ample. És un sabor del popular sistema de graella 960, però sense el marge / farciment addicional als costats esquerre i dret.
Com es mostra aquí, es pot crear un disseny bàsic amb dues "columnes", cadascuna abastant un nombre de les 16 columnes fonamentals que hem definit com a part del nostre sistema de quadrícula. Vegeu els exemples següents per obtenir més variacions.
- <div class = "fila" >
- <div class = "span6 columns" >
- ...
- </div>
- <div class = "span10 columns" >
- ...
- </div>
- </div>
El disseny predeterminat i senzill de 940 píxels d'ample i centrat per a gairebé qualsevol lloc web o pàgina proporcionada per un únic fitxer <div.container>
.
- <cos>
- <div class = "contenidor" >
- ...
- </div>
- </cos>
Una estructura de pàgina fluida alternativa i flexible amb amplades mínimes i màximes i una barra lateral esquerra. Ideal per a aplicacions i documents.
- <cos>
- <div class = "container-fluid" >
- <div class = "barra lateral" >
- ...
- </div>
- <div class = "contingut" >
- ...
- </div>
- </div>
- </cos>
Una jerarquia tipogràfica estàndard per estructurar les vostres pàgines web.
Tota la graella tipogràfica es basa en dues variables Less del nostre fitxer preboot.less: @basefont
i @baseline
. El primer és la mida de lletra base utilitzada a tot arreu i el segon és l'alçada de la línia base.
Utilitzem aquestes variables, i algunes matemàtiques, per crear els marges, els farciments i les altures de línia de tot el nostre tipus i més.
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.
Utilitzant èmfasi, adreces i abreviatures
<strong>
<em>
<address>
<abbr>
Les etiquetes d'èmfasi ( <strong>
i <em>
) s'han d'utilitzar per indicar la importància o l'èmfasi addicional d'una paraula o frase en relació amb la còpia que l'envolta. Utilitzeu -lo <strong>
per a la importància i <em>
l' èmfasi .
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.
Nota: encara està bé utilitzar <b>
i <i>
etiquetes a HTML5 i no cal que tinguin un estil en negreta i cursiva, respectivament (tot i que si hi ha un element més semàntic, utilitzeu-lo). <b>
està pensat per ressaltar paraules o frases sense transmetre importància addicional, mentre que <i>
és principalment per a veu, termes tècnics, etc.
L' <address>
element s'utilitza per a la informació de contacte del seu avantpassat més proper o de tot el conjunt de treballs. Així és com es veu:
Nota: Cada línia d'un <address>
ha d'acabar amb un salt de línia ( <br />
) o estar embolicat en una etiqueta a nivell de bloc (per exemple, <p>
) per estructurar correctament el contingut.
Per a abreviatures i acrònims, utilitzeu l' <abbr>
etiqueta ( <acronym>
està obsolet a HTML5 ). Col·loqueu el formulari d'abreviatura dins de l'etiqueta i establiu un títol per al nom complet.
<blockquote>
<p>
<small>
<blockquote>
Per incloure una cita de bloc, embolcalleu <p>
i <small>
etiqueteu. Utilitzeu l' <small>
element per citar la vostra font i obtindreu un guió em —
abans.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Les taules són genials, per a moltes coses. Les taules excel·lents, però, necessiten una mica d'amor de marcatge per ser útils, escalables i llegibles (a nivell de codi). Aquí teniu alguns consells per ajudar-vos.
Embolcalleu sempre les capçaleres de les columnes de <thead>
manera que la jerarquia sigui <thead>
> <tr>
> <th>
.
De manera semblant a les capçaleres de les columnes, tot el contingut del cos de la taula s'hauria d'embolicar en un de <tbody>
manera que la vostra jerarquia sigui <tbody>
> <tr>
> <td>
.
Totes les taules s'estilitzaran automàticament amb només les vores essencials per garantir la llegibilitat i mantenir l'estructura. No cal afegir classes o atributs addicionals.
# | Nom | Cognom | Llenguatge |
---|---|---|---|
1 | Alguns | Un | Anglès |
2 | Joe | Abdominals | Anglès |
3 | Stu | Dent | Codi |
- <taula>
- ...
- </taula>
Fes una mica de luxe amb les teves taules afegint ratlles de zebra; només has d'afegir la .zebra-striped
classe.
# | Nom | Cognom | Llenguatge |
---|---|---|---|
1 | Alguns | Un | Anglès |
2 | Joe | Abdominals | Anglès |
3 | Stu | Dent | Codi |
Nota: el zebra-striping és una millora progressiva que no està disponible per a navegadors antics com IE8 i anteriors.
- < classe de taula = "a ratlles de zebra" >
- ...
- </taula>
Prenent l'exemple anterior, millorem la utilitat de les nostres taules proporcionant una funcionalitat d'ordenació mitjançant jQuery i el connector Tablesorter . Feu clic a la capçalera de qualsevol columna per canviar l'ordenació.
# | Nom | Cognom | Llenguatge |
---|---|---|---|
1 | El teu | Un | Anglès |
2 | Joe | Abdominals | Anglès |
3 | Stu | Dent | Codi |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( funció () {
- $ ( "taula#sortTableExample" ). classificador de taules ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- < classe de taula = "a ratlles de zebra" >
- ...
- </taula>
Tots els formularis reben estils predeterminats per presentar-los d'una manera llegible i escalable. Es proporcionen estils per a les entrades de text, llistes de selecció, àrees de text, botons d'opció i caselles de selecció i botons.
Afegiu .form-stacked
-lo a l'HTML del vostre formulari i tindreu etiquetes a la part superior dels seus camps en comptes de no a la seva esquerra. Això funciona molt bé si els vostres formularis són curts o teniu dues columnes d'entrada per a formularis més pesats.
Com a convenció, els botons s'utilitzen per a accions mentre que els enllaços s'utilitzen per als objectes. Per exemple, "Baixa" podria ser un botó i "activitat recent" podria ser un enllaç.
Tots els botons tenen un estil gris clar per defecte, però es poden aplicar diverses classes funcionals per a diferents estils de color. Aquestes classes inclouen una .primary
classe blava, una .info
classe blau clar, una classe verda .success
i una classe vermella .danger
. A més, enrotllar els vostres propis estils és fàcil.
Els estils de botons es poden aplicar a qualsevol cosa amb l' .btn
aplicació. Normalment, voldreu aplicar-los només als elements <a>
, <button>
, i seleccionats <input>
. Així és com es veu:
Voleu botons més grans o més petits? Teniu-ho!
Per als botons que no estan actius o estan desactivats per l'aplicació per un motiu o un altre, utilitzeu l'estat desactivat. Això és .disabled
per als enllaços i :disabled
per als <button>
elements.
div.alert-message
Missatges d'una línia per destacar el fracàs, el possible fracàs o l'èxit d'una acció. Especialment útil per a formularis.
div.alert-message.block-message
Per als missatges que requereixen una mica d'explicació, tenim alertes d'estil de paràgraf. Aquests són perfectes per enviar missatges d'error més llargs, advertir un usuari d'una acció pendent o simplement presentar informació per donar més èmfasi a la pàgina.
Els modals (diàlegs o caixes de llum) són ideals per a accions contextuals en situacions en què és important que es mantingui el context de fons.
Un bon cos...
Els twipsies són molt útils per ajudar un usuari confús i apuntar-los en la direcció correcta.
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.
Utilitzeu finestres emergents per proporcionar informació subtextual a una pàgina sense afectar el disseny.
Etiam porta sem malesuada magna mollis euismod. Mecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap es va crear amb Preboot , un paquet de codi obert de mixins i variables que s'utilitzarà juntament amb Less , un preprocessador CSS per a un desenvolupament web més ràpid i senzill.
Comproveu com hem utilitzat Preboot a Bootstrap i com podeu fer-ne ús si decidiu executar Less al vostre proper projecte.
Utilitzeu aquesta opció per fer un ús complet de les variables, mixins i nidificació de Less de Bootstrap en CSS mitjançant javascript al vostre navegador.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
No sents la solució .js? Proveu l'aplicació Less Mac o utilitzeu Node.js per compilar quan implementeu el codi.
Aquests són alguns dels aspectes més destacats del que s'inclou a Twitter Bootstrap com a part de Bootstrap. Aneu al lloc web de Bootstrap o a la pàgina del projecte Github per descarregar i obtenir més informació.
Les variables de Less són perfectes per mantenir i actualitzar el vostre CSS sense mal de cap. Quan vulgueu canviar un valor de color o un valor d'ús freqüent, actualitzeu-lo en un sol lloc i ja està.
- // Enllaços
- @linkColor : #8b59c2;
- @linkColorHover : enfosquir ( @linkColor , 10 );
- // Grises
- @negre : #000;
- @grayDark : aclarir ( @negre , 25 %);
- @gris : aclarir ( @negre , 50 %);
- @grayLight : alleugerir ( @negre , 70 %);
- @grayLighter : alleugerir ( @negre , 90 %);
- @blanc : #fff;
- // Colors d'accent
- @blau : #08b5fb;
- @verd : #46a546;
- @vermell : #9d261d;
- @groc : #ffc40d;
- @taronja : #f89406;
- @rosa : #c3325f;
- @violet : #7a43b6;
- // Quadrícula de referència
- @basefont : 13px ;
- @baseline : 18px ;
/* ... */
Less també proporciona un altre estil de comentari a més de la sintaxi normal de CSS .
- // Això és un comentari
- /* Això també és un comentari */
Els mixins són bàsicament inclusions o parcials per a CSS, cosa que us permet combinar un bloc de codi en un de sol. Són excel·lents per a propietats amb prefix de proveïdor com ara box-shadow
, degradats entre navegadors, piles de tipus de lletra i molt més. A continuació es mostra una mostra dels mixins que s'inclouen amb Bootstrap.
- #Font {
- . abreviatura ( @pes : normal , @mida : 14px , @lineHeight : 20px ) {
- font - size : @size ;
- font - pes : @pes ;
- line - height : @lineHeight ;
- }
- . sans - serif ( @pes : normal , @mida : 14px , @Alçada de línia : 20px ) {
- família de tipus de lletra : "Helvetica Neue " , Helvetica , Arial , sans serif ;
- font - size : @size ;
- font - pes : @pes ;
- line - height : @lineHeight ;
- }
- . serif ( @pes : normal , @mida : 14px , @lineHeight : 20px ) {
- família de tipus de lletra : "Geòrgia" , Times New Roman , Times , sans - serif ;
- font - size : @size ;
- font - pes : @pes ;
- line - height : @lineHeight ;
- }
- . monoespai ( @pes : normal , @mida : 12px , @lineHeight : 20px ) {
- família de tipus de lletra : "Monaco" , Courier New , monoespai ;
- font - size : @size ;
- font - pes : @pes ;
- line - height : @lineHeight ;
- }
- }
- #gradient {
- . horitzontal ( @startColor : #555, @endColor: #333) {
- fons - color : @endColor ;
- fons - repetició : repetició - x ;
- fons - imatge : - khtml - degradat ( lineal , esquerra superior , dreta superior , de ( @startColor ), a ( @endColor )); // Konqueror
- fons - imatge : - moz - lineal - degradat ( esquerra , @startColor , @endColor ); // FF 3.6+
- fons - imatge : - ms - lineal - degradat ( esquerra , @startColor , @endColor ); // IE10
- fons - imatge : - webkit - degradat ( lineal , esquerra superior , dreta superior , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- fons - imatge : - webkit - lineal - degradat ( esquerra , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- fons - imatge : - o - lineal - degradat ( esquerra , @startColor , @endColor ); // Opera 11.10
- fons - imatge : lineal - degradat ( esquerra , @startColor , @endColor ); // L'estàndard
- }
- . vertical ( @startColor : #555, @endColor: #333) {
- fons - color : @endColor ;
- fons - repetició : repetició - x ;
- fons - imatge : - khtml - degradat ( lineal , esquerra superior , esquerra inferior , de ( @startColor ), a ( @endColor )); // Konqueror
- fons - imatge : - moz - lineal - degradat ( @startColor , @endColor ); // FF 3.6+
- fons - imatge : - ms - lineal - degradat ( @startColor , @endColor ); // IE10
- fons - imatge : - webkit - degradat ( lineal , esquerra superior , esquerra inferior , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- fons - imatge : - webkit - lineal - degradat ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- fons - imatge : - o - lineal - degradat ( @startColor , @endColor ); // Opera 11.10
- fons - imatge : lineal - degradat ( @startColor , @endColor ); // L'estàndard
- }
- . direccional ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . vertical - tres - colors ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
Posa't de moda i fes algunes matemàtiques per generar mixins flexibles i potents com el següent.
- // Grillitud
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Sistema de graella
- . contenidor {
- amplada : @siteWidth ;
- marge : 0 automàtic ;
- . clearfix ();
- }
- . columnes ( @columnSpan : 1 ) {
- amplada : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . desplaçament ( @columnOffset : 1 ) {
- marge - esquerre : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }