Bootstrap

最新推荐文章于 2024-09-21 23:59:03 发布

loetca

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量261

点赞数

分类专栏： CSS 文章标签： bootstrap css css3

本文链接：https://blog.csdn.net/adsl624153/article/details/113101652

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、概念

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

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

2、特性

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

3、下载

一共有三种：

用于生产环境的 Bootstrap
Bootstrap 源码
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 （自动）	750px	970px	1170px
类前缀	`.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>