O Bootstrap é um simples e flexível HTML5 e HTML5 e HTML, CSS e JavaScript baseado em HTML e JavaScript para criar páginas de front-end da Web. Possui curva de aprendizado amigável, excelente compatibilidade, design responsivo, 12 grades de grade, documentação do assistente de estilo, plug-in de jQuery personalizado, biblioteca de classe completa, com base em menos e outros recursos. O Bootstrap torna o desenvolvimento da Web mais rápido e fácil.
1. Download de bootstrap
Site oficial: http://getbootstrap.com/; Introdução com iniciantes: http://getbootstrap.com/getting-started/
Podemos baixar o código -fonte bootstrap e bootstrap no site oficial. Se você não deseja baixar, também pode usar o CDN fornecido pelo Bootstrap.
2.Bootstrap File Free
bootstrap/
├── CSS/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── JS/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fontes/
├── glificons-halflings-regular.eot
├── glificons-halflings-regular.svg
├── glificons-halflings-regular.ttf
├── glificons-halflings-regular.woff
└── glifos-halflings-regular.woff2
3. Modelo padrão HTML da Bootstrap
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <!-- Run the latest rendering mode in IE --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Initialize mobile browsing display, width=device-width width is equal to the width of the mobile device, escala inicial = 1 Defina a escala de escala-> <meta name = "viewport" content = "width = largura do dispositivo, escala inicial = 1"> <title> modelo html de bootstrap de bootstrap </title> <!-Introduce o núcleo CSS do Bootstrap-> <link Rel = "Stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <!-seu próprio arquivo de estilo-> <link href = "css/your-syle.css" rel = "Stylesheet"> <! e abaixo dos navegadores. Se você não precisar, pode removê-lo-> <!-[se LT ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </sCript> <script src = "https://oss.maxcdn.com/libs/replge.js/1.4.2/replge.minmin.js"> </script> <! [endif]-> </s Head> <body> <h1> Olá, mundo! você deve primeiro ligar para jQuery-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </sCript> <!-incluindo todos os plugins JS para bootstrap ou plugins JS que podem ser usados conforme necessário-> <Script src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>
4. Título do Bootstrap
Como as páginas HTML comuns, o Bootstrap define títulos usando as tags H1 a H6, mas o bootstrap substitui seu estilo padrão, para que o efeito que ele seja exibido em todos os navegadores seja o mesmo. As regras específicas da definição são mostradas na tabela a seguir:
<!--Title in Bootstrap --><h1>Title 1</h1><h2>Title 2</h2><!--Bootstrap uses the <small> tag to create subtitles --><h1>Title 1<small>Subtitle </small></h1><h2>Title 2<small>Subtitle </small></h2><!--Bootstrap allows non-title elements and titles to use the same Estilo -> <div> Título 1 </div> <div> Título 2 </div> <div> Título 3 </div>
Nota: As alturas da linha de legenda são 1, o peso da fonte não é ousado, a cor é cinza (#999); As legendas de H1 ~ H3 são 65% do título e as legendas de H4 ~ H6 são 75% do título; Consulte as linhas 407 ~ 443 no arquivo bootstrap.css para obter detalhes.
5.Cootstrap Conteúdo
1) Enfatize o conteúdo
Em projetos reais, para alguns textos importantes, as peças que devem ser destacadas serão tratadas em outro estilo. O Bootstrap também fez algum processamento leve nesta parte.
Ao adicionar o nome da classe ".Lead" para destacar um parágrafo P, sua função é aumentar o tamanho da fonte de texto, negrito o texto e também lidar com a altura e margem da linha de acordo. O uso é o seguinte:
<p> Texto normal </p>
<p> Texto da Imperatriz </p>
2) Expresse ênfase através da cor
Por exemplo:
<!-O texto normal abaixo é marrom->
<p> Texto normal </p>
3) ousado e itálico
O negrito é usado para usar etiqueta B ou forte; O itálico é usado para usar EM-label ou i-label.
<!-negrito-> <p> Texto normal <b> BOLD </b> Texto normal </p> <p> Texto normal <strong> BOLD </strong> Texto normal </p> <!-itálico-> <p> Texto normal <em> TEXTO NORMAL </em> Texto normal </p> <p> Texto norma
4) Alinhamento de texto
O Bootstrap controla o estilo de texto de alinhamento, definindo quatro nomes de classe:
<p> Estou à esquerda </p> <p> Estou no centro </p> <p> Estou à direita </p> <p> Estou alinhado nas duas extremidades </p>
6. LISTA DO SOBRECO
O Bootstrap fornece seis formulários de listagem de acordo com seu uso usual: lista comum, lista ordenada, lista de descrição de pontos, lista embutida, lista de definições e lista de definições horizontais.
1) Lista normal
<!-Lista normal-> <ul> <li> Lista normal 1 </li> <li> Lista normal 2 </li> </ul>
2) Lista ordenada
<!-Lista classificada-> <Ol> <li> Lista 1 </li> <li> Lista classificada 2 </li> </ol> <!-Lista classificada aninhada-> <ol> <li> Lista de classificação 1 </li> <li> Lista 3 <li> <li>
3) Vá para a lista
Adicione um nome de classe ".list-instyled" à lista não ordenada, para que o estilo de lista padrão possa ser removido.
<ol> <li> Lista classificada 1 </li> <li> Lista 2 </li> </ol> </li> <li>
4) Lista embutida (nascida para fazer navegação horizontal)
Assim como a lista destinada, a lista em linha é implementada adicionando o nome da classe ".list-inline", troque a lista vertical com uma lista horizontal e remova as balas (números) para manter a tela horizontal.
<ul> <li> Entrada da barra de navegação 1 </li> <li> Entrada da barra de navegação 2 </li> </ul>
5) Lista de definições
A lista de definições de bootstrap simplesmente ajusta os efeitos de espaçamento, margens e negrito de fontes.
<dl> <dt> beijing </dt> <dd> A capital da China. </dd> <dt> shanghai </dt> <dd> Cidade central nacional, megacidade. </dd> </dl>
6) Lista de definição horizontal
A lista de definições horizontais é como uma lista em linha. O Bootstrap pode adicionar o nome da classe ".dl--Horizontal" à tag DL para obter efeito de exibição horizontal.
<dl> <dt> beijing </dt> <dd> A capital da China. </dd> <dt> shanghai </dt> <dd> Cidade central nacional, megacidade. </dd> </dl>
7. Tabela de Bootstrap
O Bootstrap fornece às tabelas 1 estilo básico e 4 estilos adicionais e uma tabela responsiva. Os detalhes são os seguintes:
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>Basic Table</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body> <h3>Basic Tabela </h3> <!-Código fonte principal para visualizar a linha de arquivo bootstrap.css. Célula </td> </tr> <tr> <td> célula de tabela </td> <td> célula da tabela </td> <td> célula de tabela </td> </tr> </tbody> </ tabela> <h3> tabela de cruzamento da tabela </h3) Título </th> <th> título da tabela </th> <the> título da tabela </th> </tr> </thead> <tbody> <tr> <td> célula de tabela </td> <td> célula de tabela </td> <td> tabela de tabela </td> </tr> </tbody </tbody <tbody> <tr> <tr> <T. Célula </td> <td> célula de tabela </td> <td> célula de tabela </td> </tr> <tr> <td> célula de tabela </td> <td> célula de tabela </td> <td> tabela célula </td> </tr> </toder> </tabela <h3> tabela com borda </h3> 1464--> <table> <thead> <tr><th>Table Title</th><th>Table Title</th><th>Table Title</th></tr> </thead> <tbody> <tr><td>Table Cell</td><td>Table Cell</td></tr> </tr> </tbody> </tbody> <tr><td>Table Cell</td><td>Table Célula </td> </tr> <tr> <td> célula de tabela </td> <td> célula de tabela </td> </tr> </tbody> </ tabela> <h3> mouse suspende a tabela destacada </h3> <!-código-fonte principal para visualizar bootstrap.css line 1469 ~ line 1472-> <! title</th><th>Table title</th><th>Table title</th></tr> </tbody> <tbody> <tr><td>Table cell</td><td>Table cell</td><td>Table cell</td></tr> <tr><td>Table cell</td><td>Table cell</td></tr> </tbody> </table> <H3> Tabela compacta </h3> <!-O código-fonte principal vê a linha de arquivo bootstrap.css 1442 ~ linha 1449-> <table> <thead> <tr> <th> título da tabela </th> <the> título </th> <Th> título <//th> <//</th> <tbody> <th> <Th> título </th> </th> </thead> <t. célula </td> <td> célula da tabela </td> </tr> <tr> <td> célula de tabela </td> <td> célula de tabela </td> <td> célula de tabela </td> </tr> </tbody> </ tabela> <H3> Responsive tabela </h3> <!-bootsTrap. A tabela colocada neste contêiner tem um efeito responsivo-> <div> <table> <Thead> <tr> <th> título da tabela </th> <th> título da tabela </th> <the> título da tabela </th> </tr> </thead> <tbody> <ttr> <td> tabela </td> <td> tabela </td> célula </td> <td> célula de tabela </td> </tr> </tbody> </body> </div> </body> </html>
Esta parte do código contém as tabelas comumente usadas no bootstrap, e as renderizações são as seguintes:
O Bootstrap também fornece cinco nomes de classe diferentes para o elemento de linha TR da tabela (para o código -fonte correspondente, verifique a linha 1484 da linha 1583 no arquivo bootstrap.css). Cada nome de classe controla as diferentes cores de fundo das linhas. A descrição específica é mostrada na tabela a seguir:
É muito simples de usar. Você só precisa adicionar o nome da classe correspondente da tabela acima ao elemento para alcançar o efeito:
<tr> <td>… </td> </tr>
Perceber:
1. Para alcançar um estado suspenso, você precisa adicionar a classe de desfiladeiro à tag <table>.
2. Além de ".Active", ao usar os outros quatro nomes de classes e ".table hover", o bootstrap também faz as configurações de estilo correspondentes para esses estilos no estado flutuante. Portanto, se você precisar adicionar outros estilos de cores ao elemento TR, também deverá fazer ajustes correspondentes na tabela ".table hover".
Se você ainda deseja aprender em profundidade, clique aqui para aprender e anexar dois tópicos interessantes a você: Bootstrap Learning Tutorial Bootstrap Tutorial Practical Tutorial
Série de artigos:
A primeira vez que entrei em contato com o Magical Bootstrap Grid System //www.vevb.com/article/89333.htm
A primeira vez que entrei em contato com o Magical Bootstrap Form //www.vevb.com/article/89330.htm
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.