1. Início rápido
1.1 Introdução
Uma estrutura de desenvolvimento front-end, Bootstrap, vem do Twitter e atualmente é uma estrutura de front-end muito popular. Bootstrap é baseado em HTML, CSS e JavaScript. É simples e flexível, tornando o desenvolvimento web mais rápido.
* Framework: um software semiacabado, os desenvolvedores podem desenvolver e simplificar a codificação com base no framework.
beneficiar:
- Define muitos estilos CSS e plug-ins js. Nossos desenvolvedores podem usar diretamente esses estilos e plug-ins para obter efeitos de página ricos.
- Layout responsivo.
- O mesmo conjunto de páginas pode ser compatível com dispositivos com resoluções diferentes.
1.2 Modelo de introdução
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery.min.js" ></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js" ></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>1.3 Documentos de referência
2. Sistema de grade de layout responsivo
2.1 Início rápido
Implementação: Depende do sistema de grade: Divida uma linha igualmente em 12 grades e você poderá especificar quantas grades o elemento ocupa.
Passos:
1. Defina o contêiner. Equivalente à tabela anterior e
classificação de contêineres:
- recipiente: deixe em branco em ambos os lados
- container-fluid: Cada dispositivo tem 100% de largura
2. Defina linhas. Equivalente ao estilo tr anterior: linha
3. Defina o elemento. Especifique o número de grades ocupadas por este elemento em diferentes dispositivos. Estilo: código do equipamento col-número de grades
Código do equipamento:
- .xs: Celular com tela ultrapequena (<768px):
- .sm: tablet de tela pequena (≥768px)
- .md: Monitor de desktop de tela média (≥992px)
- .lg: Monitor de mesa grande de tela grande (≥1200px)|
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery.min.js" ></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js" ></script>
</head>
<body>
<h1>你好，世界！</h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 col-sm-2 innner">栅格</div>
<div class="col-lg-1 col-sm-2 innner">栅格</div>
<div class="col-lg-1 col-sm-2 innner">栅格</div>
<div class="col-lg-1 col-sm-2 innner">栅格</div>
<div class="col-lg-1 col-sm-2 innner">栅格</div>
<div class="col-lg-1 col-sm-2 innner">栅格</div>
<div class="col-lg-1 col-sm-2 innner">栅格</div>
<div class="col-lg-1 col-sm-2 innner">栅格</div>
<div class="col-lg-1 col-sm-2 innner">栅格</div>
<div class="col-lg-1 col-sm-2 innner">栅格</div>
<div class="col-lg-1 col-sm-2 innner">栅格</div>
<div class="col-lg-1 col-sm-2 innner">栅格</div>
</div>
</div>
</body>
</html>2.2 Principais assuntos
Perceber:
- Se o número de células em uma linha exceder 12, as partes excedentes serão automaticamente agrupadas.
- As propriedades da classe raster são compatíveis com versões superiores. A classe grid é adequada para dispositivos com larguras de tela maiores ou iguais ao tamanho do ponto de interrupção.
- Se a largura real do dispositivo for menor que o valor mínimo do código do dispositivo que define o atributo da classe de grade, um elemento preencherá a linha inteira.
3. Estilo CSS global
Botão 3.1
<div>
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
</div>3.2 Fotos
<img src="..." class="img-responsive" alt="Responsive image">Formato da imagem
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">3.3 Tabela
<table class="table">
...
</table>3.4 Formulário
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>