HTML学习笔记（三）
前言
HTML（结构）+CSS（美化）+JavaScript（操作），但是程序员不是美工，所有我们没有大量的时间去自己去写一条完整的网站界面，那么就有人提供了一条针对于开发人员使用的前端框架，方便我们开发人员使用，不需要在操心一些样式布局等操作。
Bootstrap框架
出身名门（FaceBook脸谱网），简单、直观、强悍的前端开发框架，我们需要学习开发框架给我们预先设计好的使用标准（API），让WEB开发更加迅速、简单用于开发响应式布局、移动端设备优先的WEB项目。（开发一个网站，可以同时适配PC、PHONE、IPAD）
响应式布局（Responsivedesign），意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
Bootstrap3应用的比较多，Bootstrap4开发的可能会有一些问题，但是又在Bootstrap3的基础上有增加一些操作API
1.安装
-
第一种：下载框架，使用本地的相对路径进行引入，可能会占用我们本地的资源，但是速度比较块
-
第二种：使用别人给我们提供的资源访问路径，我们使用绝对路径，引用Bootstrap框架
个人建议：CSS文件放置到head标签中，使用JavaScript文件，我们需要放置到
</body>之前
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap 的CSS文件-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<h1>陌上花</h1>
<h2>陌上花</h2>
<h3>陌上花</h3>
<h4>陌上花</h4>
<h5>陌上花</h5>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>`
2.容器
容器是整个Bootstrap的核心，才能方式各种组件（表单、表格等等），Bootstrap提供两种方式的容器:
container: 用于固定宽度并且支持响应式布局容器container-fluid:用于100%宽度,占据整个视图窗口的容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap 的CSS文件-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div class="container">
用于固定宽度并且支持响应式布局容器,有使用padding和margin
</div>
<div class="container-fluid">
用于100%宽度,占据整个视图窗口的容器
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>`
由于存在padding等属性的原因，这两种容器不能互相嵌套
3.核心：栅格系统
Bootstrap提供了一条响应式的流式栅格系统，它会随着屏幕尺寸给出不同的显示形式，系统会将一行等比例划分为12列（12份）
注意:
一行只能拥有十二列! 多余的自动挤出去显示在下一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap的css文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.row > div{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
<div class="col-md-1">1</div>
</div>
<div class="row">
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
md属性当屏幕过小是会不支持,会出现每一列数据各占一行的情况
栅格参数
同时设置不同模式占比 class=“col-xs-12 col-sm-3 col-md-4”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap 的CSS文件-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style>
.row > div{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-4">col-md-4</div>
<!-- 和操作12多余列会从新的一行开始 -->
<div class="col-xs-10 col-sm-9 col-md-8">col-md-8</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>`
4.表格
为任意 `` 标签添加
.table类可以为其赋予基本的样式 —
少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap的css文件 -->
<link href="webapp/css/bootstrap.css" rel="stylesheet">
<style>
.table-striped > tbody > tr:nth-of-type(odd) {
background-color: #eabdd0;
}
.table-hover > tbody > tr:hover {
background-color: #7fded4;
}
</style>
</head>
<body>
<div class="container">
<table class="table table-striped table-bordered table-hover">
<caption>宗门弟子表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>天资</th>
<th>来源地</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>石昊</td>
<td>男</td>
<td>8</td>
<td>独断万古</td>
<td>九天十地</td>
</tr>
<tr>
<td>元小雨</td>
<td>女</td>
<td>16</td>
<td>四万年一见</td>
<td>皇天</td>
</tr>
<tr>
<td>碧瑶</td>
<td>女</td>
<td>18</td>
<td>优秀</td>
<td>诛仙</td>
</tr>
<tr>
<td>婉婉</td>
<td>女</td>
<td>18</td>
<td>百年一见</td>
<td>九州</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
5.表单
表单主要是将客户端的数据传递给服务端（java/PHP/ASP/Python）处理数据，表单要传递数据控件必须要设置
name属性。
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的
<input>、<textarea>和<select>元素都将被默认设置宽度属性为width: 100%;。 将 label 元素和前面提到的控件包裹在.form-group中可以获得最好的排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap的css文件 -->
<link href="webapp/css/bootstrap.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<div class="container" >
<form class="form-horizontal">
<div class="form-group">
<label for="account" class="col-md-3 control-label">账号:</label>
<div class="col-md-6">
<input type="text" class="form-control" id="account" name="account" placeholder="请输入您的账号" autofocus required>
</div>
</div>
<div class="form-group">
<label for="password" class="col-md-3 control-label">密码:</label>
<div class="col-md-6">
<input type="password" class="form-control" id="password" name="password" placeholder="请输入您的密码" required>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-3 col-sm-9">
<label><input type="checkbox">记住密码</label>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-3 col-sm-9">
<button class="btn btn-primary">登录</button>
</div>
</div>
</form>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
6.按钮
为 <a>、<button>或<input>元素添加按钮类（button class）即可使用 Bootstrap 提供的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap的css文件 -->
<link href="webapp/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<a class="btn btn-default btn-lg">按钮1</a>
<input type="submit" value="按钮2" class="btn btn-success">
<input type="button" value="按钮3" class="btn btn-primary btn-sm">
<button class="btn btn-danger btn-xs">按钮4</button>
</div>
<div class="container">
<a class="btn btn-default btn-lg btn-block">按钮1</a>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
登录界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap的css文件 -->
<link href="webapp/css/bootstrap.css" rel="stylesheet">
<style>
body{
background: pink url("images/0012.jpg") no-repeat fixed center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-offset-4 col-md-4" style="margin-top: 200px">
<h3 class="text-center" style="color: #eeeeeeee">登录界面</h3>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-user"></span>
</div>
<input type="text" id="account" class="form-control" placeholder="请输入账号" autofocus required>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-lock"></span>
</div>
<input type="password" id="password" class="form-control" placeholder="请输入密码" required>
</div>
</div>
<div class="form-group">
<button class="form-control btn btn-primary" style="background : #183580">登录</button>
</div>
</form>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
1747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
