一、bootstrap环境搭建
基础知识
Bootstrap，基于HTML、cSS、JAVASCRIPT的前端框架。
该框架已经预定义了一套CSS样式和与样式对应的JS代码。(对应的样式有对应的特效)。开发人员只需要编写HTML结构,添加 bootstrap固定的class样式,就可以轻松完成指定效果的实现。
作用:
Bootstrap 使得Web开发更加快捷，高效。·
BootStrap支持响应式开发，解决了移动互联网前端开发问题,
响应式布局:一个网站的展示能够兼容多个终端(手机、iPad、PC等)，而不需要为每个终端单独做一个展示版本。此概念专为解决移动互联网浏览而诞生的。,
响应式布局,使得网站仅适用一套样式,就可以在不同分辨率下展示出不同的舒适效果，大大降低了网站开发维护成本，并且能带给用户更好的体验性。
环境搭建
只需要第一个即可。下载之后放到建立的web文件中
注:完整版用于源码学习，但因为文件大小问题，不适合网络间传递。压缩版用于网络发布,压缩版和完整版的唯一区别,仅为压缩版将代码间的大量空格和回车换行删除掉了,节约了大量的空间,功能上完全相同,适用于网络间快速传递。但因为没有了空格和换行，源代码难以阅读。
以下是基本模版，可到bootstrap官网去查看
<html lang="zh-CN"> <!--HTML页面使用的是中文简体-->
<head>
<meta charset="utf-8"> <!--设置HTML页面的字符集 utf-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 使用IE最新的渲染模式 展示页面 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<!--
viewport：视口
视口：浏览器上 网页内容 可视区域
视口作用：用于移动设备 将大型页面进行比例缩放显示
以下的设置 只在移动设备上生效
width=device-width 设置视口的高度 device-width设备宽度 动态变化
initial-scale=1 初始化缩放设置。 移动设备打开网页时，缩放的级别 1 就是100% 正常
1~5级别
-->
<title>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
二、布局容器
BootStrap必须需要至少一个布局容器，才能为页面内容进行封装和方便的样式控制，相当于一个画板。
任意元素使用了布局容器的样式，都会成为一个布局容器。建议使用div作为布局容器
<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>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="border: 1px solid red;">
这个布局容器！！！居中两端留白
</div>
<div class="container-fluid" style="border: 1px solid red;">
这个布局容器！！！占据视口100%宽度
</div>
</body>
</html>
三、栅格系统
为了方便在布局容器中进行网页的布局操作。BootStrap提供了一套专门用于响应式开发布局的栅格系统。栅格系统将一行分为12列,通过设定元素占用的列数来布局元素在页面上的展示位置
作用:
可以让开发人员更加轻松进行网页布局，并且轻松进行响应式开发。
栅格特点
基本的书写方式必须是:容器—行---列。 跟HTML表格相似:定义一个表格----行-----单元格
列元素的书写顺序，决定布局顺序，先写的列元素会被先布局到行上。
列元素的占用列数，定义列元素的大小
“行(row)” 必须包含在 .container（固定宽度)或 .container-fluid (100%宽度)
中
行使用的样式".row"，列使用样式 " col- * - * " 元素内容应当放置于"列(column)"
内。
栅格参数 : “col-屏幕尺寸-占用列数”
注意：
如果列元素占用列数,总和小于等于12，这些列元素还排列在一行上;
如果列元素占用列数,总和大于12,大于12的列元素，就会另起一行排列
行和列可以进行无限嵌套，嵌套方式必须为列----行-----列----行。。。。分成12列是指row中分成12列，不是页面上的12列，所以可以嵌套
嵌套例子：
<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>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-3" style="border:1px solid green;">
<div class="row">
<div class="col-md-1" style="border:2px solid red;">
如果缩小了窗口，会占满，放大窗口可见，那么如何解决呢？可以看下面屏幕尺寸的例子。
</div>
</div>
</div>
</div>
</div>
</body>
</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>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="border:1px solid green;">
多个屏幕尺寸共同设置
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 " style="border:1px solid green;">
默认的屏幕尺寸是占满一行12列
</div>
<div class="col-xs-3 " style="border:1px solid green;">
如果使用小屏幕的设置则沿用该设置
</div>
</div>
</div>
</body>
</html>
结论：若设置了某个屏幕尺寸的样式,那么比该尺寸大的屏幕,会沿用该设置;比该尺寸小的屏幕，会默认一个元素占12列的设置。
例如:设置了col-md-4，那么相当于也设置了col-lg-4。
其他屏幕尺寸均默认为col-sm-12,col-xs-12
列偏移
通常情况下我们需要将元素居中显示,需要左边空出一定的空白区域,这里我们就可以使用列偏移来达到效果。
.col-屏幕尺寸-offset- * 在指定屏幕尺寸下，向右偏移*个列。
<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>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-4 col-md-offset-2" style="border:1px solid green;">
列偏移,向右偏移2列
</div>
<div class="col-sm-4 col-md-offset-5" style="border:1px solid green;">
列偏移,向右偏移5列，超过12后另起一行
</div>
</div>
</div>
</body>
</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>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-4 hidden-sm" style="border:1px solid green;">
只在小屏下隐藏
</div>
<div class="col-sm-4 visible-lg" style="border:1px solid green;">
只在大屏下显示
</div>
</div>
</div>
</body>
</html>
五、列表
.list-inline
将列表所有元素放置于一行。
<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>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<ul class="list-inline">
<li>3个</li>
<li>列表项</li>
<li>都在一行上</li>
</ul>
</body>
</html>
六、按钮
任何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>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<a class="btn btn-default">默认按钮</a>
<a class="btn btn-success">绿色success按钮</a>
<a class="btn btn-danger">红色danger按钮</a>
<a class="btn btn-danger btn-lg">大红色danger按钮</a>
<a class="btn btn-danger btn-lg active">大红色danger按钮,点击样式</a>
<a class="btn btn-danger disabled">红色禁止点击按钮,class内设置disabled属性</a>
<a class="btn btn-danger" disabled="disabled">红色禁止点击按钮,在类外设置disable属性</a>
</body>
</html>
七、导航条
BootStrap,已经提供了完整的导航条实例，通常情况下，我们仅需进行简单修改即可使用。
以下代码根据bootstrap的帮助手册例子修改
<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>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<!--导航条-->
<nav class="navbar navbar-inverse"><!--inverse可以使导航条字和背景色互换-->
<div class="container-fluid">
<!--导航图标及汉堡按钮-->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<!--阅读器专用样式-->
<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="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">手机数码<span class="sr-only">(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">联系客服</a></li>
<li><a href="#">联系站长</a></li>
<li><a href="#">加入QQ群</a></li>
<li role="separator" class="divider"></li><!--分割线-->
<li><a href="#">帮助</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">查看网站源码</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
</body>
</html>
八、轮播图
BootStrap,已经提供了完整的轮播图实例，通常情况下，我们仅需进行简单修改即可使用。
轮播图.DIV的定时换图属性 : data-interval = "毫秒值"
注意:多个轮播图必须修改轮播图的ID。
<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>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<!--轮播图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="10000">
<!-- 小圆点 -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- 轮播图图片 主体部分 -->
<div class="carousel-inner" role="listbox">
<div class="item active"> <!--只能有一张为active状态-->
<img src="../img/1.jpeg"> <!--alt 替代图片文字-->
<div class="carousel-caption">
图片1说明信息 <!--写不写无所谓-->
</div>
</div>
<div class="item">
<img src="../img/2.jpeg">
<div class="carousel-caption">
图片2说明信息
</div>
</div>
<div class="item">
<img src="../img/3.jpeg">
<div class="carousel-caption">
图片3说明信息
</div>
</div>
</div>
<!-- 左右控制按钮 -->
<a class="left carousel-control" href="#carousel-example-generic" 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-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--轮播图2 修改轮播图id 小圆点 左右控制-->
<div id="lbt2" class="carousel slide" data-ride="carousel" data-interval="10000">
<!-- 小圆点 -->
<ol class="carousel-indicators">
<li data-target="#lbt2" data-slide-to="0" class="active"></li>
<li data-target="#lbt2" data-slide-to="1"></li>
<li data-target="#lbt2" data-slide-to="2"></li>
</ol>
<!-- 轮播图图片 主体部分 -->
<div class="carousel-inner" role="listbox">
<div class="item active"> <!--只能有一张为active状态-->
<img src="../img/1.jpeg"> <!--alt 替代图片文字-->
<div class="carousel-caption">
图片1说明信息 <!--写不写无所谓-->
</div>
</div>
<div class="item">
<img src="../img/2.jpeg">
<div class="carousel-caption">
图片2说明信息
</div>
</div>
<div class="item">
<img src="../img/3.jpeg">
<div class="carousel-caption">
图片3说明信息
</div>
</div>
</div>
<!-- 左右控制按钮 -->
<a class="left carousel-control" href="#lbt2" 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="#lbt2" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
九、排版方式
BootStrap 提供统一的排版方式设置，方便开发人员对内容板式进行调整
.text-left 使元素内容靠左显示
.text-center 使元素内容居中显示
.text-righte 使元素内容靠右显示
<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>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-center">
图片跟文字一起居中
<img src="../img/1.jpeg" >
</div>
<div class="text-right">
<img src="../img/2.jpeg" >
</div>
</body>
</html>
十、表单元素
更多样式可以查看bootstrap帮助文档，以下提供部分例子：
<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>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal">
<div class="form-group has-error"><!--表单错误在class内加入has-error，正确则是has-success-->
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-5">
<input type="text" class="form-control" placeholder="请输入用户名">
</div>
</div>
<div class="form-group has-success">
<label class="col-sm-2 control-label">密码</label>
<div class="col-sm-5">
<input type="password" class="form-control" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</body>
</html>
十一、分页条
只提供部分常用属性，具体可以去bootstrap帮助文档查看
<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>Bootstrap 101 Template</title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</head>
<body>
<nav aria-label="Page navigation">
<!--分页条整体列表-->
<ul class="pagination pagination-lg"> <!--尺寸更大-->
<!--上一页-->
<li class="disabled"> <!--设置成disabled时，最好把a标签的href属性也一同删去，这样用户点击时不会跳转-->
<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>
</body>
</html>
总结
以上就是bootstrap的基础知识，若想拓展学习则可以查看bootstrap的帮助文档。
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
