当天视频
其他笔记
代码
BootStrap 熟悉
2018/7/12 9:03:04
简介
Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的
是一个基于HTML、CSS、JavaScript 的开源框架。
该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。
特点
Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：
跨设备、跨浏览器
响应式布局
提供的全面的组件
内置 jQuery 插件
支持 HTML5、CSS3( HTML5 语义化标签和 CSS3 )
支持 LESS 动态样式
搭建bootstrap开发环境步骤
1. 在国内文档地址(v3.bootcss.com)下载 生产环境的 文件
- 样式文件 (css文件夹)
- 字体文件 (fonts文件夹)
- 脚本文件 (js文件夹)
2. 将下载的css,fonts,js文件夹,以及jquery.js 引入到项目中
3. 在编写html时, 引入上述文件:
- 引入bootstarp的核心样式表
<link rel="stylesheet" href="css/bootstrap.css">
- 引入jquery
<script src="js/jquery.js"></script>
- 引入bootstrap的核心脚本文件
<script src="js/bootstrap.min.js"></script>
4. 开始使用Bootstrap
页面排版 了解
Bootstrap 将全局 font-size 设置为 14px，
line-height 行高设置为 1.428 em(即20px)；
<p>段落元素被设置 下外边距等于 1/2 行高(即 10px)；
颜色被设置为#333。
标题标签样式 了解
bootstrap对 h1 - h6的标签 进行了样式的重构 !
<small> 副标题标签 , 字体大小, 为原来的65%
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
也可以通过添加class=h1-h6的方式, 来完成标题的编写 !
<div class="h1">一级标题</div>
<div class="h2">二级标题</div>
<div class="h3">三级标题</div>
<div class="h4">四级标题</div>
<div class="h5">五级标题</div>
<div class="h6">六级标题</div>
内联文本样式 了解
<p>兄弟连Java-Bootstrap <mark>框架教程</mark></p>
<del>兄弟连Java-Bootstrap 框架教程</del> //删除的文本<br>
<s>兄弟连Java-Bootstrap 框架教程</s> //无用的文本<br>
<ins>兄弟连Java-Bootstrap 框架教程</ins> //插入的文本<br>
<u>兄弟连Java-Bootstrap 框架教程</u> //效果同上，下划线文本<br>
<small>兄弟连Java-Bootstrap 框架教程</small> //标准字号的 85%<br>
<strong>兄弟连Java-Bootstrap 框架教程</strong> //加粗 700<br>
<em>兄弟连Java-Bootstrap 框架教程</em> //倾斜<br>
文本对齐 ***
修改class属性:
- text-left : 文本居左 ***
- text-center : 文本居中 *****
- text-right : 文本居右 ***
- text-justify: 两端对其兼容差
- text-nowrap : 不换行
案例:
<p class="text-left">吃饭, 睡觉, 打Java</p>
<p class="text-center">吃饭, 睡觉, 打Java</p>
<p class="text-right">吃饭, 睡觉, 打Java</p>
<p class="text-justify">吃饭, 睡觉, 打Java</p>
<p class="text-nowrap">吃饭, 睡觉, 打Java</p>
大小写文本 了解
修改class:
- text-lowercase : 小写字母
- text-uppercase : 大写字母
- text-capitalize : 单词首字母大写
案例:
<p class="text-lowercase">Nothing is impossible to a willing heart.</p>
<p class="text-uppercase">Nothing is impossible to a willing heart.</p>
<p class="text-capitalize">Nothing is impossible to a willing heart.</p>
列表样式 ***
修改class:
- list-unstyled : 取消前置文字图标样式
- list-inline : 取消前置文字图标, 并横向排列
案例:
<ul class="list-unstyled">
<li>床前明月光</li>
<li>地上鞋四双</li>
<li>哔哔哔哔哔</li>
<li>其中有奇男</li>
</ul>
<hr>
<ul class="list-inline">
<li>床前明月光</li>
<li>地上鞋四双</li>
<li>哔哔哔哔哔</li>
<li>其中有奇男</li>
</ul>
代码块 了解
//内联代码
<code><section></code>
//用户输入
press <kbd>ctrl + ,</kbd>
//代码块
<pre><p>public static void toString...</p></pre>
<div class="well">BootStrap代码块</div>
前景 后景色 ***
文本颜色:
class 描述
text-muted 柔和灰
text-primary 主要蓝
text-success 成功绿
text-info 信息蓝
text-warning 警告黄
text-danger 危险红
背景颜色:
class 描述
bg-primary 主要蓝
bg-success 成功绿
bg-info 信息蓝
bg-warning 警告黄
bg-danger 危险红
案例:
<p class="text-muted bg-primary">从前有座山</p>
<p class="text-primary bg-success">山上有做尼姑庵</p>
<p class="text-success bg-info">庵里有个小和尚</p>
<p class="text-info bg-warning">小和尚对奇男说:</p>
<p class="text-warning bg-danger">学Java</p>
<p class="text-danger">来兄弟连</p> <p class="text-muted">来兄弟连</p>
表格样式
基本表格样式 *
class : table
案例:
<table class="table">
<tr><th>图书编号</th><th>图书名称</th><th>图书作者</th><th>图书价格</th></tr>
<tr><td>10001</td><td>奇男教学秘籍:旋转式</td><td>奇男</td><td>188</td></tr>
<tr><td>10002</td><td>奇男教学秘籍:跳跃式</td><td>奇男</td><td>288</td></tr>
<tr><td>10003</td><td>奇男教学秘籍:真懂事</td><td>奇男</td><td>388</td></tr>
<tr><td>10004</td><td>奇男教学秘籍:爆炸式</td><td>奇男</td><td>588</td></tr>
<tr><td>10005</td><td>奇男教学秘籍:推车式</td><td>奇男</td><td>988</td></tr>
</table>
条纹表格样式 **
class : table table-striped
案例:
<table class="table table-striped">
<tr><th>图书编号</th><th>图书名称</th><th>图书作者</th><th>图书价格</th></tr>
<tr><td>10001</td><td>奇男教学秘籍:旋转式</td><td>奇男</td><td>188</td></tr>
<tr><td>10002</td><td>奇男教学秘籍:跳跃式</td><td>奇男</td><td>288</td></tr>
<tr><td>10003</td><td>奇男教学秘籍:真懂事</td><td>奇男</td><td>388</td></tr>
<tr><td>10004</td><td>奇男教学秘籍:爆炸式</td><td>奇男</td><td>588</td></tr>
<tr><td>10005</td><td>奇男教学秘籍:推车式</td><td>奇男</td><td>988</td></tr>
</table>
给表格添加边框 *
class : table table-bordered
案例:
<table class="table table-bordered">
<tr><th>图书编号</th><th>图书名称</th><th>图书作者</th><th>图书价格</th></tr>
<tr><td>10001</td><td>奇男教学秘籍:旋转式</td><td>奇男</td><td>188</td></tr>
<tr><td>10002</td><td>奇男教学秘籍:跳跃式</td><td>奇男</td><td>288</td></tr>
<tr><td>10003</td><td>奇男教学秘籍:真懂事</td><td>奇男</td><td>388</td></tr>
<tr><td>10004</td><td>奇男教学秘籍:爆炸式</td><td>奇男</td><td>588</td></tr>
<tr><td>10005</td><td>奇男教学秘籍:推车式</td><td>奇男</td><td>988</td></tr>
</table>
悬停切换后景色表格样式 ***
class : table table-hover
案例:
<table class="table table-hover">
<tr><th>图书编号</th><th>图书名称</th><th>图书作者</th><th>图书价格</th></tr>
<tr><td>10001</td><td>奇男教学秘籍:旋转式</td><td>奇男</td><td>188</td></tr>
<tr><td>10002</td><td>奇男教学秘籍:跳跃式</td><td>奇男</td><td>288</td></tr>
<tr><td>10003</td><td>奇男教学秘籍:真懂事</td><td>奇男</td><td>388</td></tr>
<tr><td>10004</td><td>奇男教学秘籍:爆炸式</td><td>奇男</td><td>588</td></tr>
<tr><td>10005</td><td>奇男教学秘籍:推车式</td><td>奇男</td><td>988</td></tr>
</table>
给tr单独指定颜色:了解
class 含义
active 激活的
success 成功的 绿
info 信息的 蓝
warning 警告的 黄
danger 危险的 红
sr-only 隐藏显示当前行
案例:
<table class="table table-hover table-bordered table-striped">
<tr class="active"><th>图书编号</th><th>图书名称</th><th>图书作者</th><th>图书价格</th></tr>
<tr class="success"><td>10001</td><td>奇男教学秘籍:旋转式</td><td>奇男</td><td>188</td></tr>
<tr class="info"><td>10002</td><td>奇男教学秘籍:跳跃式</td><td>奇男</td><td>288</td></tr>
<tr class="warning"><td>10003</td><td>奇男教学秘籍:真懂事</td><td>奇男</td><td>388</td></tr>
<tr class="sr-only"><td>10004</td><td>奇男教学秘籍:爆炸式</td><td>奇男</td><td>588</td></tr>
<tr class="danger"><td>10005</td><td>奇男教学秘籍:推车式</td><td>奇男</td><td>988</td></tr>
</table>
文字图标样式 了解
使用span元素, 设置对应的class 即可实现文字图标样式.
注意:
显示出来的图标, 都是文字, 可以通过各种文字的样式, 对其进行调整 !
案例:
<span class="glyphicon glyphicon-star"></span>
按钮样式 *
我们一般给如下方式实现的按钮添加样式:
- button标签
- input标签type为button
- span标签 (推荐)
- a超链接标签
修改class值为:
class 效果
btn 基本按钮点击效果
btn btn-default 默认按钮样式
btn btn-primary 主要按钮样式
btn btn-success 成功按钮样式
btn btn-info 信息按钮样式
btn btn-warning 警告按钮样式
btn btn-danger 危险按钮样式
btn btn-link 链接按钮样式
案例:
按钮尺寸样式 了解
class 效果
btn-lg 大按钮
btn-sm 小按钮
btn-xs 小小按钮
btn-block 块按钮,独占一行
案例:
<span class="btn btn-success btn-lg">示例大按钮</span>
<span class="btn btn-success">示例标准按钮</span>
<span class="btn btn-success btn-sm">示例小按钮</span>
<span class="btn btn-success btn-xs">示例小小按钮</span>
<span class="btn btn-success btn-block">示例块按钮</span>
按钮的激活与禁用 了解
class 效果
active 被点击的样式
disabled 禁用按钮样式 , 无法触发点击事件
案例:
<span class="btn btn-success active">激活按钮</span>
<span class="btn btn-success">标准按钮</span>
<span class="btn btn-success disabled">禁用按钮</span>
表单样式
修改表单中, 元素的显示效果的样式 !
在通过bootstrap修改表单中input标签样式时, input标签必须制定type属性!
独占样式 *
独占一行
给form表单中的输入组件(input标签/select标签...),指定class=form-control即可实现:
案例:
<form>
<input type="text" placeholder="请输入帐号">
<input type="text" placeholder="请输入密码">
<input type="submit" class="btn btn-success btn-block" value="登录">
</form>
响应式 -内联样式 了解
样式自动切换,正常为内联样式 , 当屏幕宽度小于768px时, 切换为独占样式 !
给form表单添加class=form-inline ,
form表单中的输入组件(input标签/select标签...),指定class=form-control即可实现:
案例:
<form class="form-inline">
<input type="text" class="form-control" placeholder="请输入帐号"><br>
<input type="text" class="form-control" placeholder="请输入密码"><br>
<input type="submit" class="btn btn-success btn-block" value="登录">
</form>
组合输入框 *
组合输入框, 用于将一组元素, 组合为一个输入框, 可以给普通输入框, 添加前置/后置的元素 !
步骤:
1. form表单 添加class = form-group
2. 在表单中, 加入div元素, 作为一个组合输入框的容器 , 并指定此div的class为input-group
3. 给前置或后置的元素, 添加class=input-group-addon
案例:
<form action="" class="form-inline form-group">
<div class="input-group">
<div class="input-group-addon">账号:</div>
<input placeholder="请输入账号" class="form-control">
</div>
<br>
<div class="input-group">
<div class="input-group-addon">密码:</div>
<input placeholder="请输入密码" class="form-control">
</div>
<br>
<div class="input-group">
<div class="input-group-addon">邮箱:</div>
<input placeholder="请输入邮箱" class="form-control">
<div class="input-group-addon">
<select style="background-color: rgba(0,0,0,0);border:0;">
<option>@qq.com</option>
<option>@163.com</option>
<option>@itxdl.cn</option>
<option>@126.com</option>
</select>
</div>
</div>
<br>
<input type="submit" value="登录" class="btn btn-info btn-block">
</form>
校验状态 了解
可以在输入框内容校验出现问题时, 进行样式的更改, 提示用户!
实现步骤:
1. 给输入框添加直接父元素 div
2. 给div添加class
- has-error : 输入错误状态
- has-success : 输入成功状态
- has-warning : 输入警告状态
注意:
一般我们在JS中, 修改元素的class属性值, 来实现校验状态样式的切换 !
案例:
<form action="">
<div>
<input type="text" class="form-control" placeholder="请输入账号" onblur="x(this)">
</div>
</form>
<script>
function x(input){
var val = input.value;
if(val.length>=6){
//成功
input.parentNode.className = "has-success";
}else{
//失败
input.parentNode.className = "has-error";
}
}
</script>
输入框尺寸 了解
input标签:
class 效果
input-lg 大输入框
input-sm 小输入框
组合输入框:
给父div添加class 效果
form-group-lg 大输入框
form-group-sm 小输入框
响应式
移动优先:
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
栅格系统 ***
bootstrap提供了一套用于进行响应式, 移动设备优先的 流式栅格系统 !
栅格容器 ***
给div添加class=container 即可实现固定宽度栅格容器
给div添加class=container-fluid 即可实现100%宽度栅格容器
栅格容器中, 将屏幕横向等分为12份 !
行和列 ***
在栅格系统中, 我们可以通过给div添加 class=row 来实现栅格行的创建
每个栅格行中, 可以给子元素指定占用的栅格数量 (一行最多12个格 , 超出则换行)
如何指定占用的栅格数量 *****
超小屏幕<768px 小屏幕≥768px 中等屏幕≥992px 大屏幕≥1200px
默认行为 水平排列 堆叠 堆叠 堆叠
.container最大宽度 auto 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列数(column) 12
最大列宽(column) auto 大约62px 大约81px 大约97px
槽宽(gutter) 30px
可嵌套 true
支持偏移 true
支持列排序 true
栅格偏移 了解
尺寸前缀-offset-数字 偏移量:
例如:
指定手机屏幕下 向右偏移5个栅格:
<div class="col-xs-offset-5"></div>
案例:
<div class="container">
<div class="row">
<img src="images/12.jpg" class="col-lg-4 ">
<img src="images/12.jpg" class="col-lg-4 col-lg-offset-4">
</div>
</div>
栅格移动 了解
向左移动
尺寸前缀-pull-数字 : 向左移动指定列
向右移动
尺寸前缀-push-数字 : 向右移动指定列
移动后的元素显示效果为覆盖显示:
案例:
<div class="container">
<!-- <div class="row">
<img src="images/12.jpg" class="col-lg-4 ">
<img src="images/12.jpg" class="col-lg-4 col-lg-pull-3">
</div> -->
<div class="row">
<img src="images/12.jpg" class="col-lg-4 col-lg-push-8">
<img src="images/13.jpg" class="col-lg-4 col-lg-pull-4">
</div>
</div>
栅格嵌套 *
在整个栅格系统中, 每一个栅格行中的占用了列的元素 (指的是指定了占用12份中几分的元素) ,也可以看做一个栅格容器
<div class="container">
<div class="row">
<div class="col-lg-4">
//这里也是分为12份的, 也可以通过尺寸控制子元素占用的份数
</div>
<div class="col-lg-4"></div>
</div>
</div>
案例:
<div class="container">
<div class="row">
<div class="col-lg-6">
<!--这里也是分为12份的, 也可以通过尺寸控制子元素占用的份数-->
<img src="images/13.jpg" class="col-lg-4">
<img src="images/13.jpg" class="col-lg-4">
<img src="images/13.jpg" class="col-lg-4">
</div>
<div class="col-lg-6">
哈哈哈哈哈哈
</div>
</div>
</div>
响应式隐藏与显示 *****
* 的取值三种: block , inline-block , inline ,表示显示时的元素类型 !
案例:
小屏幕显示文字描述, 大屏幕显示图文效果:
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
