Exemples d'inici ràpid

Necessites algunes plantilles ràpides? Consulteu aquests exemples bàsics que hem reunit:

Quadrícula per defecte

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.

Exemple de marcatge de quadrícula

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" > 
    ...
  </div>
  <div class = "span10" > 
    ...
  </div>
</div>

Nidificació de columnes

Niu el contingut si és necessari creant un .rowdins d'una columna existent.

Exemple de columnes imbricades

<div class = "fila" > 
  <div class = "span12" > 
    Nivell 1 de columna
    <div class = "fila" > 
      <div class = "span6" > 
        Nivell 2
      </div>
      <div class = "span6" > 
        Nivell 2
      </div>
    </div>
  </div>
</div>

Enrotlla la teva pròpia graella

A Bootstrap hi ha un grapat de variables per personalitzar el sistema de quadrícula predeterminat de 940 px. Amb una mica de personalització, podeu modificar la mida de les columnes, els seus canals i el contenidor on resideixen.

Dins de la graella

Les variables necessàries per modificar el sistema de graella actualment resideixen totes a preboot.less.

Ara a personalitzar

Modificar la graella significa canviar les tres @grid-*variables i recompilar els fitxers Less.

Bootstrap ve equipat per gestionar un sistema de quadrícula amb fins a 24 columnes; el valor predeterminat és només 16. A continuació es mostra com es veurien personalitzades les variables de la quadrícula en una quadrícula de 24 columnes.

@gridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;   

Un cop recompilat, ja estaràs preparat!

Disseny fix

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>

Distribució de fluids

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>

Encapçalaments i còpia

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: @basefonti @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.

h1. Títol 1

h2. Títol 2

h3. Títol 3

h4. Títol 4

h5. Títol 5

h6. Títol 6

Exemple de paràgraf

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.

Encapçalament d'exemple Té un subtítol...

Misc. elements

Utilitzant èmfasi, adreces i abreviatures

<strong> <em> <address> <abbr>

Quan s'ha d'utilitzar

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 .

Èmfasi en un paràgraf

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.

Adreces

L' <address>element s'utilitza per a la informació de contacte del seu avantpassat més proper o de tot el conjunt de treballs. Aquí teniu dos exemples de com es podria utilitzar:

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.

Abreviatures

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.

Cites de bloc

<blockquote> <p> <small>

Com citar

<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

<quota de bloc>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  <small> Dr. Julius Hibbert </small>
</blockquote>

No ordenat<ul>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at 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

Sense estil<ul.unstyled>

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Integer molestie lorem at 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

Ordenat<ol>

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

Descripciódl

Llistes de descripció

Una llista de descripció és perfecta per definir termes.

Euismod

Vestibulum id ligula porta felis euismod sempre 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.

Codi

<code> <pre>

Proxeneta el teu codi amb estil amb dues etiquetes senzilles. Per obtenir encara més genialitat a través de javascript, introduïu la biblioteca de codi prettify de Google i ja està.

Presentació del codi

El codi, els blocs o només els fragments en línia es poden mostrar amb estil només embolicant l'etiqueta correcta. Per a blocs de codi que abasten diverses línies, utilitzeu l' <pre>element. Per al codi en línia, utilitzeu l' <code>element.

<div>
  <h1>Encapçalament</h1>
  <p>Alguna cosa aquí...</p>
</div>

<div> <h1> Encapçalament </h1> <p> Alguna cosa aquí... </p> </div>
  
  

Etiquetes en línia

<span class="label">

Crida l'atenció o marca qualsevol frase del teu text corporal.

Etiqueta qualsevol cosa

Alguna vegada necessitava un d'aquells nous fantàstics! o Banderes importants en escriure codi? Bé, ara els tens. Aquí teniu el que s'inclou de manera predeterminada:

Graella de mitjans

Mostra miniatures de diferents mides a pàgines amb una empremta HTML baixa i estils mínims.

Miniatures d'exemple

Les miniatures .media-gridpoden ser de qualsevol mida, però funcionen millor quan s'assignen directament al sistema de graella Bootstrap integrat. Les amplades d'imatge com 90, 210 i 330 es combinen amb uns quants píxels de farciment per igualar les mides de les columnes .span2, .span4, i ..span6

Gran

Mitjana

Petit

Codificant-los

Les quadrícules multimèdia són fàcils d'utilitzar i bastant senzilles pel que fa al marcatge. Les seves dimensions es basen exclusivament en la mida de les imatges incloses.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img class = "miniatura" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img class = "miniatura" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

Construcció de taules

<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>.

Exemple: estils de taula per defecte

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.

<taula>
  ...
</taula>

Exemple: ratlles de zebra

Fes una mica de luxe amb les teves taules afegint ratlles de zebra; només has d'afegir la .zebra-stripedclasse.

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>

Exemple: ratlles de zebra amb TableSorter.js

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ó.

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

Estils per defecte

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.

Formes apilades

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.

Mides dels camps del formulari

Personalitzeu qualsevol forma input, select, o textareaamplada afegint només unes quantes classes al vostre marcatge.

A partir de la v1.3.0, hem afegit les classes de mida basades en quadrícula per als elements del formulari. Si us plau, utilitzeu aquests sobre les classes existents .mini, .smalletc.

Botons

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 .primaryclasse blava, una .infoclasse blau clar, una classe verda .successi una classe vermella .danger.

Botons d'exemple

Els estils de botons es poden aplicar a qualsevol cosa amb l' .btnaplicació. Normalment, voldreu aplicar-los només als elements <a>, <button>, i seleccionats <input>. Així és com es veu:

Mides alternatives

Voleu botons més grans o més petits? Teniu-ho!

Estat desactivat

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 .disabledper als enllaços i :disabledper als <button>elements.

Enllaços

Botons

Què es

La nostra barra superior és una barra fixa que allotja el logotip o el nom d'un lloc web, la navegació principal i el formulari de cerca.

Personalitzable

Tots els elements dins, i tota la barra superior també, són opcionals. Podeu triar incloure un logotip/nom, navegació, cerca i un navegador secundari, o qualsevol combinació d'això.

Desplegables inclosos

Com a part de la navegació principal, hem inclòs la possibilitat d'afegir menús desplegables al vostre navegador. Consulteu la navegació secundària de dalt (alineada a la dreta) per veure com es fa. liLes etiquetes desplegables també admeten .activeper mostrar la selecció de pàgina actual.

Pastilles i pastilles

Creeu una navegació secundària senzilla amb un fitxer <ul>. Canvia entre pastilles o pastilles afegint la classe adequada.

Ideal per a subseccions de contingut com les pàgines de configuració del nostre compte i les cronologies d'usuari per canviar entre pàgines de contingut semblant. Disponible en estils amb pestanyes o pastilles.

• Casa
• Perfil
• Missatges
• Configuració
• Contacte
• Menú desplegable
  • Enllaç secundari
  • Alguna cosa més aquí
  • Un altre enllaç

<ul class = "pestanyes" > 
  <li class = "active" ><a href = "#" > Inici </a></li>  
  <li><a href = "#" > Perfil </a></li> 
  <li><a href = "#" > Missatges </a></li> 
  <li><a href = "#" > Configuració </a></li> 
  <li><a href = "#" > Contacte </a></li> 
</ul>

• Casa
• Perfil
• Missatges
• Configuració
• Contacte

<ul class = "píndoles" > 
  <li class = "active" ><a href = "#" > Inici </a></li>  
  <li><a href = "#" > Perfil </a></li> 
  <li><a href = "#" > Missatges </a></li> 
  <li><a href = "#" > Configuració </a></li> 
  <li><a href = "#" > Contacte </a></li> 
</ul>

Pa ratllat

La navegació amb ruta de navegació s'utilitza com una manera de mostrar als usuaris on es troben dins d'una aplicació o d'un lloc, però no per a la navegació principal.

• Casa

• Inici /
• Pàgina del mig

• Inici /
• Pàgina del mig /
• Un altre

• Inici /
• Pàgina del mig /
• Un altre /
• Estàs aquí

<ul class = "breadcrumb" > 
  <li><a href = "#" > Inici </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Pàgina del mig </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Un altre </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Sou aquí </li> 
</ul>

Paginació

Paginació ultra simplista i d'estil mínim inspirada en Rdio. El bloc gran és difícil de perdre, fàcilment escalable i ofereix grans àrees de clic.

<div class = "paginació" > 
  <ul>
    <li class = "anterior desactivat" ><a href = "#" > ← Anterior </a></li>  
    <li class = "active" ><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 = "següent" ><a href = "#" > Següent → </a></li>  
  </ul>
</div>

Alertes bàsiques

.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.

Obteniu el javascript »

Exemple de codi

<div class = "avís de missatge d'alerta" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sant guacamole! </strong> Millor comproveu-vos, no teniu massa bona pinta. </p>
</div>

Bloquejar missatges

.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.

Obteniu el javascript »

Exemple de codi

<div class = "avís de missatge de bloqueig de missatge d'alerta" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> Sant guacamole! Això és un avís! </strong> Millor comproveu-vos, no teniu massa bona pinta. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
  <div class = "accions d'alerta" > 
    <a class = "btn small" href = "#" > Feu aquesta acció </a> <a class = "btn small" href = "#" > O feu això </a>     
  </div>
</div>

Modals

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.

Obteniu el javascript »

Consells d'eines

Els twipsies són molt útils per ajudar un usuari confús i apuntar-los en la direcció correcta.

Obteniu el javascript »

Popovers

Utilitzeu finestres emergents per proporcionar informació subtextual a una pàgina sense afectar el disseny.

Obteniu el javascript »

Començant

Integrar javascript amb la biblioteca Bootstrap és molt fàcil. A continuació repassem els conceptes bàsics i us proporcionem alguns complements fantàstics per començar!

Veure documents de javascript »

Què inclou

Doneu vida a alguns dels components principals de Bootstrap amb nous connectors personalitzats que funcionen amb jQuery i Ender . Us animem a ampliar-los i modificar-los per adaptar-los a les vostres necessitats específiques de desenvolupament.

És necessari javascript?

No! Bootstrap està dissenyat abans que res per ser una biblioteca CSS. Aquest javascript proporciona una capa interactiva bàsica a la part superior dels estils inclosos.

Tanmateix, per a aquells que necessiten javascript, hem proporcionat els connectors anteriors per ajudar-vos a entendre com integrar Bootstrap amb javascript i per oferir-vos una opció ràpida i lleugera per a la funcionalitat bàsica immediatament.

Per obtenir més informació i veure algunes demostracions en directe, consulteu la nostra pàgina de documentació del connector .