BootStrap框架的使用总结
BootStrap 框架
简介:
Bootstrap是一套基于HTML / CSS / JS 的前端开源框架 ，是一套可以快速构建 移动端 以及 PC端响应式网页的 前端框架.
使用步骤
1. 下载框架文件 www.bootcss.com
2. 解压框架文件
- fonts 文件夹 : 字体文件
- css 文件夹 : 样式文件
- js 文件夹 : 脚本文件
3. 将解压的三个文件夹, 复制到项目得到webContent目录下
4. 引入Jquery.js
5. 引入BootStrap的js文件 以及 css文件
js : js/bootstrap.min.js
css : css/bootstrap.css
6. 完毕
class值
1. 文本对齐方式
class:
- text-left : 文本居左
- text-center : 文本居中
- text-right : 文本居右
2. 列表样式
列表样式, 用于修改ol/ul标签中的 li标签.
class:
- list-unstyled : 取消列表的前置文字 以及 左内边距
- list-inline : 所有的li标签, 横向排列 ,并取消前置的文字和图标 .
代码:
<div>
<h3>默认样式</h3>
<ul>
<li>床前明月光</li>
<li>玻璃好上霜</li>
<li>要不及时擦</li>
<li>整不好得脏</li>
</ul>
</div>
<div>
<h3>BootStrap样式:list-unstyled</h3>
<ul class="list-unstyled">
<li>床前明月光</li>
<li>玻璃好上霜</li>
<li>要不及时擦</li>
<li>整不好得脏</li>
</ul>
</div>
<div>
<h3>BootStrap样式:list-inline</h3>
<ul class="list-inline">
<li>床前明月光</li>
<li>玻璃好上霜</li>
<li>要不及时擦</li>
<li>整不好得脏</li>
</ul>
</div>
代码块样式
- 内联代码:
<code>内联代码文字</code>
模拟用户输入的样式:(黑底白色文字)
<kbd>用于提示输入的文字</kbd>
- 原样显示代码块:
<pre>
带有浅灰色背景的块元素, 且内容会原样显示( 原样显示: 不进行代码解析)!
</pre>
bootstrap代码块:
<div class="well">
带有浅灰色背景的块元素, 且内边距很大
</div>
前景色 与 后景色
前景色(文本颜色):
class :
- text-muted : 柔和灰色
- text-success : 成功绿
- text-info : 信息蓝
- text-primary : 主要蓝
- text-warning : 警告黄
- text-danger : 危险红
后景色(背景颜色):
注意: 在使用后景色时, 有些后景色的样式 会自动修改前景色
class :
- bg-success : 成功绿
- bg-info : 信息蓝
- bg-primary : 主要蓝
- bg-warning : 警告黄
- bg-danger : 危险红
案例:
<div class="text-muted">锄禾日当午, 汗滴禾下土</div>
<div class="text-success">千里江陵一日还</div>
<div class="text-info">一行白鹭上青天</div>
<div class="text-primary">白日依山尽</div>
<div class="text-warning">天王盖地虎</div>
<div class="text-danger">一枝红杏出墙来</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div style="color:#f00">锄禾日当午, 汗滴禾下土</div>
<div style="color:#0f0">千里江陵一日还</div>
<div style="color:#00f">一行白鹭上青天</div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<div class="bg-success">孔子东游 , 见两小儿辩日</div>
<div class="bg-info">我们中出了一个叛徒</div>
<div class="bg-primary">来了，老弟</div>
<div class="bg-warning">班长兼学委</div>
<div class="bg-danger">这个星期日你有空吗?</div>
表格样式
基本表格样式
class : table
案例:
<h3>基本表格样式</h3>
<table class="table">
<tr><th>图书编号</th><th>图书名称</th><th>图书作者</th><th>图书出版社</th><th>图书价格</th></tr>
<tr><td>1001</td><td>三国武术讲义 - 老汉推车式</td><td>车</td><td>东京不热出版社</td><td>9.8</td></tr>
<tr><td>1002</td><td>三国武术讲义 - 冈本拔枪术</td><td>车</td><td>东京不热出版社</td><td>19.8</td></tr>
<tr><td>1003</td><td>三国武术讲义 - 加藤马指法</td><td>车</td><td>一本道出版社</td><td>998</td></tr>
<tr><td>1004</td><td>三国武术讲义 - 平沙落雁式</td><td>车</td><td>东京不热出版社</td><td>21800</td></tr>
<tr><td>1005</td><td>三国武术讲义 - 冰火九重天</td><td>车</td><td>嘿嘿嘿出版社</td><td>21900</td></tr>
</table>
条纹表格样式
class : table table-striped
案例:
<h3>条纹表格样式</h3>
<table class="table table-striped">
<tr><th>图书编号</th><th>图书名称</th><th>图书作者</th><th>图书出版社</th><th>图书价格</th></tr>
<tr><td>1001</td><td>三国武术讲义 - 老汉推车式</td><td>车</td><td>东京不热出版社</td><td>9.8</td></tr>
<tr><td>1002</td><td>三国武术讲义 - 冈本拔枪术</td><td>车</td><td>东京不热出版社</td><td>19.8</td></tr>
<tr><td>1003</td><td>三国武术讲义 - 加藤马指法</td><td>车</td><td>一本道出版社</td><td>998</td></tr>
<tr><td>1004</td><td>三国武术讲义 - 平沙落雁式</td><td>车</td><td>东京不热出版社</td><td>21800</td></tr>
<tr><td>1005</td><td>三国武术讲义 - 冰火九重天</td><td>车</td><td>嘿嘿嘿出版社</td><td>21900</td></tr>
</table>
边框表格样式
class : table table-bordered
案例:
<h3>边框表格样式</h3>
<table class="table table-bordered">
<tr><th>图书编号</th><th>图书名称</th><th>图书作者</th><th>图书出版社</th><th>图书价格</th></tr>
<tr><td>1001</td><td>三国武术讲义 - 老汉推车式</td><td>车</td><td>东京不热出版社</td><td>9.8</td></tr>
<tr><td>1002</td><td>三国武术讲义 - 冈本拔枪术</td><td>车</td><td>东京不热出版社</td><td>19.8</td></tr>
<tr><td>1003</td><td>三国武术讲义 - 加藤马指法</td><td>车</td><td>一本道出版社</td><td>998</td></tr>
<tr><td>1004</td><td>三国武术讲义 - 平沙落雁式</td><td>车</td><td>东京不热出版社</td><td>21800</td></tr>
<tr><td>1005</td><td>三国武术讲义 - 冰火九重天</td><td>车</td><td>嘿嘿嘿出版社</td><td>21900</td></tr>
</table>
悬停表格样式
class : table table-hover
案例:
<h3>悬停表格样式</h3>
<table class="table table-hover">
<tr><th>图书编号</th><th>图书名称</th><th>图书作者</th><th>图书出版社</th><th>图书价格</th></tr>
<tr><td>1001</td><td>三国武术讲义 - 老汉推车式</td><td>车</td><td>东京不热出版社</td><td>9.8</td></tr>
<tr><td>1002</td><td>三国武术讲义 - 冈本拔枪术</td><td>车</td><td>东京不热出版社</td><td>19.8</td></tr>
<tr><td>1003</td><td>三国武术讲义 - 加藤马指法</td><td>车</td><td>一本道出版社</td><td>998</td></tr>
<tr><td>1004</td><td>三国武术讲义 - 平沙落雁式</td><td>车</td><td>东京不热出版社</td><td>21800</td></tr>
<tr><td>1005</td><td>三国武术讲义 - 冰火九重天</td><td>车</td><td>嘿嘿嘿出版社</td><td>21900</td></tr>
</table>
单独指定tr的样式
class :
- active : 激活透明灰
- success : 成功绿
- info : 信息蓝
- warning : 警告黄
- danger : 危险红
- sr-only : 隐藏不显示
案例:
<h3>单独调整每一个tr的亚瑟</h3>
<table class="table table-striped table-bordered table-hover">
<tr class="active"><th>图书编号</th><th>图书名称</th><th>图书作者</th><th>图书出版社</th><th>图书价格</th></tr>
<tr class="success"><td>1001</td><td>三国武术讲义 - 老汉推车式</td><td>车</td><td>东京不热出版社</td><td>9.8</td></tr>
<tr class="info"><td>1002</td><td>三国武术讲义 - 冈本拔枪术</td><td>车</td><td>东京不热出版社</td><td>19.8</td></tr>
<tr class="warning"><td>1003</td><td>三国武术讲义 - 加藤马指法</td><td>车</td><td>一本道出版社</td><td>998</td></tr>
<tr class="danger"><td>1004</td><td>三国武术讲义 - 平沙落雁式</td><td>车</td><td>东京不热出版社</td><td>21800</td></tr>
<tr class="sr-only"><td>1005</td><td>三国武术讲义 - 冰火九重天</td><td>车</td><td>嘿嘿嘿出版社</td><td>21900</td></tr>
</table>
文字图标
组件 · Bootstrap v3 中文文档_WPS图片
上述的图片 , 是文字图标的class值的描述
使用方式:
1. 编写span标签
2. 给span标签, 添加class即可
案例:
<span class="glyphicon glyphicon-search" style="color:#0f0;font-size:100px"></span>
按钮样式
按钮颜色
class:
- btn : 基本按钮效果
- btn btn-default : 默认按钮效果
- btn btn-success : 成功绿按钮
- btn btn-info : 信息蓝按钮
- btn btn-primary : 主要蓝按钮
- btn btn-warning : 警告黄按钮
- btn btn-danger : 危险红按钮
- btn btn-link : 超链接样式
如何使用:
上述的class值 , 可以使用到如下四种元素上:
1. span 标签 (推荐)
2. button 标签
3. input 标签
4. a 标签
案例:
<h3>bootstrap的效果</h3>
<span class="btn btn-default">按钮span</span>
<button class="btn btn-default">按钮button</button>
<input type="button" value="按钮input" class="btn btn-default">
<a href="#" class="btn btn-default">按钮a</a>
<h3>bootstrap的各种按钮</h3>
<span class="btn btn-default">示例按钮</span>
<span class="btn btn-success">示例按钮</span>
<span class="btn btn-info">示例按钮</span>
<span class="btn btn-primary">示例按钮</span>
<span class="btn btn-warning">示例按钮</span>
<span class="btn btn-danger">示例按钮</span>
<span class="btn btn-link">示例按钮</span>
按钮尺寸样式
class:
- btn-lg : 大按钮
- btn-sm : 小按钮
- btn-xs : 小小按钮
- btn-block : 块按钮 , 独占一行, 常用于手机页面
案例:
<span class="btn btn-success btn-lg">示例大按钮</span><br><br>
<span class="btn btn-success">示例按钮</span><br><br>
<span class="btn btn-success btn-sm">示例小按钮</span><br><br>
<span class="btn btn-success btn-xs">示例小小按钮</span><br><br>
<span class="btn btn-success btn-block">示例块按钮</span>
按钮的激活与禁用样式:
class:
- active : 激活效果 (被点击的样式)
- disabled: 禁用样式
案例:
<span class="btn btn-info">示例按钮</span>
<span class="btn btn-info active">示例激活按钮</span>
<span class="btn btn-info disabled">示例禁用按钮</span>
表单样式 (输入框)
通过bootstrap给表单的输入框添加样式时 , 需要注意: input标签, 必须指定type值, 哪怕值为text
,也必须显式的指定 . 块级输入框
class : form-control
案例:
<body style="background-image: url('images/1.jpg')">
<div style="width:500px;height:300px;margin: 100px auto;padding:50px;background-color: rgba(111,111,111,0.9)">
<form action="">
<input placeholder="请输入帐号" class="form-control"><br><br>
<input placeholder="请输入密码" class="form-control"><br><br>
<button class="btn btn-success btn-block">登录</button>
</form>
</div>
</body>
内联输入框 (响应式)
class :
1. form标签的class = form-inline
2. input标签的class= form-control
案例:
<form action="" class="form-inline">
<input placeholder="请输入帐号" class="form-control"><br><br>
<input placeholder="请输入密码" class="form-control"><br><br>
<button class="form-control">登录</button>
</form>
输入框尺寸
class :
- input-lg : 大输入框
- input-sm : 小输入框
案例:
<form action="" class="form-inline">
<input placeholder="请输入帐号" class="form-control input-lg" type="text"><br><br>
<input placeholder="请输入密码" class="form-control" type="text"><br><br>
<input placeholder="请确认密码" class="form-control input-sm" type="text"><br><br>
<button class="form-control btn-success">注册</button>
</form>
响应式
移动设备优先
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
或
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
栅格系统
指的是Bootstrap所提供的一套用于响应式 以及 移动设备优先 的 流式栅格布局.
栅格容器
两种栅格容器:
1. 固定宽度栅格容器
<div class="container"></div>
2. 自适应占用屏幕宽度100%的栅格容器
<div class="container-fluid"></div>
栅格行
在栅格容器中, 需要一个栅格行元素,
元素为div , class值为row
在一个栅格行中 , 一行被分为12等份 , 栅格行中的子元素可以调整自身占用的份数, 当超出12份后, 自动换行.
一个栅格容器, 可以包含多个栅格行元素, 多个栅格行元素, 一定是分开的.
<div class="row"></div>
屏幕尺寸 与 类前缀
屏幕尺寸 固定栅格容器的宽度 调整栅格份数的类前缀
<768px(超小屏幕) auto col-xs-数值
768px≤小屏幕＜992px 750px col-sm-数值
992px≤中等屏幕＜1200px 970px col-md-数值
1200px≤大屏幕 1170px col-lg-数值
栅格嵌套
栅格行中的每一个占用 栅格份数的 子元素 ,都可以作为新的栅格容器来使用. 栅格中的图片溢出问题 因为栅格的格, 被指定了固定的宽度 !
如果图片内容过大, 会导致内容溢出, 且因为栅格系统是响应式的流式布局 , 极易发生溢出问题.
解决方案:
方案1. 给图片元素 指定固定的百分比宽度.
方案2. 使用栅格嵌套 , 给图片元素指定占用栅格的 份数.
方案3. 给图片元素的父元素div , 添加class="thumbnail" (不建议)
显示与隐藏
class值 <768px(超小屏幕) 768px≤小屏幕＜992px 992px≤中等屏幕＜1200px 1200px≤大屏幕
visible-xs-参数 可见的 隐藏的 隐藏的 隐藏的
visible-sm-参数 隐藏的 可见的 隐藏的 隐藏的
visible-md-参数 隐藏的 隐藏的 可见的 隐藏的
visible-lg-参数 隐藏的 隐藏的 隐藏的 可见的
hidden-xs 隐藏的 可见的 可见的 可见的
hidden-sm 可见的 隐藏的 可见的 可见的
hidden-md 可见的 可见的 隐藏的 可见的
hidden-lg 可见的 可见的 可见的 隐藏的
上述的class值中的 参数: inline / inline-block / block 指元素在显示时, 以什么样的元素类型显示.
导航栏
基本导航
步骤:
1. 编写ul标签 class="nav"
2. ul标签中编写一个个的li
3. 每一个li的内容 就是一个导航项 , li内容必须被超链接包含
案例:
<ul class="nav">
<li><a href="javascript:void(0)">首页</a></li>
<li><a href="javascript:void(0)">日韩图片</a></li>
<li><a href="javascript:void(0)">欧美高清</a></li>
<li><a href="javascript:void(0)">亚洲无码</a></li>
<li><a href="javascript:void(0)">非洲大**</a></li>
<li><a href="javascript:void(0)">更多</a></li>
</ul>
横向导航栏
步骤:
1. 编写ul标签 class="nav nav-tabs"
2. ul标签中编写一个个的li
3. 每一个li的内容 就是一个导航项 , li内容必须被超链接包含
案例
<ul class="nav nav-tabs">
<li><a href="javascript:void(0)">首页</a></li>
<li><a href="javascript:void(0)">日韩图片</a></li>
<li><a href="javascript:void(0)">欧美高清</a></li>
<li><a href="javascript:void(0)">亚洲无码</a></li>
<li><a href="javascript:void(0)">非洲大**</a></li>
<li><a href="javascript:void(0)">更多</a></li>
</ul>
内容切换导航
步骤:
1. 创建一个导航栏
2. 在导航栏的后面 添加元素 div , 并指定div的class值为 tab-content
3. .tab-content中包含一个个的子div , 每一个子div 与 一个导航项绑定.
4. 这些div必须有id , class="tab-pane fade" , 默认的显示的子div class="tab-pane fade in active"
5. 修改导航栏中的每一个超链接, 添加属性: data-toggle="tab" href="#子div的id"
6. 给默认选中的li , 设置class="active"
案例:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#content1">首页</a></li>
<li><a data-toggle="tab" href="#content2">日韩图片</a></li>
<li><a data-toggle="tab" href="#content3">欧美高清</a></li>
<li><a data-toggle="tab" href="#content4">亚洲无码</a></li>
<li><a data-toggle="tab" href="#content5">非洲大**</a></li>
<li><a data-toggle="tab" href="#content6">更多</a></li>
</ul><br><br><br><br>
<div class="container">
<div class="tab-content">
<div id="content1" class="tab-pane fade in active">
<h1>网站的首页</h1>
<h3>这个网站是一个正经网站 !</h3>
</div>
<div id="content2" class="tab-pane fade">
<img src="images/11.jpg">
</div>
<div id="content3" class="tab-pane fade">
<img src="images/12.jpg">
</div>
<div id="content4" class="tab-pane fade">
<img src="images/8.jpg">
</div>
<div id="content5" class="tab-pane fade">
<img src="images/13.jpg">
</div>
<div id="content6" class="tab-pane fade">
<p>更多高清内容, 请<a href="http://2bf666.com">充值svip</a></p>
</div>
</div>
</div>
导航条
使用步骤:
1. 编写一个nav标签 , 指定class="navbar navbar-default"
2. 向nav标签中, 加入子标签ul , 指定ul的class="nav navbar-nav"
3. 向ul中, 加入一个个的子li , li中包含的是超链接, html
案例:
<nav class="navbar navbar-default">
<ul class="nav navbar-nav">
<li><a href="javascript:void(0)">首页</a></li>
<li><a href="javascript:void(0)">日韩</a></li>
<li><a href="javascript:void(0)">欧美</a></li>
<li><a href="javascript:void(0)">大**</a></li>
<li><a href="javascript:void(0)">更多</a></li>
</ul>
</nav>
导航条相关的设置
1. 添加导航栏中的 标题
在nav标签中, 前置一个子div , class=“navbar-header” . div嵌套span标签,
class=“navbar-brand” span的内容就是标题
案例:
<div class="navbar-header"><span class="navbar-brand">交流学习java网站</span></div>
2. 添加表单
步骤:
1. nav标签中, 编写一个form标签 , class="navbar-form"
2. 正常编写输入组件即可
案例:
3. 控制导航中 内容的显示位置
• - 左 : class="navbar-left"
• - 右 : class="navbar-right"
4. 将导航条中所有内容, 放入栅格容器中, 来实现内容左右的边距
5. 向导航条中 加入普通文字
• 文字通过span标签来添加, span的class=“navbar-text”
固定导航条
固定在顶部 :
• nav标签添加class : navbar-fixed-top
固定在底部:
• nav标签添加class : navbar-fixed-bottom
静态导航条
取消了导航条的圆角
nav标签添加class="navbar-static-top"## 标题