什么是Bootstrap
1. Bootstrap是一个用于快速开发Web用用程序和网站的前端框架.
2. Bootstrap是基于 HTML,CSS,JavaScript的
为什么使用Bootstrap
1. 移动设备优先
自Bootstrap3起,框架包含了贯穿震哥哥库的移动设备优先的样式.
2. 浏览器支持
所有主流的浏览器都支持Bootstrap
3. 容易上手
只要具备HTML和CSS的基础知识,就可以开始学习Bootstrap.
4. 响应式设计
(1) Bootstrap的响应式CSS能够自适应台式机,平板电脑和手机.
(2) 以往一个网站要开发两套,一台PC的前端,一套移动端的前端,但是如果是响应式布局,则只需要一台即可
1. 从官网下载Bootstrap的源码,一般是下载一个压缩包
2. 压缩包解压后包含3个文件夹 (1) fonts (2) css (3) js ,需要将这3个文件夹原封不动的导入你的项目中,项目使用的使用需要使用标签进行导入
html模板-- Bootstrap的HelloWorld
Bootstrap只需要导入3个文件 => 这份模板文件后面会一直用到
(1)<link href="bootstrap-3.3.7-dist\css\bootstrap.min.css" rel="stylesheet">
(2)<script src="./jquery-3.2.1.min.js"></script>
(3)<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- code01_Bootstrap_HelloWorld.html -->
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="bootstrap-3.3.7-dist\css\bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
<!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="./jquery-3.2.1.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Bootstrap提供了一套响应式,移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.
移动设备优先
1. 在HTML5的项目中,做移动端项目,有一份非常重要的meta,用于设置屏幕和设备等宽以及是否运行用户缩放,以及缩放比例的问题.
2. 分别为: 屏幕宽度和设备一致,初始化缩放比例
<meta name="viewport" content="width=device-width, initial-scale=1>
bootstrap布局容器
两种容器
(1)<div class="container"> ... </div>
(2)<div class="container-fluid"> ... </div>
1. Bootstrap需要为页面内容和栅格系统包裹一个.container容器,但是由于padding等属性的原因,则两种容器类不能项目嵌套.
(1) <div class="container"> ... </div> 这是可以指定的固定宽度
1) 1170px => 970px => 750px => 100% (这是响应式容器的宽度变化)
(2) <div class="container-fluid"> ... </div> 这个直接就是100%的宽度
<!-- code02_Bootstrap容器.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"
/>
<script src="./jquery-3.2.1.min.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
.container,.container-fluid {
border: 1px solid red;
background-color: gold;
}
</style>
<title>Document</title>
</head>
<body>
<!-- 1. 流体容器,直接宽度100% .container-fluid -->
<div class="container-fluid">流体容器</div>
<br><br><br>
<!-- 2. 响应式容器,固定宽度 .container -->
<div class="container">响应式容器</div>
</body>
</html>
bootstrap栅格系统
栅格系统是用来划分宽度的,也就是直管横向,纵向并不管
栅格系统要求一行的列数加起来必须为12
1. bootstrap将页面横向分为12等份,按照12等份定义了适应不同宽度的样式类,这些样式类组成了一套响应式,移动设备优先的流式栅格系统
(1) col-lg-列数: 大于1200px排成一行,小于1200px分别占一行
(2) col-md-列数: 大于992px排成一行,小于992px分别占一行
(3) col-sm-列数: 大于768px排成一行,小于768px分别占一行
(4) col-xs-列数: 始终排成一行
2. 栅格系统中,浏览器会随着屏幕的大小的增减自动分配最多12列. => 通过最多一些列的行(row)与列(column)的组合赖创建页面布局. 其工作原理如下:
(1) 行(row) 必须包含在 .container(固定宽度)或 .contain-fluid(100%宽度)中,以便为其赋予合适的排列(aligment)和内补(padding).
(2) 通过 行(row) 在水平方向创建一组列(column)
(3) 你的内容应该放置于 列(column) 内,并且只有 列(column) 可以作为 行(row) 的直接子元素
(4) 使用类似 .row 和 .col-xs-4 这种预定义类,可以用来快速创建栅格布局.
3. 基本的网格结构
<div class="container/container-fluid">
<div class="row">
下面的列数加起来必须为12 => xs,sm,md,lg
<div class="col-lg-4">内容</div>
<div class="col-lg-4">内容</div>
<div class="col-lg-4">内容</div>
<div class="col-lg-4">内容</div>
</div>
<div class="row"> ... </div>
...
</div>
4. 注意事项:
(1) 一行中如果格子数目超过12,则超出部分将自动换行
(2) 栅格类属性可以向上兼容,也就是xs在sm,md,lg中正常显示,但反过来则不能正常显示
<!-- code03_Bootstrap栅格系统.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="./jquery-3.2.1.min.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Document</title>
<style>
/*
(1) div{...} 标签选择器
(2) [属性=...] 属性选择器 *= "字符" => 含有字符
*/
div[class*="col-"] {
/* 高度是可以设置的,栅格系统针对的是宽度而不是高度 */
height: 50px;
border: 1px solid red;
background-color: gold;
}
</style>
</head>
<body>
<!-- 栅格系统的最外部的两个容器 -->
<div class="container-fluid">
<h1>栅格系统</h1>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">col-lg-3</div>
<div class="col-lg-4">col-lg-4</div>
<div class="col-lg-2">col-lg-2</div>
<div class="col-lg-3">col-lg-3</div>
</div>
</div>
<div class="container">
<br /><br />
<div class="row">
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
<div class="col-md-2">col-md-2</div>
</div>
<br /><br />
<div class="row">
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<br /><br />
<div class="row">
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
<div class="col-xs-1">col-xs-1</div>
</div>
</div>
</body>
</html>
响应式布局
1. 现在要实现一个简单效果就是 lg 一行12个, md 两行 6个, sm 3行 4个, xs 6行 2个
2. 类选择器可以同时存在多个
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<!-- code04_Bootstrap响应式布局.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="./jquery-3.2.1.min.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
/* div[class*="col-"] {
border: 1px solid black;
background-color: gold;
} */
.box {
height: 80px;
border: 1px solid red;
background-color: cyan;
margin: 20px auto;
/* 设置一个最大宽度,避免过度拉宽 */
max-width: 240px;
}
</style>
<title>Document</title>
</head>
<body>
<!-- 实现响应式布局 -->
<!-- 现在要实现的是 台式机lg 显示12一行 -->
<!-- 笔记本md 显示 6个 两行 -->
<!-- 平板sm 显示3 3 3 3-->
<!-- 手机xs 显示 2 2 2 2 2 2 -->
<div class="container">
<div class="row">
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
<div class="col-lg-1 col-md-2 col-sm-4 col-xs-6"><div class="box"></div></div>
</div>
</div>
</body>
</html>
列偏移
1. 偏移是一个用于更专业的布局的有用功能,它们可用来给列腾出更多的空间.
2. 就是往左边偏移
(1) col-lg-offer-列数
(2) col-md-offer-列数
(3) col-sm-offer-列数
(4) col-xs-offer-列数
<!-- code06_Bootstrap列偏移.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="./bootstrap-3.3.7-dist/css/bootstrap.min.css"
/>
<script src="./jquery-3.2.1.min.js"></script>
<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
.box {
height: 50px;
border: 1px soild red;
background-color: cyan;
margin: 20px auto;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-5"><div class="box"></div></div>
<div class="col-lg-5 col-lg-offset-1"><div class="box"></div></div>
</div>
<br /><br />
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-2"><div class="box"></div></div>
<div class="col-lg-4"><div class="box"></div></div>
</div>
</div>
</body>
</html>
bootstrap隐藏类
1. 隐藏类用于隐藏一些不是很重要的栅格,在缩小屏幕的时候很有作用.
2. hidden-xs, hidden-sm, hidden-md, hidden-lg
<!-- code07_Bootstrap栅格隐藏.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
.box {
height: 50px;
border: 1px soild black;
background-color: cyan;
margin: 20px auto;
}
</style>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4"><div class="box">1</div></div>
<div class="col-lg-3 col-md-4"><div class="box">2</div></div>
<div class="col-lg-3 col-md-4"><div class="box">3</div></div>
<div class="col-lg-3 col-md-4 hidden-md"><div class="box">4</div></div>
</div>
</div>
</body>
</html>
1. .table 为任意<table>添加基本样式(只有横向分割线)
2. .table-striped 为表格的内容<tbody>添加斑马线形式的条纹
3. .table-bordered 为所有表格的单元格添加边框
4. .table-hover 在<tbody>内任一行启用鼠标悬停状态
5. .table-condensed 让表格更加紧凑 (精简表格)
6. 联合使用所有表格类 => class="table table-striped table-bordered table-hover table-condensed"
<!-- code13_Bootstrap表格.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<h2>普通表格样式 .table</h2>
<table class="table">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>24</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>004</td>
<td>赵六</td>
<td>26</td>
</tr>
</table>
</div>
<br>
<div class="row">
<h2>联合了几种表格的样式</h2>
<ul>
<li>.table 普通表格</li>
<li>.table-striped 表格内部斑马线样式</li>
<li>.table-bordered 为表格添加边框</li>
<li>.table-hover 为表格添加鼠标悬停按钮</li>
<li>.table-condensed 让表格更加紧凑(精简表格)</li>
</ul>
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>24</td>
</tr>
<tr>
<td>003</td>
<td>王五</td>
<td>25</td>
</tr>
<tr>
<td>004</td>
<td>赵六</td>
<td>26</td>
</tr>
</table>
</div>
</div>
</body>
</html>
使用Bootstrap定义好的按钮样式
在Bootstrap的样式都是预先通过各种 class 定义好的
1. 任何带有 class .btn 的元素栋笃会继承圆角灰色按钮的默认外观. 但是Bootstrap提供了一些选项来定义按钮的样式,这些样式可以作用于 <a>,<button>,<input>标签上 (这3个都是可以生成按钮的)
2. 按钮样式
(1) .btn .btn-default 默认按钮
(2) .btn .btn-primary 原始按钮
(3) .btn .btn-success 成功按钮
(4) .btn .btn-info 信息按钮
(5) .btn .btn-warning 警告按钮
(6) .btn .btn-danger 危险按钮
(7) .btn .btn-link 链接按钮
3. 按钮大小
(1) .btn-lg 大按钮
(2) 没有规定的话就是默认大小的按钮
(3) .btn-sm 小按钮
(4) .btn-xs 特别小的按钮
(5) .btn-block 块级按钮(占满整个父级元素) => 宽度100%的按钮一般是在移动端使用
4. 按钮状态
(1) 激活状态 .active
1) 按钮元素: 添加 .active 来显示它是激活的
2) 超链接元素: 添加 .active 来显示它是激活的
(2) 禁用状态 .disabled 禁用状态让链接和按钮不能被点击
1) 按钮元素
2) 超链接元素
5. 按钮组 =>按钮组就是把几个按钮组合在一起,在移动端可以做到一个步骤提示的作用
(1) .btn-group => 在要包围的按钮外围包围一个这样标签
(2) 使用 .btn-group-lg .btn-group-sm .btn-group-xs 来控制按钮组的大小
(3) 使用 .btn-group-vertical 来设置垂直方向
(4) 使用 .btn-group-justified 来设置自适应大小的按钮组 (就是占满父级元素)
但是注意,如果是button和input元素,需要在嵌套多一层 .btn-group
使用a标签是正常的
(5) 内嵌下拉的菜单的按钮组
<!-- code08_Bootstrap按钮样式.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<h2>默认按钮样式</h2>
<!-- 这是<input 实现的按钮> -->
<input type="button" value="默认按钮 input标签" class="btn btn-default">
<!-- 使用<a> 实现一个button -->
<a href="" class="btn btn-default">默认按钮 a标签</a>
<!-- 使用<button>实现 -->
<button type="button" class="btn btn-default">默认按钮 button标签</button>
</div>
<div class="row">
<h2>原始按钮</h2>
<input type="button" value="原始按钮" class="btn btn-primary">
</div>
<div class="row">
<h2>成功按钮</h2>
<input type="button" value="成功按钮" class="btn btn-success">
</div>
<div class="row">
<h2>信息按钮</h2>
<input type="button" value="信息按钮" class="btn btn-info">
</div>
<div class="row">
<h2>警告按钮</h2>
<input type="button" value="警告按钮" class="btn btn-warning">
</div>
<div class="row">
<h2>危险按钮</h2>
<input type="button" value="危险按钮" class="btn btn-danger">
</div>
<div class="row">
<h2>链接按钮</h2>
<input type="button" value="链接按钮" class="btn btn-link">
</div>
</div>
</body>
</html>
<!-- code09_Bootstrap按钮大小.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<input
type="button"
value="大的原始按钮"
class="btn btn-primary btn-lg"
/>
<input type="button" value="大的按钮" class="btn btn-lg" />
</div>
<br />
<br />
<br />
<div class="row">
<!-- 没有给按钮的大小样式就是默认的大小 -->
<input
type="button"
value="默认大小的原始按钮"
class="btn btn-primary"
/>
<input type="button" value="默认大小的按钮" class="btn" />
</div>
<br />
<br />
<br />
<div class="row">
<input
type="button"
value="小的原始按钮"
class="btn btn-primary btn-sm"
/>
<input type="button" value="小的按钮" class="btn btn-sm" />
</div>
<br />
<br />
<br />
<div class="row">
<input
type="button"
value="特别小的原始按钮"
class="btn btn-primary btn-xs"
/>
<input type="button" value="特别小的按钮" class="btn btn-xs" />
</div>
<br />
<br />
<br />
<div class="row">
<input
type="button"
value="块级原始按钮"
class="btn btn-primary btn-block"
/>
<input type="button" value="块级的按钮" class="btn btn-block" />
</div>
</div>
</body>
</html>
<!-- code10_Bootstrap按钮状态.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<h2>active 激活状态</h2>
<input type="button" value="默认按钮" class="btn btn-default" />
<input type="button" value="默认按钮 激活" class="btn btn-default active" />
</div>
<br />
<div class="row">
<h2>disabled 禁用状态</h2>
<div class="row">
<input type="button" value="默认按钮" class="btn btn-default" />
<input type="button" value="默认按钮 禁用" class="btn btn-default disabled" />
</div>
</div>
</div>
</body>
</html>
<!-- code11_Bootstrap按钮组.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- 1. 按钮组可以在移动端做一个指示的作用 -->
<div class="container">
<div class="row">
<h2>独立的三个按钮</h2>
<input type="button" value="步骤1" class="btn btn-primary active">
<input type="button" value="步骤2" class="btn btn-default">
<input type="button" value="步骤3" class="btn btn-default">
</div>
<br>
<div class="row">
<h2>三个按钮组成按钮组</h2>
<div class="btn-group">
<input type="button" value="步骤1" class="btn btn-primary active">
<input type="button" value="步骤2" class="btn btn-default">
<input type="button" value="步骤3" class="btn btn-default">
</div>
</div>
<br>
<div class="row">
<h2>三个按钮组成按钮组 => 步骤2</h2>
<div class="btn-group">
<input type="button" value="步骤1" class="btn btn-primary active">
<input type="button" value="步骤2" class="btn btn-primary active">
<input type="button" value="步骤3" class="btn btn-default">
</div>
</div>
<br>
<div class="row">
<h2>大的按钮组 => btn-group-lg,sm,xs</h2>
<div class="btn-group btn-group-lg">
<input type="button" value="步骤1" class="btn btn-primary active">
<input type="button" value="步骤2" class="btn btn-primary active">
<input type="button" value="步骤3" class="btn btn-default">
</div>
</div>
<br>
<div class="row">
<h2>垂直按钮组 => btn-group-vertical</h2>
<div class="btn-group btn-group-vertical">
<input type="button" value="步骤1" class="btn btn-primary active">
<input type="button" value="步骤2" class="btn btn-primary active">
<input type="button" value="步骤3" class="btn btn-default">
</div>
</div>
<br>
<div class="row">
<h2>自适应的按钮组 => btn-group-justified</h2>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<input type="button" value="步骤1" class="btn btn-primary active">
</div>
<div class="btn-group">
<input type="button" value="步骤2" class="btn btn-primary active">
</div>
<div class="btn-group">
<input type="button" value="步骤3" class="btn btn-default">
</div>
</div>
</div>
<br>
</div>
</body>
</html>
1. .img-rounded 为图片添加圆角
2. .img-circle 将图片变为圆形
3. .img-thumbnail 缩略图功能(添加一些内边距和一个灰色的边框)
4. .img-responsive 图片响应式(将很好的扩展到父元素) => 宽度100%
<!-- code12_Bootstrap图片.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script src="jquery-3.2.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<h2>图片圆角 img-rounded</h2>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589604991350&di=872f005a4903552d03ed381d38c1c4bc&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171010%2F3880134f63344ef08c5d2e0f94d39a56.gif"
alt="" class="img-rounded">
</div>
<br>
<div class="row">
<h2>圆形图片 img-circle</h2>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589604991350&di=872f005a4903552d03ed381d38c1c4bc&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171010%2F3880134f63344ef08c5d2e0f94d39a56.gif"
alt="" class="img-circle">
</div>
<br>
<div class="row">
<h2>添加内边距和一个灰色边框 img-thumbnail</h2>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589604991350&di=872f005a4903552d03ed381d38c1c4bc&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171010%2F3880134f63344ef08c5d2e0f94d39a56.gif"
alt="" class="img-thumbnail">
</div>
<br>
<div class="row">
<h2>img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果)</h2>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589604991350&di=872f005a4903552d03ed381d38c1c4bc&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171010%2F3880134f63344ef08c5d2e0f94d39a56.gif"
alt="" class="img-responsive">
</div>
<br>
</div>
</body>
</html>
1. 导航栏是一个很好的功能,是Bootstrap网站的一个突出特点. (导航栏挺重要的!而且是Bootstrap的特点)
2. 导航栏在您的应用或网站中作为导航页头的响应式基础组件.
3. 导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.
4. 在Bootstrap导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式.
bootstrap导航条
1. .navbar 声明导航条
<div class="navbar">
2. .navbar-default 声明默认的导航条样式(灰色)
<div class="navbar navbar-default">
3. .navbar-inverse 声明反色的导航条样式(黑色)
<div class="navbar navbar-inverse">
4. navbar-static-top 去除导航条的圆角
<div class="navbar navbar-inverse navbar-static-top">
5. nav navbar-nav 定义导航栏中的菜单
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
...
</ul>
6. navbar-form 定义导航条中的表单
<form action="" class="navbar-form "> </form>
7. navbar-left 菜单靠左
8. navbar-right 菜单靠右
<form action="" class="navbar-form navbar-right">
9. navbar-fixed-top 固定到顶部的导航栏
10. navbar-fixed-bottom 固定到底部的导航栏
11. navbar-header 声明logo的容器
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
12. navbar-brand 针对logo等固定内容的样式
<div class="navbar-header">
<a href="#" class="navbar-brand">LOGO</a>
</div>
13. navbar-btn 定义导航栏中的按钮
14. navbar-text 定义导航条中的文本
代码格式说明
1. 基本的导航栏格式
<div class="nav">
<div class="container">
定义logo
<div class="navbar-header">
<a>LOGO</a>
</div>
定义菜单
<div class="">
</div>
</div>
</div>
2. 最外面应该是导航栏的div,然后是容器的div
3. LOGO一个是属于 navbar-header部分,而已一般是图片的超链接
4. 定义菜单内容可以使用无序列表,里面都是 <li><a></a></li>的形式
原文：https://www.cnblogs.com/Rowry/p/12885230.html