前端框架Bootstrap
该框架已经写好了很多页面样式,如果需要使用,只需要下载它对应文件,之后直接cv拷贝即可
在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可
版本选择建议使用v3版本:<https://v3.bootcss.com/>
### 注意
**bootstrap的js代码是依赖于jQuery的,也就意味着你在使用Bootstrap动态效果的时候,一定要导入jQuery**
布局容器
<style> .c1 { background-color: red; height: 100px; } </style> </head> <body> <div class="container c1"></div> //左右两侧有留白 <br> <div class="container-fluid c1"></div> // 左右两侧没有留白 </body> //后续在使用bootstrap做页面的时候 上来先写一个 div class = container, 之后在div内部书写页面
栅格系统
div class="row"></div> // 写一个row就是将所在的区域划分成12份 <div class="col-md-6"></div> // 在使用bootstrap的时候
格栅参数
.col-xs- .col-sm- .col-md- .col-lg-
针对不同的显示器 bootstrap会自动选择对应的参数
如果你想要兼容所有的显示器 你就全部加上即可
排版
bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接收的样式
效果一样,但是标签表达的意思不 一样(语义)
表格
<table class="table table-hover table-striped table-bordered "> <tr class="success"> <th>ID</th> <th class="text-center">USERNAME</th> <th class="text-center">PASSWORD</th> <th class="text-center">HOBBY</th> </tr> <!-- On rows --> <tr class="active">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> <tr class="info">...</tr>
表单
<div class="container"> <div class="col-md-8 col-md-offset-2"> <h2 class="text-center">登录页面</h2> <form action=""> <p>username:<input type="text" class="form-control"></p> <p>password:<input type="text" class="form-control"></p> <div class="col-sm-6 col-md-offset-3"> <p> <select name="" id="" class="form-control"> <option value="">111</option> <option value="">222</option> <option value="">333</option> </select> </p> </div> <input type="submit"> <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea> </form> </div> </div>
针对表单标签 加样式就 用form-control
<p> <input type="checkbox" >111 <input type="checkbox" >222 <input type="radio" >333 </p>
checkbox和radio我们一般不会给他加form-control, 直接使用原生的即可
针对 报错信息 可以加has-error(input的父标签)
<p class="has-error">username:<input type="text" class="form-control"></p>
弹框
swal('你好好吗') undefined swal('你好好吗?','我不好,想你了') undefined swal('你好好吗?','我不好,想你了','success') undefined swal('你好好吗?','我不好,想你了','warning') undefined swal('你好好吗?','我不好,想你了','error') undefined swal('你好好吗?','我不好,想你了','info') undefined