标签：框架 back 文字 响应 导航 boot 开发 表单 ati
bootstrap
简单、直观、强悍的前端开发框架，让web开发更迅速、简单。
来自Twitter，是目前很受欢迎的前端框架之一。 Bootrstrap
是基于HTML、CSS、JavaScript的，让书写代码更容易。 移动
优先，响应式布局开发。
bootstrap中文网址：http://www.bootcss.com/
一、引入：
<script type=‘text/javascript‘ src=‘js/jquery-3.3.1.min.js‘></script>
<script type=‘text/javascript‘ src=‘js/bootstrap.min.js‘></script>
<link rel=‘stylesheet‘ type=‘text/css‘ href=‘css/bootstrap.min.css‘>
二、bootstrap 容器
container-fluid 流体
container
1170
970
750
100%
三、bootstrap 栅格系统
bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度等分的样式类，
这些样式类组成了一套响应式、移动设备优先的流式栅格系统：
1、col-lg- #即小于1200折行排列，下面以此类推
2、col-md-#小于992折行排列
3、col-sm-#小于768折行排列
4、col-xs- #不折行排列
#列偏移：
col-md-4 col-md-offset-2
col-md-4 col-md-offset-2
#响应式布局伪代码：
#container有左右padding 15，row有左右margin -15,padding 15
<style>
.box{
height:200px;
max-width:200px;
background-color:gold;
border:1px solid #000;
margin:15px auto;
}
</style>
...
<div class=‘container‘>
<div class=‘row‘>
<div class=‘col-lg-3 col-mid-4 col-sm=6‘><div class=‘box‘></div></div>
<div class=‘col-lg-3 col-mid-4 col-sm=6‘><div class=‘box‘></div></div>
<div class=‘col-lg-3 col-mid-4 col-sm=6‘><div class=‘box‘></div></div>
<div class=‘col-lg-3 col-mid-4 col-sm=6‘><div class=‘box‘></div></div>
</div>
</div>
四、bootstrap 按钮
1、btn 声明按钮
2、btn-default 默认按钮样式
3、btn-primay
4、btn-success
5、btn-info
6、btn-warning
7、btn-danger
8、btn-link
9、btn-lg
10、btn-md
11、btn-xs
12、btn-block 宽度是父级宽100%的按钮
13、active
14、disabled
15、btn-group 定义按钮组
五、bootstrap 表单
1、form 声明一个表单域
2、form-inline 内联表单域
3、form-horizontal 水平排列表单域
4、form-group 表单组、包括表单文字和表单控件
5、form-control 文本输入框、下拉列表控件样式
6、checkbox checkbox-inline 多选框样式
7、radio radio-inline 单选框样式
8、input-group 表单控件组
9、input-group-addon 表单控件组物件样式 10、input-group-btn 表单控件组物件为按钮的样式
10、form-group-lg 大尺寸表单
11、form-group-sm 小尺寸表单
六、bootstrap 导航条
1、navbar 声明导航条
2、navbar-default 声明默认的导航条样式
3、navbar-inverse 声明反白的导航条样式
4、navbar-static-top 去掉导航条的圆角
5、navbar-fixed-top 固定到顶部的导航条
6、navbar-fixed-bottom 固定到底部的导航条
7、navbar-header 申明logo的容器
8、navbar-brand 针对logo等固定内容的样式
11、nav navbar-nav 定义导航条中的菜单
12、navbar-form 定义导航条中的表单
13、navbar-btn 定义导航条中的按钮
14、navbar-text 定义导航条中的文本
9、navbar-left 菜单靠左
10、navbar-right 菜单靠右
七、bootstrap 隐藏类
1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg
标签：框架 back 文字 响应 导航 boot 开发 表单 ati
原文地址：https://www.cnblogs.com/dalun101/p/9380585.html
