Bootstrap框架
Bootstrap框架
2.X 3.X 4.X # 推荐使用3.X版本
使用框架调整页面样式一般都是操作标签的class属性即可
bootstrap需要依赖于jQuery才能正常执行(动态效果)
引入方式
本地引入(最完整的)
1.引入jQuery
2.引入bootstrap的css文件
3.引入bootstrap的js文件
CDN引入
1.引入jQuery CDN
2.引入bootstrap css的 CDN 3.4.1
3.引入bootstrap js的 CDN 3.4.1
在Bootstrap上复制别的网站的HTML代码
布局容器
"""
第一次使用该框架的时候最好采用本地导入的方式
让pycharm记住bootstrap的关键字
"""
container 左右留白
container-fluid 左右不留白
栅格系统
row 行 # 一个row就是一行 一行是固定的12份
col-md-1 中等屏幕 桌面显示器 (≥992px)
col-sm-1 小屏幕 平板 (≥768px)
col-xs-1 超小屏幕 手机 (<768px) 手机端如果发生变形就用这个类
col-lg-1 大屏幕 大桌面显示器 (≥1200px)
.col-md-offset-* 列偏移
######可以在小份中再次分12份####
<div class="container">左右留白
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-lg-6 c1"></div>
<div class="col-lg-4 c1"></div>
<div class="col-lg-2 c1"></div>
</div>
</div>
<div class="col-md-6 c1"></div>
<div class="col-lg-4 c1"></div>
<div class="col-lg-8 c1"></div>
<div class="col-lg-2 c1"></div>
<div class="col-lg-8 c1"></div>
<div class="col-lg-2 c1"></div>
<div class="col-lg-8 c1">
<div class="row">
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
<div class="col-lg-1 c1"></div>
</div>
</div>
<div class="col-lg-4 c1"></div>
</div>
</div>
表格与表单
表格
关键类名:
text-center 文字居中
table table-striped table-bordered table-hover 给table用的
success danger warning 改变框颜色
<div class="container">左右留白
<div class="row">
<div class="col-md-8 col-lg-offset-2">
<h2 class="text-center">用户数据</h2>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr class="success">
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td>jason</td>
<td>18</td>
<td>读书</td>
</tr>
<tr class="warning">
<td>tony</td>
<td>20</td>
<td>电影</td>
</tr>
<tr>
<td>kevin</td>
<td>25</td>
<td>美女</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
表单
关键类名:
form-control #input框变长
btn btn-danger btn-block 修改submit提交按钮的样式
注意:
radio和checkbox不要加form-control !!!
<h2 class="text-center">用户注册</h2>
<form action="">
<p>username:
<input type="text" class="form-control"></p>
<p>password:
<input type="password" class="form-control"></p>
<p>
<select name="" id="" class="form-control">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</select></p>
<input type="submit" class="btn btn-danger btn-block">
</form>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
按钮组
a标签变成按钮
类名:btn btn-primary
其他按钮
类名:btn btn-info btn-block 样式 (修改其css调整颜色)
btn-lg btn-sm 大小
<a href="" class="btn btn-primary">点我</a>
<input type="reset" class="btn btn-info">
<input type="reset" class="btn btn-info btn-sm">
<input type="reset" class="btn btn-info btn-lg">
<input type="reset" class="btn btn-info btn-block">
图片
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
图标
bootstrap自带的
加个span标签
通过span标签修改class属性值(下图选中的就是class)
fontawesome网站
专门提供图标库 # 完美兼容bootstrap框架
先下载
然后解压后cv进pycharm
用link引入后就可以随意使用了
复制图标的源码然后添加
例如:
<i class="fa fa-bath" aria-hidden="true">
颜色可以用style直接修改颜色
导航条
直接在bootstrap里复制源码
颜色可改
其他
直接取拷
elementui
类似bootstrap框架 用法一致