Bootstrap学习 (一)

Bootstrap学习（一）

准备
- 1.需要下载的资源
- 2.参考资源
1. HBuilder快捷键设置
2. Bootstrap的使用
- 2.1 01-BootStrap的页面模板代码
- 2.2 参考API
3. 布局容器和栅格网格系统
- 3.1布局容器
- - 3.1.1 02-布局容器代码
- 3.2 栅格网格系统
- - 栅格参数
  - 3.2.1列组合
  - 3.2.2 列偏移
  - 3.2.3 列排序
  - 3.2.4 列嵌套
4. 常用样式
- 4.1 排版
- - 4.1.1 标题
  - 4.1.2 段落
  - 4.1.3 强调
  - 4.1.4 对齐效果
  - 4.1.5 列表
  - 4.1.5.1 去点列表
  - 4.1.5.2 内联列表
  - 4.1.5.3 定义列表
- 4.1.6 代码
- - 4.1.6.1 单行内联代码
- 4.1.7 表格
- - 4.4.7.1 表格样式
  - 4.1.7.2 tr、th、td样式
4.2 表单
- 4.2.1 表单控件
- - 4.2.1.1 文本框
  - 4.2.1.2.下拉框
  - 4.2.1.3.文本域
  - 4.2.1.4.复选框
  - - 1.垂直显示
    - 2.水平显示
  - 4.2.1.5.单选框
  - - 1.垂直显示
    - 2.水平显示
  - 4.2.1.6 按钮
  - - 1) 使用button 实现
    - 2）多标签使用
    - 3）按钮大小
    - 4）按钮禁用
- 4.2.2 表单布局
- - 4.2.2.1 水平表单
  - 4.2.2.2 内联表单
4.3 缩略图
4.4 面板
- 5.1 导航
- 5.1.1 标签式导航
- - 5.1.2 胶囊式导航
  - 5.1.3 面板屑式导航
- 5.2 分页导航
- - 5.2.1 分页
  - 5.2.2 翻页
- 5.3 下拉菜单
- 5.4 模态框
- - 5.4.1 用法
  - 5.4.2 实例

准备

1.需要下载的资源

HBuilder下载链接: HBuilder.
BootStrap下载链接: BootStrap.
jQuery-3.4.1下载链接: jQuery-3.4.1.网盘密码：echo

2.参考资源

菜鸟教程链接: 菜鸟教程Bootstrap.
Bootstrap视频链接: Bootstrap.
Bootstrap API: bootcss.
Bootstrap缩略图字体图标链接: Bootstrap字体图标.

1. HBuilder快捷键设置

[//重复插入选区或当前行（备份用于没有insert键的键盘）{"key":"ctrl+shift+r","command":"editor.action.duplicate"},//删除行{"key":"ctrl+d","command":"editor.action.deleteLines","override":true},//重命名文件（焦点在项目管理器中）{"key": "f2","command": "renameFile"},//剪切文件（焦点在项目管理器中）{"key": "ctrl+x","command": "filesExplorer.cut"},//复制文件（焦点在项目管理器中）{"key": "ctrl+c","command": "filesExplorer.copy"},//粘贴文件（焦点在项目管理器中）{"key": "ctrl+v","command": "filesExplorer.paste"},//复制{"key": "ctrl+c","command": "editor.action.clipboardCopyAction"},//复制文件路径{"key": "ctrl+shift+alt+c","command": "editor.action.clipboardCopyPathAction"},//剪切{"key": "ctrl+x","command": "editor.action.clipboardCutAction"},//粘贴{"key": "ctrl+v","command": "editor.action.clipboardPasteAction"},//撤销{"key": "ctrl+z","command": "undo"},//重做{"key": "ctrl+y","command": "redo"},{"key": "ctrl+shift+z","command": "redo"},//关闭当前标签卡{"key": "ctrl+f4","command": "workbench.action.closeActiveEditor"},//关闭所有标签卡{"key": "ctrl+shift+f4","command": "workbench.action.closeAllEditors"},//新建{"key": "ctrl+n","command": "workbench.action.menu.new"},//打开外部文件{"key": "ctrl+o","command": "workbench.action.files.openFile"},//保存{"key": "ctrl+s","command": "-workbench.action.files.save"},//全部保存{"key": "ctrl+shift+s","command": "workbench.action.files.saveAll","override":true},//向下插入行{"key": "ctrl+enter","command": "editor.action.insertLineAfter"},//向上插入行{"key": "ctrl+shift+enter","command": "editor.action.insertLineBefore"},//上移一行{"key": "ctrl+up","command": "editor.action.moveLinesUpAction"},//下移一行{"key": "ctrl+down","command": "editor.action.moveLinesDownAction"},//注释/反注释{"key": "ctrl+/","command": "editor.action.commentLine"},//块注释{"key": "ctrl+shift+/","command": "editor.action.blockCommentLine"},//格式化{"key": "shift+alt+f","command": "editor.action.format","override": true},//注释/反注释{"key": "ctrl+/","command": "editor.action.commentLine"},//块注释{"key": "ctrl+shift+/","command": "editor.action.blockCommentLine"},//运行{"key": "ctrl+r","command": "app.action.rundevice"},//重新运行{"key": "ctrl+f5","command": "workbench.action.debug.restart","when": "isDebugConsoleViewVisible"},//停止运行{"key": "ctrl+shift+f5","command": "workbench.action.debug.stop","when": "isRunning"}, //光标后退{"key": "ctrl+q","command": "workbench.action.navigateBack","override": true},//光标前进{"key": "alt+right","command": "workbench.action.navigateForward"}
]

2. Bootstrap的使用

2.1 01-BootStrap的页面模板代码

     viewport表示用户数是否可以缩放页面；width 指定书取得逻辑宽度device-width指示视区宽度应为设备的而屏幕宽度；ubutuak-scal指令用于设置微博页面的初始缩放比例initial-scale=1 则将显示未经缩放的Web文档

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"/><!--viewport表示用户数是否可以缩放页面；width 指定书取得逻辑宽度device-width指示视区宽度应为设备的而屏幕宽度；ubutuak-scal指令用于设置微博页面的初始缩放比例initial-scale=1 则将显示未经缩放的Web文档 --><meta name="viewport" content="width=device-width,initial-scale=1"/>  <title>Bootstrap的HTML标标准模板</title><!-- 载入Bootstrap 的css --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/></head><body><h1>Hello,World!</h1><!-- 如果要使用Bootstrapde js插件，必须先调入jQuery,因为bootstrap是依赖于jQuery的 --><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 --><script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></body>
</html>

注意：
目前不使用jquery的插件可以不引入js文件，这里是为了保证模板的完整性

2.2 参考API

Bootstrap API: bootcss.

3. 布局容器和栅格网格系统

3.1布局容器

1、 .container类用于固定宽度并支持响应式布局

<div class="container">...
<div>

2、.container-fluid类用于100%宽度，占据全部视口（viewport）的容器

<div class="container">...
<div>

3.1.1 02-布局容器代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>布局容器</title><link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/></head><body><!-- 布局容器1、 .container类用于固定宽度并支持响应式布局，即不占据100<div class="container"><div>2、.container-fluid类用于100%宽度，占据全部视口（viewport）的容器<div class="container"><div>--><!--         <div class="container" style="background-color: thistle;height: 500px;">  .container类用于固定宽度并支持响应式布局<div> --><div class="container-fluid" style="background-color: thistle;height: 500px;">.container-fluid类用于100%宽度，占据全部视口（viewport）的容器</div></body>
</html>

3.2 栅格网格系统

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport)尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

 container、row、xs (xsmall phones),sm (small tablets)，md (middle desktops),Ig (larger desktops)
即:超小屏(自动)，小屏(750px)，中屏(970px)和大屏(1170px)数据行(.row)必须包含在容器(.container)中，以便为其赋予合适的对齐方式和内距(padding)。在行(.row)中可以添加冽(.column),只有列(column)才可以作为行容器,(.row)的直接子元素，但列数之和不能超过平分的总列数，比如12。
如果大于12,则自动换到下一行。具体内容应当放置在列容器(column）之内

<div class="container"><div class="row"><div class="col-md-4" >4列</div><div class="col-md-8" >8列</div></div>
</div>

栅格参数

3.2.1列组合

列组合简单理解就是更改数字来合并列（原则：列总和数不能超12，大于12，则自动换到下一行。）。有点类似与表格的colspan属性

         <div class="row"><div class="col-md-4" style="background-color: #5CB85C;">1</div><div class="col-md-4" style="background-color: #0000ff;">1</div><div class="col-md-4" style="background-color: #ff5500;">1</div></div>

3.2.2 列偏移

如果我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset)功能来实现。
使用列偏移也非常简单，只需要在列元素上添加类名"col-md-offset-*"(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。
例如，你在列元素上添加"col-md-offset-8"，表示该列向右移动8个列的宽度(要保证列与偏移列的总数不超过12，不然会致列断行|换行显示)。

         <div class="row"><div class="col-md-1" style="background-color: #5CB85C;">1</div><div class="col-md-1 col-md-offset-1" style="background-color: #ffff00;">1</div><div class="col-md-1" style="background-color: #ff5500;">1</div><div class="col-md-1" style="background-color: #0000ff;">1</div></div>

3.2.3 列排序

列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名col-md-push-和col-md-pull-(其中星号代表移动的列组合数)。往前pull，往后push。

         <!-- 列排序 --><div class="row"><div class="col-md-1" style="background-color: #5CB85C;">1</div><div class="col-md-1 col-md-push-10" style="background-color: #ffff00;">1</div><div class="col-md-1 col-md-pull-1" style="background-color: #ff5500;">1</div><div class="col-md-1" style="background-color: #0000ff;">1</div></div>

3.2.4 列嵌套

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列。

         <div class="row"><div class="col-md-6" style="background-color: #ff55ff;"><div class="row"><div class="col-md-1" style="background-color: #46B8DA;">1</div><div class="col-md-6" style="background-color: #55ffff;">9</div>   </div></div><div class="col-md-6" style="background-color: #ff3d40;">       6</div>

4. 常用样式

4.1 排版

4.1.1 标题

Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。
为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。同时后面可以紧跟着一行小的副标题<smal1></sma71>或使用.small

<h1>标题1 <small>副标题</small></h1><h2>标题2<span class="small">副标题2</span></h2><div class="h1">你好</div>

4.1.2 段落

段落是排版中另一个重要元素之一。通过.lead来突出强调内容（其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理）。
可以使用以下标签给文本做突出样式处理：
<small>:小号字
<b><strong>:加粗
<i><em>:斜体

     <p>通过.lead来突出强调内容（其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理）</p><p class="lead">通过.lead来突出强调<small>内容</small>（其作用就是<strong>增大</strong>文本字号，加粗<em>文本</em>，而且对行高和margin也做相应的处理）</p>

4.1.3 强调

 定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具体说明如下：.text-muted:提示，是同浅灰色（#999）.text-primary: 主要，使用蓝色（#428bca）.text-success:成功，使用浅绿色（#3c763d）.text-info:通知信息，使用浅蓝色（#31708f）.text-warning:警告，使用黄色（#8a6d3b）.text-danger:危险，使用褐色（#a94442）

     <div class="text-muted">.text-muted:提示，是同浅灰色（#999）</div><div class="text-primary">.text-primary: 主要，使用蓝色（#428bca）</div><div class="text-success">.text-success:成功，使用浅绿色（#3c763d）</div><div class="text-info">.text-info:通知信息，使用浅蓝色（#31708f）</div><div class="text-warning">.text-warning:警告，使用黄色（#8a6d3b）</div><div class="text-danger">.text-danger:危险，使用褐色（#a94442）</div>

4.1.4 对齐效果

 在CSS中尝试用text-align来实现文本的对齐风格的设置其中主要有四种风格:左对齐，取值left ;居中对齐，取值center;右对齐，取值right ;两端对齐，取值justify。为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：.text-left: 左对齐 .text-center：居中对齐..text-right:右对齐.text-justify:两端对齐

     <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">AAA段落是排版中另一个重要元素之一。通过.lead来突出强调内容（其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理）。BBB段落是排版中另一个重要元素之一。通过.lead来突出强调内容（其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理）。CCC段落是排版中另一个重要元素之一。通过.lead来突出强调内容（其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理）。</p>

4.1.5 列表

在HTML文档中，列表结构主要有三种:无序列表(<ul><li>...</li></ul>)有序列表(<ol><li>...</li></ol>)定义列表(<dl><dt>...</dt><dd>...</dd></dl>)

4.1.5.1 去点列表

class=”list-unstyled“

     <ul class="list-unstyled"><li>去点项目列表一</li><li>去点项目列表二</li></ul>

4.1.5.2 内联列表

 class="list-inline",把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生的

     <ul class="list-inline"><li>内联列表一</li><li>内联列表二</li></ul>

4.1.5.3 定义列表

 在原有的基础上加入了一些样式，使用样式  class=“dl-horizontal” 制作水平定义列表：当标题宽度超过160px时，将会显示三个省略号。

     <!-- 自定义列表 内联列表 --><dl class="dl-horizontal"><dt>HTML 超文本标记语言</dt><dd>HTML称为超文本标记语言</dd><dt>测试标题不能超过160px的宽度，否则2个点</dt><dd>我在写一个水平定义列表的效果，我再写一个水平定义列表的效果</dd></dl>

4.1.6 代码

 一般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三中代码风格：（1）使用<code></code>来显示单行内联代码（2）使用<pre></pre>来显示多行代码块样式：pre-scrollable(height;max-height高度固定，为340px，超过存在滚动条)（3）使用<kbd></kbd>来显示用户输入代码，如快捷键

4.1.6.1 单行内联代码

<!-- 当长度超过指定值，可以添加滚动条 -->
<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><li>..................</li></ol>
</pre>

4.1.7 表格

4.4.7.1 表格样式

 Bootstrap 为表格提供了1种基础样式和4钟附加样式以及1个支持响应式的表格。在使用Bootstrap的表格的过程中，只需要添加对应的类名就可以得到不同的表格风格：基础样式1）.table:基础表格附加样式1）.table-striped:斑马线表格2）.table-bordered:带边框的表格3）.table-hover:鼠标悬停高亮的表格4）.table-condensed:紧凑型表格，单元格没内距或者内距较其他表格的内距小

4.1.7.2 tr、th、td样式

 提供了五种不同的类名，每种类名控制了行的不同背景颜色

<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>面向对象</td><td>oracle</td><td>json</td></tr><tr class="warning"><td>数组</td><td>mysql</td><td>ajax</td></tr><tr class="danger"><td>面向对象</td><td>oracle</td><td>json</td></tr><tr ><td>数组</td><td>mysql</td><td>ajax</td></tr>
</table>

4.2 表单

 表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

4.2.1 表单控件

 .form-control           .input-lg (较大)      .input-sm (较小)表单1.文本框.form-control 表单元素的样式表单控件的大小   .input-lg       .input-sm2.下拉框.form-control 表单元素的样式multiple="multiple"  设置下拉框多选3.文本域.form-control 表单元素的样式4.复选框垂直显示   .checkbox水平显示   .checkbox-inline5.单选框垂直显示   .radio水平显示   .radio-inline                  6.按钮1.使用按钮基础样式：btn附加样式：btn-primary btn-info btn-success btn-warning tbn-danger btn-link btn-default2.多标签使用其他标签可以通过添加按钮样式，设置成按钮效果（a标签、span标签等）3.按钮大小大按钮       .btn-lg小按钮      .btn-sm超小按钮     .btn-xs4.按钮禁用1.通过disable属性（真正的禁用元素）2.通过disable样式（样式上禁用）

4.2.1.1 文本框

      <!-- 文本框 --><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>

4.2.1.2.下拉框

      <!-- 下拉框 --><div class="row"><div class="col-md-3"><select class="form-control"><option >请选择城市</option><option >上海</option><option >北京</option></select><br><select class="form-control" multiple="multiple"><option >请选择城市</option><option >上海</option><option >北京</option></select><br></div></div>

4.2.1.3.文本域

      <!-- 文本域 --><div class="row"><div class="col-md-3"><textarea class="form-control" ></textarea></div></div>

4.2.1.4.复选框

1.垂直显示

      <!-- 复选框 --><!-- 垂直显示 --><div class="row"><div class="col-md-3"><div class="checkbox"><label><input type="checkbox" name="hobby" />唱歌</label></div><div class="checkbox"><label><input type="checkbox" name="hobby" />跳舞</label></div></div></div>

2.水平显示

      <!-- 水平显示 --><div class="row"><div class="col-md-3"><label class="checkbox-inline"><input type="checkbox" name="hobby" />唱歌</label><label class="checkbox-inline"><input type="checkbox" name="hobby" />跳舞</label></div></div>

4.2.1.5.单选框

1.垂直显示

      <!-- 单选框 --><!-- 垂直显示 --><div class="row"><div class="col-md-3"><div class="radio"><label><input type="radio" name="sex" />男</label></div><div class="radio"><label><input type="radio" name="sex" />女</label></div></div></div>

2.水平显示

      <!-- 水平显示 --><div class="row"><div class="col-md-3"><div class="radio-inline"><label><input type="radio" name="sex" value=""/>男</label></div><div class="radio-inline"><label><input type="radio" name="sex" value=""/>女</label></div></div>

4.2.1.6 按钮

     1.使用按钮基础样式：btn附加样式：btn-primary btn-info btn-success btn-warning tbn-danger btn-link btn-default2.多标签使用其他标签可以通过添加按钮样式，设置成按钮效果（a标签、span标签等）3.按钮大小大按钮       .btn-lg小按钮      .btn-sm超小按钮     .btn-xs4.按钮禁用1.通过disable属性（真正的禁用元素）2.通过disable样式（样式上禁用）

1) 使用button 实现

     基础样式：btn附加样式：btn-primary btn-info btn-success btn-warning tbn-danger btn-link btn-default

         <!-- 按钮 --><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-warning">按钮</button><button class="btn btn-info">按钮</button><button class="btn btn-default">按钮</button><button class="btn btn-link">按钮</button><br>

2）多标签使用

 其他标签可以通过添加按钮样式，设置成按钮效果（a标签、span标签等）

         <!-- 通过按钮样式设置其他元素为按钮效果 --><a href="#" class="btn btn-success">a标签</a><span class="btn btn-danger">span标签</span><div class="btn btn-info">div标签</div>

3）按钮大小

     大按钮     .btn-lg小按钮      .btn-sm超小按钮     .btn-xs

         <!-- 设置按钮大小 --><button class="btn btn-warning">正常按钮</button><button class="btn btn-warning btn-lg">大型按钮</button><button class="btn btn-warning btn-sm">小型按钮</button><button class="btn btn-warning btn-xs">超小按钮</button><br>

4）按钮禁用

     1.通过disable属性（真正的禁用元素）2.通过disable样式（样式上禁用）

<!-- 按钮禁用 --><!-- 在标签中添加disable属性 --><!-- 禁用前 --><button class="btn btn-info" onclick="alert('Hello');">按钮</button><!-- 禁用后 --><button class="btn btn-info" onclick="alert('Hello');" disabled="disabled">按钮</button><!-- 在元素标签中添加类名 "disabled"  只是在样式上禁用了 实际上并没有真正禁用 --><button class="btn btn-primary disabled" onclick="alert('Hello');" >按钮</button>

4.2.2 表单布局

 基本的表单结构式Bootstrap自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

向父元素添加 role=“form”。
把标签和控件放在一个带有class.form-group 的
中。这是获取最佳间距所必需的。
向所有的文本元素、和添加 class = “form-control”。

4.2.2.1 水平表单

 同一行显示  form-horizontal配合Bootstrap框架的网格系统

         <!-- 水平表单 --><form action="#" class="form-horizontal" role="form"><h2 class="text-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="upwd" class="control-label col-md-2">密码</label><div class="col-md-8"><input type="password"  id="upwd"  class="form-control" placeholder="请输入密码"/></div></div><div class="form-group"><label  class="control-label col-md-2">爱好</label><div class="col-md-8 col-md-offset-1" ><div class="checkbox-inline"><label><input type="checkbox" name="hobby" />唱歌</label></div><div class="checkbox-inline"><label><input type="checkbox" name="hobby" />跳舞</label></div></div></div><div class="form-group"><label  class="control-label col-md-2">城市</label><div class="col-md-8"><select class="form-control"><option >请选择城市</option><option >上海</option><option >北京</option></select><br></div></div><div class="form-group"><label for="remark" class="control-label col-md-2">简介</label><div class="col-md-8"><textarea id="remark" class="form-control"></textarea></div></div><div class="form-group"><div class="col-md-8 col-md-offset-5"><button class="btn btn-primary">提交</button>                </div></div></form>

4.2.2.2 内联表单

 将表单的控件都在一行内显示form-inline注意label不会显示，存在的意义：如果没有为输入控件设置label标签，屏幕阅读器将无法正确识别

      <!-- 内联表单 --><form 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="password" id="userPwd" class="form-control" placeholder="请输入密码" /></div><div class="form-group"><button class="btn btn-primary">提交</button></div></form>

4.3 缩略图

 缩略图在电商类的网站很常见，最常用的地方就是产品列表页面。缩略图的实现式配合网格系统一起使用。
同时还可以让缩略图配合标题、描述内容，按钮等。

Bootstrap字体图标链接: Bootstrap字体图标.

 见底部图标列表如下图：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>缩略图</title><link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/></head><body><div class="container"><div class="row"><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/zjl.png" style="width: 240px;height:320px;" alt="..."><h3>周杰伦</h3><p>出生于台湾省，歌手。</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/ljj.png" style="width: 240px;height:320px;" alt="..."><h3>林俊杰</h3><p>出生于新加坡，歌手。</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/hx.png" style="width: 240px;height:320px;" alt="..."><h3>韩雪</h3><p>出生于江苏省，演员。</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/qw.png" style="width: 240px;height:320px;" alt="..."><h3>戚薇</h3><p>出生于四川省，演员。</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div></div></div></body>
</html>

4.4 面板

 默认的 .panel组件所做的只是设置基本的边框（border） 和内补（padding）来包含内容。.panel-default ：默认样式.panel-heading：面板头.panel-body:面板主体内容

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>面板</title><link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/></head><body><div class="panel panel-warning"><div class="panel-heading"><h2 class="text-center">明星合集</h2></div><div class="panel-body"><div class="container"><div class="row"><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/zjl.jpeg" style="width: 240px;height:auto;" alt="..."><h3>周杰伦</h3><p>出生于台湾省，歌手。</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/ljj.jpeg" style="width: 240px;height:auto;" alt="..."><h3>林俊杰</h3><p>出生于新加坡，歌手。</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/hx.jpeg" style="width: 240px;height:auto;" alt="..."><h3>韩雪</h3><p>出生于江苏省，演员。</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div><!-- 缩略图 --><div class="col-md-3"><div class="thumbnail"><img src="img/qw.jpeg" style="width: 240px;height:auto;" alt="..."><h3>戚薇</h3><p>出生于四川省，演员。</p><button class="btn btn-default"><span class="glyphicon glyphicon-heart"></span> 喜欢</button><button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span> 评论</button></div></div></div></div></div></div></body>
</html>

5.1 导航

 使用下拉与按钮组合可以制作导航要点1、基本样式：.nav与“nav-tabs”、“nav-pills”组合制作导航2、分类：1)、标签型 (nav-tabs) 导航2)、胶囊型 (nav-pils) 导航3)、堆栈 (nav-stacked) 导航4)、自适应 (nav - justified) 导航5)、面包屑 (breadcrumb) 导航，单独使用样式、不与nav一起使用，直接加入到ol、ul中即可，一般用于导航，主要起的作用是告诉用户现在所处页面的位置（当前位置）3、状态：1)、选中状态 active 样式2)、禁用状态：disable 4、二级菜单

5.1.1 标签式导航

     <p>标签式的导航菜单</p><ul class="nav nav-tabs"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">IOS</a></li><li><a href="#">VB.Net</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li></ul>

5.1.2 胶囊式导航

     <p>基本的胶囊式的导航菜单</p><ul class="nav nav-pills"><li class="active"><a href="#">Home</a></li><li><a href="#">SVN</a></li><li><a href="#">IOS</a></li><li><a href="#">VB.Net</a></li><li><a href="#">Java</a></li><li><a href="#">PHP</a></li></ul>

5.1.3 面板屑式导航

     <p>面包屑式的导航菜单</p><ul class="breadcrumb"><li><a href="#">Home</a></li><li><a href="#">2013</a></li><li class="active">十一月</li></ul>

5.2 分页导航

 分页随处可见，分为页码导航和翻页导航页码导航：ul标签上加 pagination [pagination-lg | pagination-sm]翻页导航：ul标签是加 pager

5.2.1 分页

     <p>分页导航</p><ul class="pagination"><li><a href="#">&laquo;</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="#">&raquo;</a></li></ul>

5.2.2 翻页

     <p>翻页导航</p><ul class="pager"><li><a href="#">上一页</a></li><li><a href="#">下一页</a></li></ul>

5.3 下拉菜单

 在使用Bootstrap框架的下拉菜单时，必须使用两个js

     <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><!-- 包括所有bootstrap 的js插件或者根据需要使用的js插件调用 --><script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

要点1、使用一个类名为dropdown 或 btn-group的div 包裹 整个下拉框：2、默认向下 dropdown，向上弹起加入  .dropup 即可3、使用button 作为父标签，使用类名： dropdown-toggle 和自定义 data-toggle 属性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）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>下拉菜单</title><!-- 引入BootStrap的核心css文件 --><link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/><!-- 引入Jquery核心js文件，需要在bootstrap的js之前引入如果要使用Bootstrap的js插件，必须先调入jQuery --><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><!-- 引入Bootstrap的核心js文件 包括所有bootstrap 的js插件或者根据需要使用的js插件调用 --><script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><!-- 使用一个类名为dropdown 或 btn-group的div 包裹 整个下拉框 默认向下 dropdown，向上弹起加入  .dropup 即可--><div class="dropdown"><!-- 使用button 作为父标签，使用类名： dropdown-toggle 和自定义 data-toggle 属性 --><button class="btn btn-default dropdown-toggle" data-toggle="dropdown" >喜欢的频道<!-- 设置下拉箭头 --><span class="caret"></span></button><!-- 下拉菜单项使用一个ul 列表，并且定义一个类名为 “dropdown-menu” --><ul class="dropdown-menu"><!-- 分组标题：li 添加类名 “dropdown-header” 来实现分组的功能 --><li class="dropdown-header"> -- 科普 --</li><li> <a href="https://tv.cctv.com/lm/ryzr/" target="_blank">人与自然</a> </li><!-- 分组分割线：<li>添加类名“divider” 来实现添加下拉分割线的功能 --><li class="divider"></li><li class="dropdown-header"> -- 搞笑 --</li><li class="active"> <a href="https://tv.cctv.com/lm/ryzr/" target="_blank">快乐大本营</a> </li><li class="disabled"> <a href="https://www.mgtv.com/b/309048/3936635.html?cxid=95kqkw8n6" target="_blank">欢乐喜剧人</a> </li><li  > <a href="https://baike.baidu.com/item/%E7%94%9F%E6%B4%BB%E5%A4%A7%E7%88%86%E7%82%B8/9927034?fr=aladdin" target="_blank">生活大爆炸</a> </li></ul></div></body>
</html>

5.4 模态框

模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。

5.4.1 用法

 1.通过 data属性：控制器元素（比如按钮或者链接）上设置属性 data-toggle = “modal”，
同时设置 data-target=“#identifier” 或 href=“#identifier” 来指定要切换的特定的模态框（带有 id = “identifier”）。2.通过JavaScript：使用这种技术，可以通过JavaScript来调用带有id = “identifier” 的模态框：

5.4.2 实例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>模态框</title><link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><!--操作模态框1.通过 data属性：控制器元素（比如按钮或者链接）上设置属性 data-toggle = “modal”，同时设置 data-target=“#identifier” 或 href=“#identifier” 来指定要切换的特定的模态框（带有 id = “identifier”）。2.通过JavaScript：使用这种技术，可以通过JavaScript来调用带有id = “identifier” 的模态框：打开模态框：$('#identifier').modal('show')关闭模态框：$('#identifier').modal('hide')--><!-- 通过data属性 --><button class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 打开模态框 </button><!-- 通过JavaScript --><button class="btn btn-primary" 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">&times;</button><h4 class="modal-title" id="myModalLabel">添加用户</h4> </div><div class="modal-body"><form class="form-horizontal" role="form"><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="upwd" class="control-label col-md-2">密码</label><div class="col-md-8"><input type="password" id="upwd" 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><script type="text/javascript">//绑定按钮的点击事件$('#btn').click(function(){//手动打开模态框$('#myModal').modal('show');});//绑定按钮的点击事件$('#submit_btn').click(function(){//手动关闭模态框$('#myModal').modal('hide');});</script></body>
</html>