CSS框架之BootStrap
⼀、CSS框架：
1、定义：CSS框架是⼀系列CSS⽂件的集合体，包含了基本的元素重置、页⾯排版、⽹格布局、表单样式、通⽤规则等代码块，⽤于简化web前端开发的⼯作，提⾼⼯作效率。
2、CSS框架的优点：提⾼CSS代码重⽤效率，基础的代码不需要重复编写；
提供统⼀⽽规范的CSS编码规则，有利于团队协作；
浏览器对其兼容性较好。
⼆、BootStrap：
1、定义：BootStrap是当前较为流⾏的CSS框架之⼀，是Twitter退出的⼀个⽤于前端开发的开源⼯具包。
2、优点：企业开发多使⽤某种CSS框架，其中以BootStrap为⽬前使⽤居多；
有利于学习和理解其他框架。
eg：第⼀个BootStrap界⾯(⾸先引⼊bootstrap.min.css）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>bootstrap_01</title>
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
<h3>你好，欢迎学习BootStrap!</h3>
</body>
</html>
3、BootStrap基本样式—栅格
（1）栅格基本使⽤⽅式：
a. 使⽤.container(1170px)或container—fluid包裹；
b.列应当包含在⾏“row”中；
c.列的基本格式：（col-屏幕⼤⼩-数字）。
eg：栅格使⽤
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>bootstrap_01</title>
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" >col-3</div>
<div class="col-md-9" >col-9</div>
</div>
</div>
</body>
</html>
（2）栅格基本使⽤⽅式⼆：
⼀⾏多余12列时⾃动换⾏；列偏移（.col-md-offset-n：向右偏移n列）；嵌套列（在⼀个col下再使⽤row产⽣⼀个或多个⾏）eg：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Hello Bootstrap</title>
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!-- 添加IE8⽀持 -->
<!--[if lt IE 9]>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3" >.col-md-6</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-4" >4</div>
<div class="col-md-8" >8</div>
</div>jquery框架定义
</div>
</div>
</div>
</body>
</html>
4、排版：
（1）基于html标签样式：h1-h6、p、mark、del、strong；
（2）⽂本对齐：Text-left text-right text-center text-nowrap；
（3）列表：list-unstyled(去掉标记)、list-inline(将li显⽰在⼀⾏)。
5、表格样式：
（1）基本样式：table-striped：条纹表格；table-bordered：带边框表格；
table-hover:⿏标悬停；table-condensed：紧缩表格；
（2）状态类：给单元格设置颜⾊：.active,.success,.info,.warning,.danger
（3）响应式表格：table-responsive
6、表单样式：
（1）基本样式：form-control：表单元素的宽度属性为100%；input-group：表单分组；
checkbox-inline：在⼀⾏显⽰checkbox;Radio-inline：在⼀⾏显⽰radio；
disabled：禁⽤；readonly：只读；
.has-warning、.has-error或.has-success：表单校验；
添加图标：has-feedback；控件尺⼨：input-lg,input-sm
（2）表单其他样式：form-inline：内联表单；form-horizontal:⽔平标签。
（3）按钮：btn：显⽰为⼀个按钮，⽤于button元素或其他元素；
颜⾊：btn-default,btn-primary,btn-success,btn-info,btn-warning,btn-danger,btn-link;              尺⼨：btn-lg,btn-sm,btn-block;
disabled：禁⽤。
（4）图⽚：响应式图⽚：img-responsive;
图⽚形状：img-rounded,img-cride,img-thumbnail.
7、辅助⼯具：
（1）⽂字颜⾊：text-muted，text-primary，text-success
text-info，text-warning，text-danger
（2）背景颜⾊：bg-muted，bg-primary，bg-success
bg-info，bg-warning，bg-danger
（3）浮动：Pull-xx: right:xxx%，Push-xx：left: xxx%，clearfix
（4）内容居中：center-block
（5）显⽰或隐藏：show,hidden
（6）响应式⼯具：visible-xs-*：可见，hidden-xs：隐藏
8、BootStrap组件
（1）下拉菜单：dropdown,dropdown-menu,
dropdown-header：不可点击的菜单
（2）按钮组：button-group;btn-group-vertical：垂直排列
（3）导航：a.基本导航：nav;nav-tabs：标签式导航；nav-pills：胶囊式导航；
b.导航条:Navbar, navbar-brand：品牌图标  ,navbar-btn：导航按钮
Navbar-text：导航⽂本 ,Navbar-left/navbar-right：元素居左/居右
navbar-fixed-top：固定在顶部 , navbar-fixed-bottom：固定在底部
navbar-default：反⾊
c.路径导航：breadcrumb
（4）标签：Label ， label-default ，label-primary
label-success ，label-info ，label-warning
label-danger
（5）列表：list-group；List-group-item：列表项；list-group-item-heading；list-group-item-text；  （6）⾯板: Panel ,panel-heading ,panel-title ,panel-body：
panel-footer ,panel-primary ,panel-success
panel-info ,panel-warning ,panel-danger
Panel和其它元素的组合
（7）分页：pagination;
（8）徽章：badge;
（9）巨幕：jumbotron;
（10）缩略图：thumbnail
eg：下拉菜单，按钮：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>bootstrap_01</title>
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <!--[if lt IE 9]>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>
<![endif]-->
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="dropdown">
<button type="button" class="btn btn-default" data-toggle="dropdown">下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">⼦菜单1</a></li>
<li><a href="#">⼦菜单2</a></li>
<li><a href="#">⼦菜单3</a></li>
<li><a href="#">⼦菜单4</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
</body>
</html>
eg：导航：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。