BootStrap学习
BootStrap
1、什么是BootStrap
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
2、学习BootStrap
2.1、BootStrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BootStrap的HTML标准模版</title>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<h1>hello ,world</h1>
<!-- 如果要使用bootstrap的js插件，必须先调入jQuery -->
<script src="js/jquery-3.6.0.min.js"></script>
<!-- 包括所有的bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</body>
</html>
2.2、布局容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<!--
布局容器
1、.container类用于固定宽度并支持襄响应式布局的容器。
<div class="container"></div>
2、.container-fluid类用于100%宽度，占据全面视口（viewport）的容器
<div class="container-fluid"></div>
-->
<!-- 1、.container类用于固定宽度并支持襄响应式布局的容器。 -->
<!-- <div class="container" style="background-color:red; height: 500px;">
.container类用于固定宽度并支持襄响应式布局的容器。
</div> -->
<!-- 2、.container-fluid类用于100%宽度，占据全面视口（viewport）的容器 -->
<div class="container-fluid" style="background-color:red; height: 500px;">.container类用于固定宽度并支持襄响应式布局的容器。</div>
</body>
</html>
2.3、栅格网格系统
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>栅格网格系统</title>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<div style="background-color: blue;">4</div>
<div style="background-color: pink;">8</div>
<hr>
<!-- 栅格网格系统
1、列组合
列总和数不能超过12，大于12则会自动换到下一行
2、列偏移
只需要在列元素上添加类名"col-md-offset-*"(其中*号表示要偏移的列组合数)，那么具有这个类名的列就会向右偏移。
例如：你在列元素上添加"col-md-offset-8"，表示该列向右移动8个列的宽度（要保证列与偏移列的总数不超过12，不然会致列段行|换行显示）
3、列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
在Bootstrap框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* （其中*代表移动的列组合数）。往前pull，往后push
4、列嵌套
Bootstrap框架在网格系统还支持列的嵌套
你可以在一个列中添加一个或者多个行(row)容器，然后在这个容器中插入列。
-->
<!-- 布局容器 -->
<div class="container">
<!-- 行元素 -->
<div class="row">
<!-- -->
<!-- 列元素 col-xs-数值 超小屏 ， col-md-sm数值 小屏 ， col-md-数值 常用这个， col-lg-数值 大屏幕 -->
<div class="col-md-4 col-lg-4" style="background-color: aqua;">4</div>
<div class="col-md-8 col-lg-8" style="background-color: royalblue;">8</div>
</div>
<hr>
<!-- 列组合 -->
<div class="row">
<div class="col-md-1" style="background-color: green;">1</div>
<div class="col-md-1" style="background-color: pink;">1</div>
<div class="col-md-1" style="background-color: red;">1</div>
<div class="col-md-1" style="background-color: yellow;">1</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: blueviolet;">6</div>
<div class="col-md-6" style="background-color: chartreuse;">6</div>
</div>
<div class="row">
<div class="col-md-4" style="background-color: aquamarine;">4</div>
<div class="col-md-4" style="background-color: olive;">4</div>
</div>
<!-- 列的总数不能超过12 例如：超过12会自动换行-->
<div class="row">
<div class="col-md-4" style="background-color: violet;">4</div>
<div class="col-md-4" style="background-color: yellowgreen;">4</div>
<div class="col-md-5" style="background-color: sandybrown;">5</div>
</div>
<hr>
<!-- 列偏移 -->
<div class="row">
<div class="col-md-1" style="background-color: green;">1</div>
<div class="col-md-1 col-md-offset-1" style="background-color: pink;">1</div>
<div class="col-md-1" style="background-color: red;">1</div>
<div class="col-md-1 col-md-offset-4" style="background-color: yellow;">1</div>
</div>
<hr>
<!-- 列排序 -->
<div class="row">
<div class="col-md-1" style="background-color: black;">1</div>
<div class="col-md-1 col-md-push-3"style="background-color: pink;">1</div>
<div class="col-md-1 " style="background-color: antiquewhite;">1</div>
<div class="col-md-1 col-md-pull-2" style="background-color: aqua;">1</div>
</div>
<hr>
<!-- 列嵌套 -->
<div class="row">
<div class="col-md-6" style="background-color: aqua;">
<div class="row">
<div class="col-md-1" style="background-color: coral;">1</div>
<div class="col-md-9" style="background-color: violet;">9</div>
<div class="col-md-1" style="background-color: hotpink;">1</div>
<div class="col-md-1" style="background-color: royalblue;">1</div>
</div>
</div>
<div class="col-md-6" style="background-color: chartreuse;">6</div>
</div>
<hr>
<div class="row">
<div class="col-md-3 col-sm-6" style="background-color: olive;">3</div>
<div class="col-md-3 col-sm-6" style="background-color: violet;">3</div>
<div class="col-md-3 col-sm-6" style="background-color: tomato;">3</div>
<div class="col-md-3 col-sm-6" style="background-color: royalblue;">3</div>
</div>
</div>
</body>
</html>
2.4、常用样式1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用样式</title>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<!--
常用样式
1、标题
Bootstrap对h1~h6的标题效果进行了覆盖
提供了对应的样式类名为非标题元素设置样式
副标题 small标签 或者 .small类名
2、段落
通过 .lead 来突出强调内容（其作用就是增大文本字号，加粗文本，而且对行高和margin也做对应的处理。）
<small>:小号字
<b><strong>：加粗,strong强调加粗
<i><em>：斜体
3、强调
.text-muted:提示，使用浅灰色（#999）
.text-primary:主要，使用蓝色（#428bca）
.text-success:成功,使用浅绿色（#3c763c）
.text-info:通知信息，使用浅蓝色（#31708f）
.text-warning:警告，使用黄色（#8a6b3d）
.text-danger：危险，使用褐色（#a94442）
4、对齐效果
Bootstrap通过定义四个类名来控制文本的对齐风格：
.text-left:左对齐
.text-center: 居中对齐
.text-right:右对齐
.text-justify:两端对齐
-->
<!-- 标题 -->
<h1>标题1<small>副标题</small></h1>
<h2>标题2<span class="small">副标题</span></h2>
<h3>标题3</h3>
<div class="h1">你好</div>
<hr>
<p>通过 .lead 来突出强调内容（其作用就是增大文本字号，加粗文本，而且对行高和margin也做对应的处理。）</p>
<p class="lead">通过 .lead
来突出<small>强调</small><b>内容</b>（其作用就是<strong>增大</strong>文本<i>字号</i>，加粗<em>文本</em>，而且对行高和margin也做对应的处理。）</p>
<hr>
<!-- 强调 -->
<div class="text-muted">.text-muted:提示，使用浅灰色（#999）</div>
<div class="text-primary"> .text-primary:主要，使用蓝色（#428bca）</div>
<div class="text-success">.text-success:成功,使用浅绿色（#3c763c）</div>
<div class="text-info"> .text-info:通知信息，使用浅蓝色（#31708f）</div>
<div class="text-warning">.text-warning:警告，使用黄色（#8a6b3d）</div>
<div class="text-danger"> .text-danger：危险，使用褐色（#a94442）</div>
<hr>
<!-- 对齐效果 -->
<p style="text-align: right;">Bootstrap通过定义四个类名来控制文本的对齐风格：</p>
<p class="text-left">左对齐 -Bootstrap通过定义四个类名来控制文本的对齐风格：</p>
<p class="text-right">右对齐 -Bootstrap通过定义四个类名来控制文本的对齐风格：</p>
<p class="text-center">居中对齐 -Bootstrap通过定义四个类名来控制文本的对齐风格：</p>
<p class="text-justify">两端对齐 -Bootstrap通过定义四个类名来控制文本的对齐风格：两端对齐 -Bootstrap通过定义四个类名来控制文本的对齐风格：两端对齐 -Bootstrap通过定义四个类名来控制文本的对齐风格：两端对齐 -Bootstrap通过定义四个类名来控制文本的对齐风格：</p>
</body>
</html>
2.5、常用样式2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用样式</title>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<!--
1、列表
无序列表(<ul><li>...</li></ul>)
有序列表(<ol><li>...</li></ol>)
定义列表(<dl><dt>...</dt><dd>...</dd></dl>)
2、代码
(1)使用<code></code>来显示单行内联代码
(2)使用<pre></pre>来显示多行块代码
样式：pre-scrollable(height,max-height高度固定，为340px，超过存在滚动条)
(3)使用<kbd></kbd>来显示用户输入代码，如快捷键
-->
<!-- 无序列表 -->
<ul>
<li>无序列表一</li>
<li>无序列表二</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>有序列表一</li>
<li>有序列表二</li>
</ol>
<!-- 自定义列表 -->
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表是一种样式表语言</dd>
</dl>
<hr>
<!-- 去点列表 -->
<ul class="list-unstyled">
<li>无序列表一</li>
<li>无序列表二</li>
</ul>
<!-- 内联列表 -->
<ul class="list-inline">
<li>首页</li>
<li>java学院</li>
<li>在线课堂</li>
</ul>
<!-- 自定义列表 内联列表 -->
<dl class="dl-horizontal">
<dt>HTML 超文本标记语言</dt>
<dd>HTML称为超文本标记语言，是一种标识性的语言。</dd>
<dt>测试标题不能超过160px的宽度，否则2个点</dt>
<dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
</dl>
<hr>
<!-- 没有用code -->
this is a simple code<br>
<code>this is a simple code</code><br><!-- 使用<code></code>来显示单行内联代码 -->
<code>
this is a simple code <br>
this is a simple code
</code>
<!-- 快捷键 -->
<p>使用<kbd>ctrl</kbd>+<kbd>s</kbd> 保存内容</p>
<!-- 多行代码 -->
<!-- 代码会保留原文本的格式，包括空格和回车 -->
<pre>
public class demo1 {
public static void main(String[] args) {
System.out.println("hello,world");
}
}
</pre>
<!-- 显示HTML代码需要使用字符实体 -->
<pre>
<h2>你好</h2>
</pre>
<!-- 当长度超过指定值，可以添加滚动条 要加样式 .pre-scrollable -->
<pre class="pre-scrollable">
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
</pre>
<hr>
<br>
<!-- 表格 -->
<table class="table table-bordered table-striped table-hover table-condensed">
<tr class="info">
<th>javaSE</th>
<th>数据库</th>
<th>Javascript</th>
</tr>
<tr class="success">
<td>面向对象Java</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr class="waring">
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
<tr class="active">
<th>javaSE</th>
<th>数据库</th>
<th>Javascript</th>
</tr>
<tr class="danger">
<td>面向对象Java</td>
<td>oracle</td>
<td>json</td>
</tr>
<tr>
<td>数组</td>
<td>mysql</td>
<td>ajax</td>
</tr>
</table>
</body>
</html>
2.6、表单控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单</title>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<!--
表单
1、文本框
.form-control 表单元素的样式
表单控件的大小 .input-lg 大的 .input-sm 小的
2、下拉框
.form-control 表单元素的样式
multiple="multiple" 设置下拉框多选
3、文本域
.form-control 表单元素的样式
4、复选框
垂直显示 .checkbox
水平显示 .checkbox-inline
5、单选框
垂直显示 .radio
水平显示 .radio-inline
6、按钮
1、使用按钮
基础样式 .btn
附加样式 btn-primary btn-info btn-success btn-warning btn-danger btn-link btn-default
2、多标签使用
其他标签可以添加按钮样式设置成按钮效果(a标签、span标签等)
3、按钮大小
大按钮 .btn-lg
正常按钮 .btn-sm
小按钮 .btn-xs
4、按钮禁用
1、通过disabled属性(真正的禁用)
2、通过disabled样式(样式上的禁用)
-->
<input type="text"><br>
<select name="" id="">
<option>请选择城市：</option>
<option>上海</option>
<option>北京</option>
</select>
<br>
<textarea name="" id="" cols="30" rows="10"></textarea><br>
<input type="checkbox" name="hobby">唱歌
<input type="checkbox" name="hobby">跳舞
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<br>
<button>按钮</button>
<input type="button" value="按钮">
<hr><br>
<!-- 文本框 -->
<div class="row">
<div class="col-md-3">
<input type="text" class="form-control"><br>
<input type="text" class="form-control input-lg"><br>
<input type="text" class="form-control input-sm"><br>
</div>
</div>
<!-- 下拉框框 -->
<div class="row">
<div class="col-md-3">
<select name="" id="" class="form-control">
<option>请选择城市：</option>
<option>上海</option>
<option>北京</option>
</select>
<select name="" id="" class="form-control" multiple="multiple">
<option>请选择城市：</option>
<option>上海</option>
<option>北京</option>
</select>
</div>
</div>
<!-- 文本域 -->
<div class="row">
<div class="col-md-3">
<textarea class="form-control"></textarea>
</div>
</div>
<!-- 复选框 -->
<!-- 垂直显示 -->
<div class="row">
<div class="col-md-3">
<div class="checkbox">
<label for=""><input type="checkbox" name="hobby" id="">唱歌</label>
</div>
<div class="checkbox">
<label for=""><input type="checkbox" name="hobby" id="">跳舞</label>
</div>
</div>
</div>
<!-- 水平显示 -->
<div class="row">
<div class="col-md-3">
<label for="obj" class="checkbox-inline">
<input type="checkbox" name="hobby" id="obj">唱歌
</label>
<label for="mm" class="checkbox-inline">
<input type="checkbox" name="hobby" id="mm">跳舞
</label>
</div>
</div>
<!-- 单选框 -->
<!-- 垂直显示 -->
<div class="row">
<div class="col-md-3">
<div class="radio">
<label for=""><input type="radio" name="sex" id="">男</label>
</div>
<div class="radio">
<label for=""><input type="radio" name="sex" id="">女</label>
</div>
</div>
</div>
<!-- 水平显示 -->
<div class="row">
<div class="col-md-3">
<label for="" class="radio-inline">
<input type="radio" name="sex" >男
</label>
<label for="" class="checkbox-inline">
<input type="radio" name="sex" >女
</label>
</div>
</div>
<!-- 按钮 -->
<button class="btn">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-link">按钮</button><br><br>
<!-- 通过按钮样式设置其他元素为按钮效果 -->
<a href="#" class="btn btn-success">a标签</a>
<span class="btn btn-danger">span标签</span>
<div class="btn btn-info">div标签</div>
<br>
<!-- 设置按钮的大小 -->
<button class="btn btn-danger">按钮</button>
<button class="btn btn-success btn-lg">按钮</button>
<button class="btn btn-warning btn-sm">按钮</button>
<button class="btn btn-info btn-xs">按钮</button>
<br>
<!-- 按钮禁用 -->
<!-- 在标签中添加disabled属性 -->
<button class="btn btn-info" onclick="alert('Hello')" disabled="disabled">按钮</button>
<!-- 在元素中添加类名"disabled" -->
<button class="btn btn-info disabled" onclick="alert('Hello')">按钮</button>
</body>
</html>
2.7、表单布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单布局</title>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<!--
表单布局
水平表单
设置样式： .form-horizontal
内联表单
设置样式： .form-inline
-->
<form action="#" method="get" class="form-horizontal" role="form">
<h2 align="center">用户信息表</h2>
<!-- 表单中的表单元素组 -->
<div class="form-group ">
<label for="uname" class="control-label col-md-2">姓名</label>
<div class="col-md-8">
<input type="text" id="uname" class="form-control" placeholder="请输入名字">
</div>
</div>
<div class="form-group ">
<label for="password" class="control-label col-md-2">密码</label>
<div class="col-md-8">
<input type="text" id="password" class="form-control" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="uname" class="control-label col-md-2">爱好</label>
<div class="col-md-8 col-md-offset-1">
<label for="obj" class="checkbox-inline">
<input type="checkbox" name="hobby" id="obj">唱歌
</label>
<label for="mm" class="checkbox-inline">
<input type="checkbox" name="hobby" id="mm">跳舞
</label>
</div>
</div>
<div class="form-group ">
<label for="" class="control-label col-md-2">城市</label>
<div class="col-md-8">
<select name="" id="" class="form-control">
<option>请选择城市：</option>
<option>上海</option>
<option>北京</option>
</select>
</div>
</div>
<div class="form-group ">
<label for="remark" class="control-label col-md-2">简介</label>
<div class="col-md-8">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="form-group ">
<div class="col-md-2 col-md-offset-5">
<button class="btn btn-info ">按钮</button>
</div>
</div>
</form>
<hr>
<!-- 内联表单 -->
<form action="" class="form-inline">
<div class="form-group">
<label for="username">姓名</label>
<input type="text" id="username" class="form-control" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="userpwd">密码</label>
<input type="text" id="userpwd" class="form-control" placeholder="请输入密码">
</div>
<div class="form-group">
<button class="btn btn-primary">提交</button>
</div>
</form>
</body>
</html>
2.8、缩略图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单布局</title>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<!--
表单布局
水平表单
设置样式： .form-horizontal
内联表单
设置样式： .form-inline
-->
<form action="#" method="get" class="form-horizontal" role="form">
<h2 align="center">用户信息表</h2>
<!-- 表单中的表单元素组 -->
<div class="form-group ">
<label for="uname" class="control-label col-md-2">姓名</label>
<div class="col-md-8">
<input type="text" id="uname" class="form-control" placeholder="请输入名字">
</div>
</div>
<div class="form-group ">
<label for="password" class="control-label col-md-2">密码</label>
<div class="col-md-8">
<input type="text" id="password" class="form-control" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="uname" class="control-label col-md-2">爱好</label>
<div class="col-md-8 col-md-offset-1">
<label for="obj" class="checkbox-inline">
<input type="checkbox" name="hobby" id="obj">唱歌
</label>
<label for="mm" class="checkbox-inline">
<input type="checkbox" name="hobby" id="mm">跳舞
</label>
</div>
</div>
<div class="form-group ">
<label for="" class="control-label col-md-2">城市</label>
<div class="col-md-8">
<select name="" id="" class="form-control">
<option>请选择城市：</option>
<option>上海</option>
<option>北京</option>
</select>
</div>
</div>
<div class="form-group ">
<label for="remark" class="control-label col-md-2">简介</label>
<div class="col-md-8">
<textarea class="form-control"></textarea>
</div>
</div>
<div class="form-group ">
<div class="col-md-2 col-md-offset-5">
<button class="btn btn-info ">按钮</button>
</div>
</div>
</form>
<hr>
<!-- 内联表单 -->
<form action="" class="form-inline">
<div class="form-group">
<label for="username">姓名</label>
<input type="text" id="username" class="form-control" placeholder="请输入姓名">
</div>
<div class="form-group">
<label for="userpwd">密码</label>
<input type="text" id="userpwd" class="form-control" placeholder="请输入密码">
</div>
<div class="form-group">
<button class="btn btn-primary">提交</button>
</div>
</form>
</body>
</html>
2.9、面板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>面板</title>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<div class="panel panel-warning">
<div class="panel-heading">
<h2 align="center">手机合集</h2>
</div>
<div class="panel-body">
<div class="container-fluid">
<div class="row">
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/phone.webp" style="width: 430px;height: 415px;" alt="">
<h3>苹果6</h3>
<p>照亮你的美</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>
喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-thumbs-up"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/iphone7.jfif" style="width: 430px;height: 415px;" alt="">
<h3>苹果7</h3>
<p>照亮你的美</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>
喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-thumbs-up"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/iphone8.jfif" style="width: 430px;height: 415px;" alt="">
<h3>苹果8</h3>
<p>照亮你的美</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>
喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-thumbs-up"></span>评论
</button>
</div>
</div>
<div class="col-md-3">
<div class="thumbnail">
<img src="img/iphone11.jfif" style="width: 430px;height: 415px;" alt="">
<h3>苹果11</h3>
<p>照亮你的美</p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>
喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-thumbs-up"></span>评论
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2.10、导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航</title>
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
<!-- 标签式导航菜单 -->
<p>标签式导航菜单</p>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Java</a></li>
<li><a href="#">C</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
<!-- 基本的胶囊式导航菜单 -->
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
<li class="active"><a href="#">Java</a></li>
<li><a href="#">C</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
<!-- 面包屑式导航菜单 -->
<p>面包屑式导航菜单</p>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">2022</a></li>
<li class="active"><a href="#">一月</a></li>
</ul>
<hr>
<!-- 分页导航 -->
<p>分页导航</p>
<ul class="pagination">
<li><a href="#">«</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="#">»</a></li>
</ul>
<p>翻页导航</p>
<ul class="pager">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
</body>
</html>
2.11、下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
<!-- 引入BootStrap的核心css文件 -->
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<!-- 引入BootStrap的核心js文件 需要在BootStrap的js之前引入-->
<script src="js/jquery-3.6.0.min.js"></script>
<!-- 引入BootStrap的核心js文件 -->
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!--
下拉菜单
1、使用一个类名为dropdown或btn-group的div包裹整个下拉框：
<div class="dropdown"></div>
2、默认向下dropdown，向上弹起加入.dropup 即可
3、使用button作为父菜单，使用类名：dropdown-toggle和自定义data-toggle属性
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
4、在button中使用font制作下拉箭头
5、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”
6、分组分割线：<li>添加类名为“divider”来属性添加下拉分割线功能
7、分组标签：li添加类名“dropdown-header”来实现分组的功能
8、对齐方式：
(1)、dropdown-menu-left 左对齐 默认样式
(2)、dropdown-menu-right 右对齐
9、激活状态（.active）和禁用状态（.disabled）
-->
<!-- 使用一个类名为dropdown或btn-group的div包裹整个下拉框： -->
<div class="dropdown">
<!-- 使用button作为父菜单，使用类名：dropdown-toggle和自定义data-toggle属性 -->
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
喜欢的频道
<!-- 在button中使用font制作下拉箭头 -->
<span class="caret"></span>
</button>
<!-- 下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu” -->
<ul class="dropdown-menu">
<!-- 分组标签：li添加类名“dropdown-header”来实现分组的功能 -->
<li class="dropdown-header">--科普--</li>
<li><a href="http://cpc.people.com.cn/" target="_blank">人与自然</a></li>
<!-- 分组分割线：<li>添加类名为“divider”来属性添加下拉分割线功能 -->
<li class="divider"></li>
<li class="dropdown-header">--搞笑--</li>
<li class="active"><a href="http://cpc.people.com.cn/" target="_blank">快乐大本营</a></li>
<li><a href="http://cpc.people.com.cn/" target="_blank">生活大爆炸</a></li>
<li class="disabled"><a href="http://cpc.people.com.cn/" target="_blank">欢乐喜剧人</a></li>
</ul>
</div>
</body>
</html>
2.12、模态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模态框</title>
<!-- 引入BootStrap的核心css文件 -->
<link rel="stylesheet" href="bootstrap-3.4.1-dist/css/bootstrap.min.css">
<!-- 引入BootStrap的核心js文件 需要在BootStrap的js之前引入-->
<script src="js/jquery-3.6.0.min.js"></script>
<!-- 引入BootStrap的核心js文件 -->
<script src="bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 您可以切换模态框（Modal）插件的隐藏内容：
通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：
打开模态框：$('#identifier').modal('show')
关闭模态框：$('#identifier').modal('hide')
-->
<!-- 通过data属性 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>
<button class="btn btn-primary" data-toggle="modal" id="btn">打开模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">
<form action="" class="form-horizontal" role="form">
<div class="form-group">
<label for="uname" class="col-md-2 control-label">姓名</label>
<div class="col-md-8">
<input type="text" class="form-control" placeholder="请输入姓名">
</div>
</div>
<div class="form-group">
<label for="upwd" class="col-md-2 control-label">密码</label>
<div class="col-md-8">
<input type="password" class="form-control" placeholder="请输入密码">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="submit_btn">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<!-- 通过 JavaScript：使用这种技术打开 -->
<script>
// 绑定按钮的点击事件
$("#btn").click(function () {
// 手动打开模态框
$("#myModal").modal("show");
});
// 关闭模态框
$("#submit_btn").click(function () {
// 手动关闭模态框
$("#myModal").modal("hide");
});
</script>
</body>
</html>
3、想了解更多BootStrap进入
菜鸟教程：https://www.runoob.com/bootstrap/bootstrap-tutorial.html
浙公网安备 33010602011771号