本文详细介绍了流行的CSS框架BootStrap，包括其定义、优点，以及在排版、栅格系统、表格样式、表单样式、辅助工具等方面的应用。此外，还讨论了BootStrap的JavaScript插件，如模态框、导航和标签页等。
一、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" style="background-color: red">col-3</div>
<div class="col-md-9" style="background-color: green">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" style="background-color:yellow">.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" style="background-color: red">4</div>
<div class="col-md-8" style="background-color: blue">8</div>
</div>
</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:导航：
<!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>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">网站名称</a>
</div>
<div class="collapse navbar-collapse" id="menu1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li ><a href="#">公司简介</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
产品目录<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">产品1</a></li>
<li><a href="#">产品2</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" name="q" placeholder="请输入关键字" />
</div>
<button type="button" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
</body>
</html>三、JavaScript插件：
1、模态框：data方式调用：<button type="button" data-toggle="modal"
data-target="#myModal">Launch modal</button>
js方式调用：$('#myModal').modal(options)
2、标签页：data方式调用：<li role="presentation" class="active">
<a href="#home" aria-controls="home" role="tab"data-toggle="tab">Home</a>
</li>
js方式调用：$('#someTab').tab('show')
事件：show.bs.tab 显示前触发（1）；shown.bs.tab 显示后触发（2）；
hide.bs.tab 隐藏前触发（3）；hidden.bs.tab 隐藏后触发（4）
3、轮播图：data方式调用：<div id="carousel-example-generic"
class="carousel slide"data-ride="carousel">
</div>
js方式调用：$('.carousel').carousel()
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-12">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
打开对话框
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
……
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>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-12">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
首页内容
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">个人信息</div>
<div role="tabpanel" class="tab-pane fade" id="messages">消息内容</div>
<div role="tabpanel" class="tab-pane fade" id="settings">设置</div>
</div>
</div>
</div>
</div>
</body>
</html>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-12" style="background-color: blue">
<div class="carousel slide" data-ride="carousel" id="carousel-example">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1" class="active"></li>
<li data-target="#carousel-example" data-slide-to="2" class="active"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./img/t.jpg"/>
</div>
<div class="item">
<img src="./img/t2.jpg"/>
</div>
<div class="item">
<img src="./img/t3.jpg"/>
</div>
</div>
<a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
扫一扫
1382
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
