版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35537301/article/details/83241922
1、bootstrap介绍
响应式页面开发:根据上网设备的不同自动调节显示的效果
bootstrap
- webcss框架
- 集合了html/css/jquery为一家
- 创建响应式的页面
- 响应式:适配不同的上网设备
2、入门案例
2.1 使用步骤
-
-
导入jquery.js文件
-
导入bootstrap.js文件
-
导入bootstrap.css文件
-
创建视口
<meta name="viewport" content="width=device-width, initial-scale=1"> -
创建布局容器
-
方式一
<div class="container"> ... </div> -
方式二
<div class="container-fluid"> ... </div>
-
2.2 bootstrap模板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap模板</title>
<!--创建视口-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--导入jQuery.js文件-->
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<!--导入bootstrap.js-->
<script type="text/javascript" src="../js/bootstrap.js" ></script>
<!--导入bootstrap.css文件-->
<link rel="stylesheet" href="../css/bootstrap.css" />
</head>
<body>
<!--创建布局容器:方式2-->
<div class="container">
<!--这里写代码-->
<div style="border: solid 1px red; height: 200px;"></div>
</div>
<!--创建布局容器:方式1-->
<div class="container-fluid">
<!--这里写代码-->
<div style="border: solid 1px red; height: 200px;"></div>
</div>
</body>
</html>
3、组成部分
3.1 全局CSS
- 设置全局 CSS 样式
- 基本的 HTML 元素均可以通过 class 设置样式并得到增强效果
- 先进的栅格系统
3.2 组件
3.3 JavaScript
4、全局CSS
4.1 栅格系统
一行分为12格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap栅格系统</title>
<!--创建视口-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--导入jQuery.js文件-->
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<!--导入bootstrap.js-->
<script type="text/javascript" src="../js/bootstrap.js" ></script>
<!--导入bootstrap.css文件-->
<link rel="stylesheet" href="../css/bootstrap.css" />
</head>
<body>
<!--创建布局容器:方式2-->
<div class="container">
<!--这里写代码-->
<div style="border: solid 1px red; height: 20px;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
<div style="border: solid 1px red; height: 20px;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
<div style="border: solid 1px red; height: 20px;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
<div style="border: solid 1px red; height: 20px;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
<div style="border: solid 1px red; height: 20px;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
<div style="border: solid 1px red; height: 20px;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
<div style="border: solid 1px red; height: 20px;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
<div style="border: solid 1px red; height: 20px;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
<div style="border: solid 1px red; height: 20px;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
<div style="border: solid 1px red; height: 20px;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
<div style="border: solid 1px red; height: 20px;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
<div style="border: solid 1px red; height: 20px;" class="col-lg-1 col-md-2 col-sm-4 col-xs-6"></div>
</div>
</body>
</html>
4.2 表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
<link rel="stylesheet" href="../css/bootstrap.css" />
</head>
<body>
<div class="container">
<h2>用户信息</h2>
<!--
table:表格内部添加横向分割线
table-hover:启用鼠标悬停状态
table-bordered:为所有表格的单元格添加边框
-->
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
</tr>
<tr>
<td>2</td>
<td>Debbie</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>4.3 表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script type="text/javascript" src="../js/bootstrap.js" ></script>
<link rel="stylesheet" href="../css/bootstrap.css" />
</head>
<body>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="lastname" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="lastname" placeholder="请再次输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 请记住我
</label>
</div>
</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>