BootStrap快速入门
环境搭建
<!DOCTYPE html>
<html lang="zh-CN"><!--html页面使用的是中文简体-->
<head>
<meta charset="utf-8"><!--设置HTML特面的字符集 utf-8-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--使用IE最新的渲染模式 展示页面-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!--
viewport:视口
视口：浏览器上 网页内容 可视区域
以下的设置 只在移动设备上生效
width=device-width 设置视口的宽度，device-width设备宽度
initial-scale=1 初始化缩放设置。移动设备打开网页时，缩放级别 100%正常1~5
-->
<title>Bootstrap 101 Template</title>
<!--以下三个是BootStrap依赖的样式和脚本-->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
布局容器
- container：使内容在屏幕的左侧和右侧都留有空白处
<div class="container" style="border:1px solid red;">
1111111
</div>
- container-fluid:使得内容占领屏幕的全部
<div class="container-fluid" style="border:1px solid red;">
1111111
</div>
栅格系统
行和列
- 先定义行，在定义列，比如列的格式为：col-lg-数字。（lg的列数最大为12）
如果列元素 占用列数 总和 等于12，代码如下：
<!--定义布局容器-->
<div class="container">
<!--在布局容器中 定义一行-->
<div class="row">
<!--在行上 定义列-->
<div class="col-lg-4" style="border:1px solid red;">
11111111
</div>
<!--在行上 定义列-->
<div class="col-lg-4" style="border:1px solid red;">
2222222222
</div>
<div class="col-lg-4" style="border:1px solid red;">
333333333
</div>
</div>
</div>
效果如下：
如果元素的占用列数总和 小于等于 12，这些列元素还排列在一行上
如果列元素 占用列数 总和 大于12，大于12的列元素另起一行自动换行，代码如下：
<!--定义布局容器-->
<div class="container">
<!--在布局容器中 定义一行-->
<div class="row">
<!--在行上 定义列-->
<div class="col-lg-6" style="border:1px solid red;">
11111111
</div>
<!--在行上 定义列-->
<div class="col-lg-7" style="border:1px solid red;">
2222222222
</div>
<div class="col-lg-2" style="border:1px solid red;">
333333333
</div>
</div>
</div>
效果如下：
栅格嵌套
- 栅格是进行无限嵌套的,
- 嵌套方式必须是 行-列-行-列-行。。。。
<!--定义布局容器-->
<div class="container">
<!--在布局容器中 定义一行-->
<div class="row">
<!--在行上 定义列-->
<div class="col-lg-11" style="border:1px solid red;">
<!-- 定义一行-->
<div class="row"></div>
<!--在行上 定义列-->
<div class="col-lg-11" style="border:1px solid blue;">
11111
</div>
</div>
</div>
</div>
效果如下：
即使嵌套的下一列的元素列数大于上一列，效果框也不会超出，如代码：
<div class="container">
<div class="row">
<div class="col-lg-11" style="border:1px solid red;">
<div class="row"></div>
<div class="col-lg-12" style="border:1px solid blue;">
11111
</div>
</div>
</div>
</div>
效果展示：
屏幕尺寸设置
-
lg PC大屏
-
md pc小屏
-
sm 平板屏幕
-
xs 智能手机
如果没有设置屏幕尺寸，默认一个元素占一行
例如：col-lg-1 、 col-md-1 、 col-sm-1 、 col-xs-1。
多个屏幕共同设置
设置了多个屏幕，则效果的排版会根据屏幕大小的尺寸去选定根据哪一种屏幕：
<div class="container">
<!--在布局容器中 定义一行-->
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-2 col-xs-1" style="border:1px solid red;">
11111111
</div>
<div class="col-lg-4 col-md-3 col-sm-2 col-xs-1" style="border:1px solid red;">
2222222222
</div>
<div class="col-lg-4 col-md-3 col-sm-8 col-xs-10" style="border:1px solid red;">
333333333
</div>
</div>
</div>
当采用col-lg-4,效果如下：
当采用col-md-3,效果如下：
当采用col-sm-2,col-sm-2,col-sm-8,效果如下：
当采用col-xs-1、col-xs-1、col-xs-10,效果如下：
列偏移
列偏移：将列元素往右侧进行推移。
- 格式：
col-lg(屏幕尺寸\md\sm\xs)-offset-数字。
<body>
<!--
列偏移：将列元素往右侧进行推移
-->
<div class="container">
<div class="row">
<div class="col-lg-3 col-lg-offset-5" style="border:1px solid red;">
11111111
</div>
</div>
</div>
</body>
效果如下：
列表
- list-inline:使得换行的元素没有换行而都在同一列上，在列表标签中定义
<ul class="list-inline">
<li>zzh</li>
<li>asd</li>
<li>lkj</li>
</ul>
效果如下：
按钮
- btn btn-default：默认按钮
- btn btn-primary:首选项按钮
- btn btn-success:成功按钮
- btn btn-info:一般信息按钮
- btn btn-warning:警告按钮
- btn btn-danger:危险按钮
btn btn-danger active：被点击的样式
btn btn-danger disabled:被禁止的样式
btn btn-danger" disabled=“disabled”:被禁止的样式2
btn btn-default btn-lg(md\sm\xs) :按钮大小
代码如下：
<body>
<a href="" class="btn btn-default">默认按钮</a>
<a href="" class="btn btn-primary">首选按钮</a>
<a href="" class="btn btn-info">一般信息按钮</a>
<a href="" class="btn btn-success">绿色按钮</a>
<a href="" class="btn btn-danger">红色按钮</a>
<a href="" class="btn btn-warning">警告按钮</a>
<a href="" class="btn btn-danger active">红色按钮-被点击的样式</a>
<a href="" class="btn btn-danger" disabled>红色按钮-被禁止的样式</a>
<a href="" class="btn btn-danger" disabled="disabled">红色按钮-被禁止的样式2</a>
<a href="" class="btn btn-default btn-lg">大按钮</a>
<a href="" class="btn btn-default btn-xs ">超小按钮</a>
</body>
效果如下：
导航条
可直接复制套用，在基础上改动
<!--导航条-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!--导航图标及汉堡按钮-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<!--阅读器专用的样式-->
<span class="sr-only">这是汉堡按钮</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- 导航的主体部分 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li><!--分割线-->
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
效果如下：
全屏时：
非全屏：
轮播图
单个轮播图
可直接复制套用，在基础上改动
<!--轮播图-->
<!--定时切换轮播图：data-interval="毫秒值"-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1000">
<!-- 小圆点 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- 轮播图 图片主体部分 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/i1.jpg" >
<div class="carousel-caption">
图片1的说明信息
</div>
</div>
<div class="item">
<img src="../img/i2.jpg" width="100%" height="100%">
<div class="carousel-caption">
图片2的说明信息
</div>
</div>
<div class="item">
<img src="../img/i3.jpg" alt="...">
<div class="carousel-caption">
图片3的说明信息
</div>
</div>
</div>
<!-- 左右控制按钮 -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
效果如下：
多个轮播图
直接复制一样的代码加在后面，但要注意改轮播图的id，如果第二个的轮播图id与第一个相同，则切换第二个图片时第二个轮播图没有反应，而是在切换第一个的轮播图。
<!--轮播图1-->
<!--定时切换轮播图：data-interval="毫秒值"-->
<div id="lbt1" class="carousel slide" data-ride="carousel" data-interval="10000">
<!-- 小圆点 -->
<ol class="carousel-indicators">
<li data-target="#lbt1" data-slide-to="0" class="active"></li>
<li data-target="#lbt1" data-slide-to="1"></li>
<li data-target="#lbt1" data-slide-to="2"></li>
</ol>
<!-- 轮播图 图片主体部分 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/i1.jpg" >
<div class="carousel-caption">
图片1的说明信息
</div>
</div>
<div class="item">
<img src="../img/i2.jpg" width="100%" height="100%">
<div class="carousel-caption">
图片2的说明信息
</div>
</div>
<div class="item">
<img src="../img/i3.jpg" alt="...">
<div class="carousel-caption">
图片3的说明信息
</div>
</div>
</div>
<!-- 左右控制按钮 -->
<a class="left carousel-control" href="#lbt1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" lbt1aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--轮播图2-->
<div id="lbt2" class="carousel slide" data-ride="carousel" data-interval="10000">
<!-- 小圆点 -->
<ol class="carousel-indicators">
<li data-target="#lbt2" data-slide-to="0" class="active"></li>
<li data-target="#lbt2" data-slide-to="1"></li>
<li data-target="#lbt2" data-slide-to="2"></li>
</ol>
<!-- 轮播图 图片主体部分 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="../img/i1.jpg" >
<div class="carousel-caption">
图片1的说明信息
</div>
</div>
<div class="item">
<img src="../img/i2.jpg" width="100%" height="100%">
<div class="carousel-caption">
图片2的说明信息
</div>
</div>
<div class="item">
<img src="../img/i3.jpg" alt="...">
<div class="carousel-caption">
图片3的说明信息
</div>
</div>
</div>
<!-- 左右控制按钮 -->
<a class="left carousel-control" href="#lbt2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#lbt2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
效果如下：
表单元素
基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 < input >、< textarea > 和 < select > 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
如代码：
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
效果如下：
水平排列的表单
通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。（直接复制套用）
代码如下：
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" value="提交">
</div>
</div>
</form>
效果如下：
校验信息
Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。
代码如下：
<form class="form-horizontal">
<div class="form-group has-success" >
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="请输入用户名">
</div>
</div>
<div class="form-group has-error">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" value="提交">
</div>
</div>
</form>
效果如下：
排版方式
- text-center/right/left:使得内容居中、右、左。
<div class="text-center">
今天天气好晴朗
<img src="../img/i1.jpg">
</div>
效果如下：
分页条
默认分页
<nav>
<!--分页条整体列表-->
<ul class="pagination">
<!-- 上一页 -->
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<!--索引页-->
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<!--下一页-->
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
效果如下：
分页条的激活或禁用状态
链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。
还可以将 active 或 disabled 状态应用于 < span > 标签，或者在向前/向后的箭头处省略< a > 标记，即替换 < a > 标签，这样就可以让其保持需要的样式而不能被点击。
代码如下：
<nav>
<!--分页条整体列表-->
<ul class="pagination">
<!-- 上一页 -->
<li class="disabled">
<a>
<span aria-hidden="true">«</span>
</a>
</li>
<!--索引页-->
<li class="active">
<a href="#">1</a></li>
<li><a href="#">2</a></li>
<li ><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<!--下一页-->
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
效果如下：
分页尺寸大小
： .pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸
代码如下：
<nav><ul class="pagination pagination-lg">...</ul></nav>
<nav><ul class="pagination">...</ul></nav>
<nav><ul class="pagination pagination-sm">...</ul></nav>
效果如下：
翻页
在默认的翻页中，链接居中对齐。
代码如下：
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
效果如下：
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
