Bootstrap

1、概念

Bootstrap是Twitter公司开发的,基于HTML、CSS和JavaScript的前端框架。它为实现Web应用程序的快速开发,提供了一套前端工具包。

它可以很方便地实现响应式布局,以及移动设备优先的样式。

2、特性

  • 响应式设计
  • 栅格布局
  • 完整的类库
  • jQuery插件

3、下载

一共有三种:

  1. 用于生产环境的 Bootstrap
  2. Bootstrap 源码
  3. Sass

这里我们使用用于生产环境的 Bootstrap,点击下载Bootstrap压缩包

需要注意的是,由于Bootstrap依赖jQuery,所以我们还需要单独下载jQuery

这里可以使用CDN:Microsoft CDN

4、Hello Bootstrap

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Hello Bootstrap</title>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <button class="btn btn-info">Hello Bootstrap</button>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

依次引入css样式、jQuery和js文件

5、全局样式

Bootstrap提供了大量的全局样式,基本的HTML元素均可以通过 class 设置样式并得到增强效果。

5-1、标题

标题:h1 ~ h6,对应的是 .h1 ~ .h6

副标题:small,对应的是 .small

  • h1:36px
  • h2:30px
  • h3:24px
  • h4:18px
  • h5:14px
  • h6:12px
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <h1>标题1<small>副标题</small></h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    <span class="h1">标题1<span class="small">副标题</span></span>
    <span class="h2">标题2</span>
    <span class="h3">标题3</span>
    <span class="h4">标题4</span>
    <span class="h5">标题5</span>
    <span class="h6">标题6</span>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

5-2、对齐

左对齐:.text-left

居中对齐:.text-center

右对其:.text-right

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Align</title>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div class="text-left"><span>这是一句话</span></div>
    <div class="text-center"><span>这是一句话</span></div>
    <div class="text-right"><span>这是一句话</span></div>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

5-3、大小写

小写:.text-lowercase

大写:.text-uppercase

首字母大写:.text-capitalize

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Transform</title>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <span class="text-lowercase">BOOTSTRAP</span>
    <span class="text-uppercase">bootstrap</span>
    <span class="text-capitalize">bootstrap</span>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

5-4、表格

基础表格:.table

带边框:.table-bordered

条纹:.table-striped

悬停变色:.table-hover

紧凑:.table-condensed

还可以附带颜色样式,用于行或格子等HTML元素上

激活状态:.active

成功:.success

信息:.info

警告:.warning

危险:.danger

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Table</title>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
        * {margin:10px;}
    </style>
</head>
<body>
    <table class="table table-bordered table-striped table-hover">
        <thead>
            <th>1列</th>
            <th>2列</th>
            <th>3列</th>
        </thead>
        <tbody>
            <tr>
                <td>1行1表格</td>
                <td>1行2表格</td>
                <td>1行3表格</td>
            </tr>
            <tr class="success">
                <td>2行1表格</td>
                <td>2行2表格</td>
                <td>2行3表格</td>
            </tr>
            <tr class="info">
                <td>3行1表格</td>
                <td>3行2表格</td>
                <td>3行3表格</td>
            </tr>
            <tr class="warning">
                <td>4行1表格</td>
                <td>4行2表格</td>
                <td>4行3表格</td>
            </tr>
            <tr class="danger">
                <td>5行1表格</td>
                <td>5行2表格</td>
                <td>5行3表格</td>
            </tr>
            <tr class="active">
                <td>6行1表格</td>
                <td>6行2表格</td>
                <td>6行3表格</td>
            </tr>
            <tr>
                <td>7行1表格</td>
                <td>7行2表格</td>
                <td>7行3表格</td>
            </tr>
            <tr>
                <td>8行1表格</td>
                <td>8行2表格</td>
                <td>8行3表格</td>
            </tr>
        </tbody>
    </table>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

6、表单

表单组:.form-group

样式标签:.control-label

样式控件:.form-control

小输入框:.input-sm

大输入框:.input-lg

成功提示:.has-success

警告提示:.has-warning

异常提示:.has-error

表单中的控件在一行:.form-inline

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Form</title>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
        form {margin:10px;}
    </style>
</head>
<body>
    <form>
        <div class="form-group">
            <label class="control-label">小输入框:</label>
            <input class="form-control input-sm" placeholder="请输入" />
        </div>
        <div class="form-group">
            <label class="control-label">普通输入框:</label>
            <input class="form-control" placeholder="请输入" />
        </div>
        <div class="form-group">
            <label class="control-label">大输入框:</label>
            <input class="form-control input-lg" placeholder="请输入" />
        </div>
        <div class="form-group">
            <label class="control-label">下拉框:</label>
            <select class="form-control">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </div>
        <div class="form-group">
            <label class="control-label">文本域:</label>
            <textarea class="form-control"></textarea>
        </div>
        <div class="form-group has-success">
            <label class="control-label">成功:</label>
            <input class="form-control" placeholder="请输入" />
        </div>
        <div class="form-group has-warning">
            <label class="control-label">警告:</label>
            <input class="form-control" placeholder="请输入" />
        </div>
        <div class="form-group has-error">
            <label class="control-label">异常:</label>
            <input class="form-control" placeholder="请输入" />
        </div>
    </form>

    <form class="form-inline">
        <div class="form-group">
            <label class="control-label">输入框1:</label>
            <input class="form-control" />
        </div>
        <div class="form-group">
            <label class="control-label">输入框2:</label>
            <input class="form-control" />
        </div>
        <div class="form-group">
            <label class="control-label">输入框3:</label>
            <input class="form-control" />
        </div>
    </form>

    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

7、按钮

按钮:.btn

按钮变链接:.btn-link

大按钮:.btn-lg

小按钮:.btn-sm

宽度100%:.btn-block

默认样式:.btn-default

首选:.btn-primary

信息:.btn-info

警告:.btn-warning

危险:.btn-danger

成功:.btn-success

被按下:.active

被禁用:.disabled

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Button</title>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <style type="text/css">
        * {margin:10px;}
    </style>
</head>
<body>
    <button class="btn btn-default">按钮-默认样式</button>
    <button class="btn btn-default btn-lg">大按钮</button>
    <button class="btn btn-default btn-sm">小按钮</button>
    <button class="btn btn-default active">按钮-被按下(激活)</button>
    <button class="btn btn-default disabled">按钮-被禁用</button>
    <hr />
    <button class="btn btn-default btn-block">按钮-宽度100%</button>
    <hr />
    <button class="btn btn-link">按钮-链接</button>
    <a class="btn btn-default" href="javascript:;">链接-按钮</a>
    <hr />
    <button class="btn btn-primary">按钮-首选</button>
    <button class="btn btn-info">按钮-信息</button>
    <button class="btn btn-warning">按钮-警告</button>
    <button class="btn btn-danger">按钮-危险</button>
    <button class="btn btn-success">按钮-成功</button>

    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

8、ViewPort

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
</head>

设置浏览缩放控制

参数说明:

initial-scale:初始的缩放比例

maximum-scale:允许用户缩放到的最大比例

minimum-scale:允许用户缩放到的最小比例

user-scalable:是否允许用户手动缩放

var isRetina = true;

var metaEl = document.createElement('meta');
// 是否是视网膜屏
var scale = isRetina ? 0.5 : 1;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

var docEl = document.documentElement;
if (docEl.firstElementChild) {
    docEl.firstElementChild.appendChild(metaEl);
} else {
    var wrap = document.createElement('div');
    wrap.appendChild(metaEl);
    document.write(wrap.innerHTML);
}

使用JS动态判断缩放比例

9、栅栏系统

CSS3的语法

使用 @media查询 可以针对不同的媒体类型,来定义不同的样式

例如 screen 表示用于电脑屏幕、平板电脑和智能手机等

同时需要配合媒体功能来搭配使用

例如 max-width 表示定义输出设备中的页面最大可见区域宽度

min-width 表示定义输出设备中的页面最小可见区域宽度

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>栅栏布局</title>
        <style>
        	* {
        		margin:0;
        		spadding:0;
        	}
            div {
            	width:300px;
            	height:300px;
            	background-color:blue;
            }
            @media screen and (max-width:800px) and (min-width:400px) {
            	div {
            		width:100%;
            		height:200px;
            		background-color:purple;
            	}
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

栅格系统把屏幕水平分为12份.col-md-1

超小屏幕 手机(<768px)小屏幕 平板(≥768px)中等屏幕 桌面显示器(≥992px)大屏幕 大桌面显示器(≥1200px)
.container 最大宽度None (自动)750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
最大列(column)宽自动~62px~81px~97px

水平布局:类前缀 + 元素占的份数(总份12份)

列偏移:类前缀 + offset- + 偏移量所占的份数(总份12份)

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>cols</title>
        <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
        <style>
        	* {
        		margin:0;
        		spadding:0;
        	}
            div {
            	height:300px;
            	background-color:blue;
            }
        </style>
    </head>
    <body>
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 col-lg-offset-3"></div>

        <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
    </body>
</html>

10、单位

① px(像素)

相对于显示屏幕分辨率的长度单位。它的特点是大小无法随着屏幕放大缩小,是一个固定值,所有的浏览器都支持它

② em

相对于当前文本内的字体尺寸。它会继承父级元素的字体大小。将其换算成px,每个浏览器的值是不一样的,而且IE的部分版本不支持它

③ rem

跟em类似,相对于HTML根节点的字体单位。它会继承根元素的字体大小,所以它是经过百分比换算后,所得出的大小

推荐优先使用px,其次使用rem

11、字体

注意字体资源文件夹(fonts)和CSS(css)样式文件夹为同一个目录下

css
└─────── bootstrap.min.css
fonts
├─────── glyphicons-halflings-regular.ttf
├─────── glyphicons-halflings-regular.woff
└─────── glyphicons-halflings-regular.woff2

所有字体样式的class的前缀都是 glyphicon-,并且需要 glyphicon 类型

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>font</title>
        <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />
        <style>
        	* {
        		margin:0;
        		spadding:0;
        	}
            .glyphicon-star {
                font-size:80px;
                color:red;
            }
        </style>
    </head>
    <body>
        <span class="glyphicon glyphicon-star"></span>

        <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
    </body>
</html>

12、组件

role

适配视觉障碍时使用


aria-label

读屏软件读取光标所在位时使用


tableIndex

table按钮的切换索引

(1)带图标的按钮

<button class="btn btn-default">
    <span class="glyphicon glyphicon-thumbs-up"></span>
    点赞
</button>

(2)下拉框

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        下拉
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a>北京</a></li>
        <li><a>上海</a></li>
        <li><a>广州</a></li>
        <li><a>深圳</a></li>
    </ul>
</div>

其中 data-toggle 是一个特殊的属性,它是HTML5规范新增的自定义属性,以 data- 为前缀,用于数据传输、交互等逻辑时使用

(3)控件组

<div class="input-group">
    <span class="input-group-addon">用户名</span>
    <input type="text" class="form-control" />
</div>

(4)导航

<ul class="nav nav-tabs">
    <li class="active"><a>北京</a></li>
    <li><a>上海</a></li>
    <li><a>广州</a></li>
</ul><hr />

<ul class="nav nav-pills">
    <li class="active"><a>北京</a></li>
    <li><a>上海</a></li>
    <li><a>广州</a></li>
</ul><hr />

<ul class="nav nav-pills nav-justified">
    <li class="active"><a>北京</a></li>
    <li><a>上海</a></li>
    <li><a>广州</a></li>
</ul><hr />

<ul class="nav nav-pills nav-stacked">
    <li class="active"><a>北京</a></li>
    <li><a>上海</a></li>
    <li><a>广州</a></li>
</ul>

一共有4种样式:

.nav-tabs:默认样式

.nav-pills:突出按钮

.nav-justified:水平摆放(注意:需要搭配 .nav-pills 来使用)

.nav-stacked:垂直摆放(注意:需要搭配 .nav-pills 来使用)

(5)分页

<nav>
    <ul class="pager">
        <li class="previous"><a>左边</a></li>
        <li class="next"><a>右边</a></li>
    </ul>
    <ul class="pagination">
        <li class="active"><a>1</a></li>
        <li><a>2</a></li>
        <li><a>3</a></li>
        <li><a>4</a></li>
        <li><a>5</a></li>
    </ul>
</nav>

如果想让分页导航变大,则需要额外添加一个class:pagination-lg 来搭配使用;变小则是添加 .pagination-sm

(6)滚动条

<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" style="width:70%;">70%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:50%;">50%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:36%;">36%</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:20%;">20%</div>
</div>
<div class="progress">
    <div class="progress-bar" style="width:98%;">98%</div>
</div>

给滚动条增加条纹:progress-bar-striped

(7)列表项

<div class="list-group">
    <li class="list-group-item active">
        统计总数
        <span class="badge">13</span>
    </li>
    <li class="list-group-item disabled">
        禁用的数量
        <span class="badge">1</span>
    </li>
    <li class="list-group-item">
        这是一个列表项
        <span class="badge">3</span>
    </li>
    <li class="list-group-item list-group-item-info">
        提示
        <span class="badge">5</span>
    </li>
    <li class="list-group-item list-group-item-success">
        成功
        <span class="badge">3</span>
    </li>
    <li class="list-group-item list-group-item-warning">
        警告
        <span class="badge">1</span>
    </li>
    <li class="list-group-item list-group-item-danger">
        危险
        <span class="badge">0</span>
    </li>
</div>

(8)面板

<div class="panel panel-primary">
    <div class="panel-heading">头部</div>
    <div class="panel-body">内容</div>
    <div class="panel-footer">脚注</div>
</div>
<div class="panel panel-info">
    <div class="panel-heading">提示</div>
    <div class="panel-body">内容</div>
    <div class="panel-footer">脚注</div>
</div>
<div class="panel panel-success">
    <div class="panel-heading">成功</div>
    <div class="panel-body">内容</div>
    <div class="panel-footer">脚注</div>
</div>
<div class="panel panel-warning">
    <div class="panel-heading">警告</div>
    <div class="panel-body">内容</div>
    <div class="panel-footer">脚注</div>
</div>
<div class="panel panel-danger">
    <div class="panel-heading">危险</div>
    <div class="panel-body">内容</div>
    <div class="panel-footer">脚注</div>
</div>

(9)弹窗

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">弹窗</button>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span><span class="sr-only">关闭弹窗</span>
                </button>
                <h4 class="modal-title">标题</h4>
            </div>
            <div class="modal-body">
                内容
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页