目录
Bootstrap简介
- 响应式布局: 能根据浏览器屏幕大小动态布局
- 安装:
- 官网下载bootstrap3.3.7
- css文件夹留一个bootstrap.min.css
- fonts文件夹不动
- js文件夹留一个bootstrap.min.js
- bootstrap框架是基于jQuery的, 所以用框架动态效果的时候, 必须先导入jQuery
- 需要导入的文件: 1. jQuery, 2. css文件, 3. js文件
- bootstrap学习内容: css样式, 组件, js插件
页面布局
Normalize.css
- 保证浏览器对样式的渲染是一致的
布局容器
- 使用前端框架之后, 所有的标签样式的调整, 全部是通过class属性值来的
<div class="container"></div>, 左右两边留白<div class="container-fluid"></div>, 全屏显示
栅格系统
默认情况下, 每行会均分成12分, 可以通过col-md-Num来选择想要占几份
注意已经占了几分, 还剩几分, 和需为12份
栅格参数: xs, 超小屏幕; sm,小屏幕; md, 中等屏幕; lg, 大屏幕
代码:
<div class="container"><div class="row">...</div></div>列偏移:
<div class="col-md-6 c1 col-md-offset-3"></div>, 往右边偏移3列嵌套, 通过row来划分
<style> .c1 { background-color: red; height: 50px; border: 2px solid black; } </style> <div class = "container"> <div class = "row c1"> <div class = "col-md-3 c1"></div> <div class = "col-md-9 c1"></div> <div class = "col-sm-3 c1"></div> <!--响应式布局--> <div class = "col-sm-9 c1"></div> </div> </div>
媒体查询
响应式布局内部原理, 屏幕宽度小于500px, 更换c1样式
<style>
@media screen and (max-width: 500px){
.c1 {
background-color: yellow;
height: 50px;
border: 2px dashed purple;
}
}
</style>文本样式
文本样式
<h1>python脱产12期 <small>是最牛逼的</small></h1>, small标签内容为副标题
<p class="lead">python脱产12期</p>, lead标签为段落内容突出显示
<p class="lead">python脱产<mark>12期</mark></p>, mark标签为文本高亮显示
<em>python脱产12期</em>, 斜体
<p class = "text-center">python脱产12期</p>, 文本对齐
<abbr title="一种编程语言">python</abbr>, 缩略语
<address>[email protected]</address>, 邮箱
<!--引用-->
<blockquote>
<p>人生无处不青山</p>
<footer class="blockquote-reverse">maozedong<cite title="Source Title">主席诗文集</cite></footer>
</blockquote> <code>print('hello world')</code>, 单行代码
<pre><p>Sample text here...</p></pre>, 多行代码
表格样式
table-hover: 表格中的每一行对鼠标悬停状态作出响应
table-striped: 表格条纹
table-bordered: 表格边框
class="success": 设置行或单元格颜色
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2"> <!--占8份然后居中-->
<h2 class="text-center">数据展示</h2>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr class="success">
<th>用户名</th>
<th>密码</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>jason</td>
<td>123</td>
<td>学习</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>js插件
模态框
滚动监听
标签页
表单样式
表单添加加样式: form-control
form-group: 在块级标签中添加, 增大与下个的间隙
form-inline: 内联样式, 输入框在一行
clearfix: 清除浮动带来的影响
placeholder: 文本留白
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">注册页面</h2>
<form action="" class = "form-inline">
username: <input type="text" class="form-control">
password: <input type="text" class="form-control">
<p class="form-group"><input type="submit" class="btn btn-success"></p>
<p><a href="#" class="btn btn-success btn-lg">点我有你好看</a></p>
</form>
</div>
</div>
</div>示例: 校验用户名是否存在
pull-right: 向右浮动
class = "has-error": 错误信息校验状态
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">注册页面</h2>
<form action="">
<div class="form-group">
username: <input type="text" class="form-control" id="d2">
<span style="color: red" class="pull-right"></span>
<br>
<input type="button" class="btn btn-success pull-right" value="注册" id="d1">
</div>
</form>
</div>
</div>
</div>
<script>
$('#d1').on(
'click', function () {
var userVal = $('#d2').val();
if (userVal.length == 0) {
$(this).parent().addClass('has-error').children().eq(1).text('用户名不能为空!')
}
}
);
$('#d2').on(
'focus', function () {
$(this).next().text('').parent().removeClass('has-error')
}
)
</script>组件
字体图标
可以将图标当做文本处理
<span class="glyphicon glyphicon-user"></span>
图标库: Font Awesome-->下载font-awesome-4.7.0-->link引入...min.css-->英文搜索
导航
class = "navbar-inverse": 反色导航条
按钮组
颜色: btn-颜色
尺寸: btn-尺寸; btn-block, 宽度拉伸至父标签100%
巨幕
面板
图片
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">背景色
<p class = "bg-danger">123</p>
!important: 执行优先级最高, 高于行内样式
图书管理系统页面搭建
<!--导航条开始-->
<nav class="navbar navbar-inverse"...></nav>
<!--导航条结束-->
<div class="container">
<div class="row">
<div class="col-md-3">
<!--列表组开始-->
<div class="list-group">
</div>
<!--列表组结束-->
</div>
<div class="col-md-9">
<!--面板开始-->
<div class="panel panel-default">
<!--分页开始-->
<div class="text-center">
<nav aria-label="Page navigation">
</nav>
</div>
<!--分页结束-->
</div>
<!--面板结束-->
</div>
</div>
</div>