Bootstrap前端框架的使用
作者:互联网
前端框架Bootstrap
该框架已经帮你写好了很多页面样式,你如果需要使用,只需要下载它对应文件,之后直接cv拷贝即可
在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可
版本选择建议使用v3版本:https://v3.bootcss.com/
注意
bootstrap的js代码是依赖于jQuery的,也就意味着你在使用Bootstrap动态效果的时候,一定要导入jQuery,第一次使用一定要下载本地版文件 否则会没有提示
布局容器
<div class="container"> 左右两侧有留白</div> <div class="container-fluid">左右两侧没有留白</div> #后续在使用Boostrap做页面的时候,上来先写一个div class=container,之后再div内部书写页面
栅格系统
<div class="row"></div> 写一个row就是将所有的区域划分成份 <div class="col-md-6">获取你所要的份数 在使用Bootstrap的时候 脑子里面一定要做12的加减法 不同的屏幕有不同的分配方法: .col-xs- .col-sm- .col-md- .col-lg- 针对不同的显示器 bootstrap 会自动选择对应的参数 如果想要兼容所有屏幕,布局不变,自动响应,把四个都加上 <div class="clearfix"></div> //消除浮动 列偏移 offset-*
排版
bootstrap 默认将所有原生的HTML标签的文本字体,统一设置成了肉眼可以接受的样式 <p class="text-left">Left aligned text.</p> 居左 <p class="text-center">Center aligned text.</p> 文本标签居中 <p class="text-right">Right aligned text.</p> <p class="text-justify">Justified text.</p> <p class="text-nowrap">No wrap text.</p>
表格
.table 表格 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。 .table-bordered 类为表格和其中的每个单元格增加边框。 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。 .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作 <table class="table table-hover table-striped table-bordered"> <tr class="success"> <td>1</td> <td>jason</td> <td>123</td> <td>study</td> </tr> <tr class="active">...</tr> <tr class="success">...</tr> <tr class="warning">...</tr> <tr class="danger">...</tr> <tr class="info">...</tr>
表单
.form-control 添加到input框 (checked radio加了不好看) .has-error 错误提示 input所在的父标签 .has-success 正确提示 input所在的父标签 .form-inline 水平显示 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局 <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> <p> <select name="" id="" class="form-control"> <option value="">111</option> <option value="">222</option> <option value="">333</option> </select> </p> <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea> <input type="submit"> </form> </div> </div> # 针对表单标签 加样式就用form-control class="form-control" """ <input type="checkbox">222 <input type="radio">333 checkbox和radio我们一般不会给它加form-control,直接使用原生的即可 """ # 针对报错信息 可以加has-error(input的父标签加) <p class="has-error"> username: <input type="text" class="form-control"> </p>
按钮
# 按钮颜色 btn btn-default 默认样式 btn btn-primary 首选项 btn btn-success 成功 btn btn-info 一般信息 btn btn-warning 警告 btn btn-danger 危险 btn btn-link 链接 # 按钮大小 .btn-lg、.btn-sm 或 .btn-xs # 按钮块状 .btn-block 拉伸至父元素100%的宽度 # 禁用按钮 disabled="disabled <a href="https://www.mzitu.com/" class="btn btn-primary">点我</a> <button class="btn btn-danger">按我</button> <button class="btn btn-default">按我</button> <button class="btn btn-success">按我</button> <button class="btn btn-info">按我</button> <button class="btn btn-warning">按我</button> <button class="btn btn-warning btn-lg">按我</button> <button class="btn btn-warning btn-sm">按我</button> <button class="btn btn-warning btn-xs">按我</button> <input type="submit" class="btn btn-primary btn-block"> 通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素。
图表
http://www.fontawesome.com.cn/ pull-left 居右 pull-right 居右 <h2 class="text-center">登陆页面 <span class="glyphicon glyphicon-user"></span></h2> <style> span { color: greenyellow; } </style> # 扩展
导航条
.navbar-default 默认白色 .navbar-inverse 类可以改变导航条的外观。 .navbar-fixed-bottom 类可以让导航条固定在底部 <nav class="navbar navbar-inverse"> <nav class="navbar navbar-default">
分页器
.active 激活状态 .disabled 禁用状态 <nav aria-label="..."> <ul class="pagination"> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> ... </ul> </nav> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav>
弹框
https://lipis.github.io/bootstrap-sweetalert/ 状态:success warning error info swal(内容) swal('你还好吗?') undefined swal('你还好吗?') undefined swal('你还好吗?','我不好,想你了!') undefined swal('你还好吗?','我不好,想你了!','success') undefined swal('你还好吗?','我不好,想你了!','warning') undefined swal('你还好吗?','我不好,想你了!','error') undefined swal('你还好吗?','我不好,想你了!','info') undefined # 我们在后面的课程中 还会涉及到该部分内容
进度条
.active 活动状态
列表
<div class="list-group"> <a href="#" class="list-group-item active"> Cras justo odio </a> <a href="#" class="list-group-item">Dapibus ac facilisis in</a> <a href="#" class="list-group-item">Morbi leo risus</a> <a href="#" class="list-group-item">Porta ac consectetur ac</a> <a href="#" class="list-group-item">Vestibulum at eros</a> </div>
面板
<div class="panel panel-default"> <div class="panel-heading">Panel heading without title</div> <div class="panel-body"> Panel content </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div>
标签:...,undefined,框架,swal,前端,Bootstrap,form,btn 来源: https://www.cnblogs.com/niuyeji648/p/14800027.html