Bootstrap回顾1

来源：互联网发布：网络直播的营销手段编辑：程序博客网时间：2024/06/11 08:38

1）基础结构

<!DOCTYPE html> 要求h5类型<html lang="zh-CN"><head>    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> viewport确保适当的绘制和触屏缩放,user-scalable=no禁止缩放，更像原生网页</html>

2）布局

为了增强跨浏览器表现的一致性，我们使用了 Normalize.css
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

<div class="container"></div>

3）栅格系统

<div class="container">  <div class="row">    <div class="col-md-4">.col-md-4</div>    <div class="col-md-4">.col-md-4</div>    <div class="col-md-4">.col-md-4</div>  </div></div>

保证所有列一样高，使用.clearfix：

<div class="clearfix visible-xs-block"></div>

保证所有列一样高，使用偏移.col-md-offset-4：

保证所有列一样高，在最低层级使用.col-*-offset-0 ：

<div class="row">  <div class="col-xs-6 col-sm-4">  </div>  <div class="col-xs-6 col-sm-4">  </div>  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">  </div></div>

保证所有列一样高，使用后推或前拉.col-md-push-* 、.col-md-pull-*：

4）排版

标题， small里面是副标题

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

通过添加 .lead 类可以让段落突出显示
被删除的文本del标签

对齐

<p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p><p class="text-nowrap">No wrap text.</p>

改变文本大小写

<p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">Capitalized text.</p>

缩略语

<abbr title="attribute">attr</abbr>基本缩写<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>首字母缩写

5）表格

基本实例： table
条纹状表格：table-striped
带边框的表格：table-bordered
鼠标悬停：table-hover
响应式表格：将任何 .table 元素包裹在 .table-responsive 元素内

6）表单

基本实例：form-control，form-group

7）按钮

状态：active、disabled
大小、颜色

8）图片

响应式图片：.img-responsive
图片形状：.img-rounded、.img-circle、.img-thumbnail

关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

三角符号
```
<span class="caret"></span>
```
快速浮动：pull-left、pull-right
内容块居中：center-block
清除浮动：clearfix
显示或隐藏：show；hidden，sr-only、sr-only-focusable（隐藏后显示）

阅读全文

0 0