Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap é un conxunto de ferramentas de Twitter deseñado para iniciar o desenvolvemento de aplicacións web e sitios.
Inclúe CSS e HTML base para tipografía, formularios, botóns, táboas, cuadrículas, navegación e moito máis.
Alerta de nerd: Bootstrap está construído con Less e foi deseñado para funcionar desde o primeiro momento tendo en conta os navegadores modernos.
Para o inicio máis rápido e sinxelo, só tes que copiar este fragmento na túa páxina web.
Un fan de usar Less? Non hai problema, só clona o repositorio e engade estas liñas:
Descarga, fork, tira, problemas de ficheiros e moito máis co repositorio oficial de Bootstrap en Github.
Actualmente v1.3.0
Os enxeñeiros de Twitter usaron historicamente case todas as bibliotecas coas que estaban familiarizados para cumprir os requisitos do front-end. Bootstrap comezou como unha resposta aos retos que se presentaban. Coa axuda de moitas persoas fantásticas, Bootstrap creceu significativamente.
Ler máis en dev.twitter.com ›
Bootstrap está probado e admitido nos principais navegadores modernos como Chrome, Safari, Internet Explorer e Firefox.
Bootstrap vén completo con CSS compilado, non compilado e modelos de exemplo.
O sistema de grade predeterminado que se proporciona como parte de Bootstrap é unha grade de 16 columnas de 940 píxeles de ancho. É un sabor do popular sistema de reixa 960, pero sen a marxe/recheo adicional nos lados esquerdo e dereito.
Como se mostra aquí, pódese crear un deseño básico con dúas "columnas", cada unha abarcando un número das 16 columnas fundamentais que definimos como parte do noso sistema de cuadrícula. Vexa os exemplos a continuación para obter máis variacións.
- <div class = "fila" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Aniña o teu contido se é necesario creando un .row
dentro dunha columna existente.
- <div class = "fila" >
- <div class = "span12" >
- Nivel 1 da columna
- <div class = "fila" >
- <div class = "span6" >
- Nivel 2
- </div>
- <div class = "span6" >
- Nivel 2
- </div>
- </div>
- </div>
- </div>
En Bootstrap hai un puñado de variables para personalizar o sistema de grade predeterminado de 940px. Cun pouco de personalización, pode modificar o tamaño das columnas, as súas cunetas e o recipiente no que residen.
As variables necesarias para modificar o sistema de reixa residen actualmente en variables.less
.
Variable | Valor predeterminado | Descrición |
---|---|---|
@gridColumns |
16 | O número de columnas dentro da grade |
@gridColumnWidth |
40 píxeles | O ancho de cada columna dentro da grella |
@gridGutterWidth |
20 píxeles | O espazo negativo entre cada columna |
@siteWidth |
Suma calculada de todas as columnas e canlóns | Usamos unha coincidencia básica para contar o número de columnas e cunetas e establecer o ancho da .fixed-container() mestura. |
Modificar a grade significa cambiar as tres @grid-*
variables e recompilar os ficheiros Less.
Bootstrap vén equipado para manexar un sistema de reixa con ata 24 columnas; o valor predeterminado é só 16. Así é como se verían as súas variables de grade personalizadas nunha grade de 24 columnas.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Unha vez recompilado, estarás listo!
O deseño predeterminado e sinxelo de 940 píxeles de ancho e centrado para case calquera sitio web ou páxina proporcionado por un único ficheiro <div.container>
.
- <corpo>
- <div class = "contedor" >
- ...
- </div>
- </corpo>
Unha estrutura de páxina fluída alternativa e flexible con anchos mínimos e máximos e unha barra lateral esquerda. Ideal para aplicacións e documentos.
- <corpo>
- <div class = "container-fluid" >
- <div class = "barra lateral" >
- ...
- </div>
- <div class = "contido" >
- ...
- </div>
- </div>
- </corpo>
Unha xerarquía tipográfica estándar para estruturar as túas páxinas web.
Toda a grella tipográfica baséase en dúas variables Menos do noso ficheiro variables.less: @basefont
e @baseline
. O primeiro é o tamaño da fonte base empregado en todo e o segundo é a altura da liña base.
Usamos esas variables, e algunhas matemáticas, para crear as marxes, recheos e alturas de liña de todo o noso tipo e moito máis.
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.
Usando énfases, enderezos e abreviaturas
<strong>
<em>
<address>
<abbr>
As etiquetas de énfase ( <strong>
e <em>
) deben usarse para indicar importancia ou énfase adicional dunha palabra ou frase en relación coa súa copia circundante. Utilízao <strong>
para a importancia e <em>
para a énfase .
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, a pharetra augue.
Nota: aínda está ben usar <b>
e <i>
etiquetas en HTML5 e non teñen que ter estilos en negra e cursiva, respectivamente (aínda que se hai un elemento máis semántico, utilízao). <b>
está destinado a resaltar palabras ou frases sen transmitir importancia adicional, mentres que <i>
é principalmente para voz, termos técnicos, etc.
O <address>
elemento úsase para a información de contacto do seu antepasado máis próximo ou de todo o traballo. Aquí tes dous exemplos de como se pode usar:
Nota: cada liña <address>
debe rematar cun salto de liña ( <br />
) ou estar envolta nunha etiqueta de nivel de bloque (por exemplo, <p>
) para estruturar correctamente o contido.
Para abreviaturas e acrónimos, use a <abbr>
etiqueta ( <acronym>
está obsoleto en HTML5 ). Coloque o formulario abreviado dentro da etiqueta e estableza un título para o nome completo.
<blockquote>
<p>
<small>
<blockquote>
Para incluír unha cita en bloque, envolve <p>
e <small>
etiqueta. Usa o <small>
elemento para citar a túa fonte e terás un guión em —
antes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Doutor Julius Hibbert
- <cota de bloque>
- <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>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Proxeneta o teu código con estilo con dúas etiquetas sinxelas. Para obter aínda máis fantásticos a través de javascript, introduza a biblioteca de código de Google prettify e xa está.
O código, os bloques ou só fragmentos en liña pódense mostrar con estilo só envolvendo a etiqueta correcta. Para bloques de código que abranguen varias liñas, use o <pre>
elemento. Para o código en liña, use o <code>
elemento.
Elemento | Resultado |
---|---|
<code> |
Nunha liña de texto como esta, o teu código envolto parecerase a este <html> elemento. |
<pre> |
<div> <h1>Título</h1> <p>Algo aquí mesmo...</p> </div> Nota: Asegúrese de manter o código dentro das |
<pre class="prettyprint"> |
Usando a biblioteca google-code-prettify, os teus bloques de código obteñen un estilo visual lixeiramente diferente e un resaltado de sintaxe automático. <div> <h1> Título </h1> <p> Algo aquí mesmo... </p> </div> Descarga google-code-prettify e consulta o readme para saber como usalo. |
<span class="label">
Chama a atención ou marca calquera frase do teu texto corporal.
Algunha vez necesitou un deses novos novos! ou Bandeiras importantes ao escribir código? Pois agora tes. Aquí tes o que se inclúe por defecto:
Etiqueta | Resultado |
---|---|
<span class="label">Default</span> |
Por defecto |
<span class="label success">New</span> |
Novo |
<span class="label warning">Warning</span> |
Aviso |
<span class="label important">Important</span> |
Importante |
<span class="label notice">Notice</span> |
Aviso |
Mostra miniaturas de diferentes tamaños en páxinas cunha pegada HTML baixa e estilos mínimos.
As miniaturas .media-grid
poden ser de calquera tamaño, pero funcionan mellor cando se asignan directamente ao sistema de grade Bootstrap integrado. Os anchos das imaxes como 90, 210 e 330 combínanse cuns poucos píxeles de recheo para igualar os tamaños das columnas .span2
, .span4
, e ..span6
As cuadrículas multimedia son fáciles de usar e bastante sinxelas no lado das marcas. As súas dimensións baséanse exclusivamente no tamaño das imaxes incluídas.
- <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>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
As táboas son xeniais, para moitas cousas. As táboas xeniais, porén, necesitan un pouco de amor para as marcas para ser útiles, escalables e lexibles (a nivel de código). Aquí tes algúns consellos para axudar.
Engade sempre as cabeceiras das túas columnas de <thead>
forma que a xerarquía sexa <thead>
> <tr>
> <th>
.
Do mesmo xeito que as cabeceiras das columnas, todo o contido do corpo da túa táboa debería estar envolto nun formato <tbody>
para que a túa xerarquía sexa <tbody>
> <tr>
> <td>
.
Todas as táboas terán un estilo automaticamente só cos bordos esenciais para garantir a lexibilidade e manter a estrutura. Non é necesario engadir clases ou atributos adicionais.
# | Nome | Apelido | Lingua |
---|---|---|---|
1 | Algunhas | Un | inglés |
2 | Joe | Sixpack | inglés |
3 | Stu | Dent | Código |
- <táboa>
- ...
- </táboa>
Para as táboas que requiren máis datos en espazos máis reducidos, usa o sabor condensado que reduce o recheo á metade. Tamén se pode usar xunto con bordos e raias de cebra, igual que os estilos de táboa predeterminados.
# | Nome | Apelido | Lingua |
---|---|---|---|
1 | Algunhas | Un | inglés |
2 | Joe | Sixpack | inglés |
3 | Stu | Dent | Código |
Fai que as túas mesas se vexan un pouco máis elegantes redondeando as súas esquinas e engadindo bordos por todos os lados.
# | Nome | Apelido | Lingua |
---|---|---|---|
1 | Algunhas | Un | inglés |
2 | Joe | Sixpack | inglés |
3 | Stu | Dent | Código |
- <table class = "bordered-table" >
- ...
- </táboa>
Déixate un pouco coas túas táboas engadindo raias de cebra; só tes que engadir a .zebra-striped
clase.
# | Nome | Apelido | Lingua |
---|---|---|---|
1 | Algunhas | Un | inglés |
2 | Joe | Sixpack | inglés |
3 | Stu | Dent | Código |
abrangue 4 columnas | |||
abrangue 2 columnas | abrangue 2 columnas |
Nota: o Zebra-striping é unha mellora progresiva que non está dispoñible para navegadores máis antigos como IE8 e anteriores.
- <table class = "raias de cebra" >
- ...
- </táboa>
Tomando o exemplo anterior, melloramos a utilidade das nosas táboas proporcionando funcionalidades de ordenación mediante jQuery e o complemento Tablesorter . Fai clic na cabeceira de calquera columna para cambiar a ordenación.
# | Nome | Apelido | Lingua |
---|---|---|---|
2 | Joe | Sixpack | inglés |
3 | Stu | Dent | Código |
1 | O teu | Un | inglés |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( función () {
- $ ( "táboa#sortTableExample" ). clasificador de táboas ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "raias de cebra" >
- ...
- </táboa>
Todos os formularios reciben estilos predeterminados para presentalos dun xeito lexible e escalable. Ofrécense estilos para entradas de texto, listas de selección, áreas de texto, botóns de opción e caixas de verificación e botóns.
Engade .form-stacked
ao HTML do teu formulario e terás etiquetas enriba dos seus campos en lugar de á esquerda. Isto funciona moi ben se os teus formularios son curtos ou tes dúas columnas de entradas para os formularios máis pesados.
Personaliza calquera formulario input
, select
, ou textarea
ancho engadindo só algunhas clases ao teu marcado.
A partir da versión 1.3.0, engadimos as clases de tamaño baseadas en grade para os elementos do formulario. Use estes sobre as clases existentes .mini
, .small
, etc.
Como convención, os botóns úsanse para accións mentres que as ligazóns úsanse para os obxectos. Por exemplo, "Descargar" pode ser un botón e "actividade recente" pode ser unha ligazón.
Todos os botóns teñen por defecto un estilo gris claro, pero pódense aplicar unha serie de clases funcionais para diferentes estilos de cores. Estas clases inclúen unha .primary
clase azul, unha .info
clase celeste, unha clase verde .success
e unha clase vermella .danger
.
Os estilos de botón pódense aplicar a calquera cousa que teña .btn
aplicada. Normalmente quererá aplicalos só a elementos <a>
, <button>
, e seleccionados <input>
. Así é como se ve:
Queres botóns máis grandes ou pequenos? ¡Así!
Para os botóns que non están activos ou están desactivados pola aplicación por un motivo ou outro, usa o estado desactivado. Iso é .disabled
para ligazóns e :disabled
para <button>
elementos.
.alert-message
One-line messages for highlighting the failure, possible failure, or success of an action. Particularly useful for forms.
- <div class="alert-message warning">
- <a class="close" href="#">×</a>
- <p><strong>Holy guacamole!</strong> Best check yo self, you’re not looking too good.</p>
- </div>
.alert-message.block-message
For messages that require a bit of explanation, we have paragraph style alerts. These are perfect for bubbling up longer error messages, warning a user of a pending action, or just presenting information for more emphasis on the page.
- <div class="alert-message block-message warning">
- <a class="close" href="#">×</a>
- <p><strong>Holy guacamole! This is a warning!</strong> Best check yo self, you’re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
- <div class="alert-actions">
- <a class="btn small" href="#">Take this action</a> <a class="btn small" href="#">Or do this</a>
- </div>
- </div>
Modals—dialogs or lightboxes—are great for contextual actions in situations where it’s important that the background context be maintained.
One fine body…
Twipsies are super useful for aiding a confused user and pointing them in the right direction.
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.
Use popovers to provide subtextual information to a page without affecting layout.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Integrating javascript with the Bootstrap library is super easy. Below we go over the basics and provide you with some awesome plugins to get you started!
Bring some of Bootstrap's primary components to life with new custom plugins that work with jQuery and Ender. We encourage you to extend and modify them to fit your specific development needs.
File | Description |
---|---|
bootstrap-modal.js | Our Modal plugin is a super slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter. |
bootstrap-alerts.js | The alert plugin is a super tiny class for adding close functionality to alerts. |
bootstrap-dropdown.js | This plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations. |
bootstrap-scrollspy.js | The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar. |
bootstrap-buttons.js | The ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar. |
bootstrap-tabs.js | This plugin adds quick, dynamic tab and pill functionality for cycling through local content. |
bootstrap-twipsy.js | Based on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage! |
bootstrap-popover.js | The popover plugin provides a simple interface for adding popovers to your application. It extends the boostrap-twipsy.js plugin, so be sure to grab that file as well when including popovers in your project! |
Nope! Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.
However, for those who do need javascript, we've provided the plugins above to help you understand how to integrate Bootstrap with javascript and to give you a quick, lightweight option for the basic functionality right away.
For more information and to see some live demos, please refer to our plugin documentation page.
Bootstrap was built from Preboot, an open-source pack of mixins and variables to be used in conjunction with Less, a CSS preprocessor for faster and easier web development.
Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.
Use this option to make full use of Bootstrap’s Less variables, mixins, and nesting in CSS via javascript in your browser.
- <link rel="stylesheet/less" href="less/bootstrap.less" media="all" />
- <script src="js/less-1.1.3.min.js"></script>
Not feeling the .js solution? Try the Less Mac app or use Node.js to compile when you deploy your code.
Here are some of the highlights of what’s included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.
Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you’re set.
- // Links
- @linkColor: #8b59c2;
- @linkColorHover: darken(@linkColor, 10);
- // Grays
- @black: #000;
- @grayDark: lighten(@black, 25%);
- @gray: lighten(@black, 50%);
- @grayLight: lighten(@black, 70%);
- @grayLighter: lighten(@black, 90%);
- @white: #fff;
- // Accent Colors
- @blue: #08b5fb;
- @green: #46a546;
- @red: #9d261d;
- @yellow: #ffc40d;
- @orange: #f89406;
- @pink: #c3325f;
- @purple: #7a43b6;
- // Baseline grid
- @basefont: 13px;
- @baseline: 18px;
Less also provides another style of commenting in addition to CSS’s normal /* ... */
syntax.
- // This is a comment
- /* This is also a comment */
Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They’re great for vendor prefixed properties like box-shadow
, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.
- #font {
- .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
- }
- .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: @size;
- font-weight: @weight;
- line-height: @lineHeight;
- }
- ...
- }
- #gradient {
- ...
- .vertical (@startColor: #555, @endColor: #333) {
- background-color: @endColor;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror
- background-image: -moz-linear-gradient(@startColor, @endColor); // FF 3.6+
- background-image: -ms-linear-gradient(@startColor, @endColor); // IE10
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
- background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+
- background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
- background-image: linear-gradient(@startColor, @endColor); // The standard
- }
- ...
- }
Get fancy and perform some math to generate flexible and powerful mixins like the one below.
- // Griditude
- @gridColumns: 16;
- @gridColumnWidth: 40px;
- @gridGutterWidth: 20px;
- @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
- // Make some columns
- .columns(@columnSpan: 1) {
- width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
- }
After modifying the .less
files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.
Method | Steps |
---|---|
Node with makefile | Install the less command line compiler with npm by running the following command: $ npm install lessc Once installed just run Additionally, if you have watchr installed, you may run |
Javascript | Download the latest Less.js and include the path to it (and Bootstrap) in the
To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage. |
Command line | If you already have the less command line tool installed, simply run the following command: $ lessc ./lib/bootstrap.less > bootstrap.css Be sure to include |
Less Mac app | A aplicación non oficial para Mac mira directorios de ficheiros .less e compila o código en ficheiros locais despois de cada gardado dun ficheiro .less observado. Se queres, podes cambiar as preferencias na aplicación para a minificación automática e en que directorio acaban os ficheiros compilados. |