淘先锋技术网

首页 1 2 3 4 5 6 7

Bootstrap教程——快速上手（最给力的前端框架）

BootStrap教程

Bootstrap思维导图如下
在这里插入图片描述

一、下载与使用

1、进入中文网站，选择版本 v3.4.1

在这里插入图片描述

2、下载完成后

  • 拷贝 dist 文件夹到项目中

  • 由于我们之后可能还会使用 LayUi 等其他插件，所以我们将 dist 改为 Bootstrap，方便辨认

3、将 jQuery.js 放入我们的 js目录下

  • 因为 jQuery.js 并不属于 Bootstrap，所以我们放在 js 目录下

在这里插入图片描述

4、在 html 中模板为

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BookStrap的页面模板</title>

    <!--
        viewport表示⽤户是否可以缩放⻚⾯；

        width指定视区的逻辑宽度；
        device-width指示视区宽度应为设备的屏幕宽度；

        initial-scale指令⽤于设置Web⻚⾯的初始缩放⽐例
        initial-scale=1则将显示未经缩放的Web⽂档
    -->
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <!--载入 Bootstrap 的css-->
    <link  rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>


</head>
<body>

    <h1>Hello,world!</h1>
    
    <!-- Bootstrap的所有JS组件都是依赖jQuery的，所以必须放在前边-->
    <script src="js/jquery-3.4.1.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。-->
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <!--自己写的js文件放在body最下面-->

</body>
</html>

注意：

  • 如果要使⽤Bootstrap的js插件，必须先调用 jQuery.js

说明：

  • viewport 标记⽤于指定用户是否可以缩放Web页面
  • width 和 height 指令分别指定视区的逻辑宽度和⾼度。他们的值要么是以像素为单位的数字，要么是⼀个特殊的标记符号。
  • width 指令使用 device-width 标记可以指示视区宽度应为设备的屏幕宽度。
  • height 指令使用 device-height 标记指示视区⾼度为设备的屏幕⾼度。
  • initial-scale 指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web⽂档。
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>01-Bootstrap基本的HTML模板</title>

		<link  rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>

	</head>
	<body>
		<div><h1>Hello,world!</h1></div>
		<script src="js/jquery.js"></script>
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</body>
</html>




二、布局容器

1、.container

  • .container 类用于固定宽度并支持响应式布局的容器（网页两侧留白）
<div class="container">
  ...
</div>



2、.container-fluid

  • .container-fluid 类用于 100% 宽度，占据全部视口 (viewport) 的容器（网页两侧不留白）
<div class="container-fluid">
  ...
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-布局容器</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

    <!--
        布局容器
            1、.container 类用于固定宽度并支持响应式布局的容器
            <div class="container"> </div>
            2、.container-fluid类 用于100%宽度，占据全部视口（viewport）的容器。
            <div class="container-fluid"> </div>
    -->
    
    <!-- .container 类用于固定宽度并支持响应式布局的容器 -->
    <div class="container" style="background-color: thistle;height: 500px">
        .container 类用于固定宽度并支持响应式布局的容器
    </div>

    <!-- .container-fluid类 用于100%宽度，占据全部视口（viewport）的容器。 -->
    <div class="container-fluid" style="background-color: thistle;height: 500px">
        .container-fluid类 用于100%宽度，占据全部视口（viewport）的容器。
    </div>


</body>
</html>




三、栅格网格系统

  • Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
  • 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
  • Bootstrap框架中的网格系统就是将容器平分成12份。
<div class="container">
    <div class="row">
        <div class="col-md-4">4列</div>
        <div class="col-md-8">8列</div>
    </div>
</div>

注意：

行（row）必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中

具体内容应该放置在列容器 (column) 之内

col-屏幕尺寸-列数，其中屏幕尺寸有

  • xs(xsmall phones) 超小屏(自动)
  • sm(small tablets) 小屏(750px)
  • md(middle desktops) 中屏(970px)
  • lg(larger desktops) 大屏(1170px)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-栅格网格系统</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

</head>
<body>
    <div style="background-color: deepskyblue;">4</div>
    <div style="background-color: bisque;">8</div>

    <!--
        栅格网格系统: 本来div是块元素，独占一行,  用栅格网格系统自动 设置成 列为 行内元素
            1.列组合
                列总数不能超过12，大于12，则自动换到下一行

            2.列偏移：其他元素随之偏移
                只要在列元素上加 类名"col-md-offset-*" (其中星号代表要偏移的列组合数)，
                那么具有这个类名的列就会向右偏移。

            3.列排序  其他元素不随之偏移，原本的前面被后面覆盖
                列排序其实就是改变列的方向，就是改变左右浮动（向左右移动），并且设置浮动距离
                添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表偏移的列组合数)
				左浮动往前 pull ,右浮动往后 push

            4.列嵌套
                可以在一个列中  添加一个或者多行(row)容器，然后在这个行容器中插入列
    -->


    <!-- 布局容器 -->
    <div class="container">
        <!-- 行元素 -->
        <div class="row">
            <!-- 列元素 col-xs-数值 col-sm-数值 col-md-数值（大多用） col-lg-数值 -->
            <div class="col-md-4 col-lg-4" style="background-color: deepskyblue;">4</div>
            <div class="col-md-8 col-lg-8" style="background-color: bisque;">8</div>
        </div>

        <hr>

        <!-- 列组合 -->
        <div class="row">
            <div class="col-md-1" style="background-color: mediumslateblue;">1</div>
            <div class="col-md-1" style="background-color: bisque;">1</div>
            <div class="col-md-1" style="background-color: darkorange;">1</div>
            <div class="col-md-1" style="background-color: darkgreen;">1</div>
        </div>
        <div class="row">
            <div class="col-md-6" style="background-color: darkorange;">6</div>
            <div class="col-md-6" style="background-color: deepskyblue;">6</div>
        </div>
        <div class="row">
            <div class="col-md-4" style="background-color: mediumslateblue;">4</div>
            <div class="col-md-4" style="background-color: bisque;">4</div>
            <div class="col-md-4" style="background-color: darkorange;">4</div>
        </div>


        <!-- 列的总数不能超过12 -->
        <div class="row">
            <div class="col-md-4" style="background-color: mediumslateblue;">4</div>
            <div class="col-md-4" style="background-color: bisque;">4</div>
            <div class="col-md-5" style="background-color: darkorange;">5</div>
        </div>


        <hr>
        <!--列偏移-->
        <div class="row">
            <div class="col-md-1" style="background-color: mediumslateblue;">1</div>
            <div class="col-md-1 col-md-offset-1" style="background-color: bisque;">1</div>
            <div class="col-md-1" style="background-color: darkorange;">1</div>
            <div class="col-md-1 col-md-offset-4" style="background-color: darkgreen;">1</div>
        </div>


        <hr>
        <!--列排序 -->
        <div class="row">
            <div class="col-md-1" style="background-color: burlywood;">1</div>
            <div class="col-md-1 col-md-push-3" style="background-color: black;">1</div>
            <div class="col-md-1" style="background-color: hotpink;">1</div>
            <div class="col-md-1 col-md-pull-1" style="background-color: pink;">1</div>
        </div>


        <hr>
        <!--列嵌套-->
        <div class="row">
            <div class="col-md-6" style="background-color: chartreuse;">
                <div class="row">
                    <div class="col-md-1" style="background-color: yellow">1</div>
                    <div class="col-md-9" style="background-color: orange">9</div>
                    <div class="col-md-1" style="background-color: powderblue">1</div>
                    <div class="col-md-1" style="background-color: rebeccapurple">1</div>
                </div>
            </div>

            <div class="col-md-6" style="background-color: red;"></div>
        </div>


        <hr>
        <div class="row">
            <div class="col-md-3 col-sm-6" style="background-color: darkkhaki;">3</div>
            <div class="col-md-3 col-sm-6" style="background-color: mediumorchid;">3</div>
            <div class="col-md-3 col-sm-6" style="background-color: peru;">3</div>
            <div class="col-md-3 col-sm-6" style="background-color: pink;">3</div>
        </div>

    </div>

</body>
</html>




四、排版与列表、表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用样式</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

    <!--
        常用样式
            1.标题
                bootstrap对h1-h6 的标题效果进行覆盖
                提供了对应的类名，为非标题元素设置样式， .h1-.h6
                副标题 small标签 或 .small类名
            2.段落
                通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而对行高和margin也做相应的处理)
                <small>小号字</small>
                <b>加粗</b>或<strong>加粗</strong>
                <i>斜体</i>或<em>斜体</em>

            3.强调
                .text-muted:提示，使用浅灰色(#999)
                .text-primary: 主要，使用蓝色(#428bca)
                .text-success: 成功，使用浅绿色(#3c763d)
                .text-info: 通知信息，使用浅蓝色(#31708f)
                .text-warning: 警告，使用黄色(#8a6d3b)
                .text-danger: 危险，使用褐色(#a94442)

            4.对齐效果
				在CSS中常常使用text-align 来实现文本的对齐风格的设置
                    left	左对齐
                    right	右对齐
                    center	居中对齐
                    justify	两端对齐
                bootstrap 通过定义四个类名来控制文本的对齐风格；
                    .text-left: 左对齐
                    .text-center: 居中对齐
                    .text-right: 右对齐
                    .text-justify: 两端对齐
    -->

    <!-- 标题 -->
    <h1>标题1<small>副标题</small></h1>
    <h2>标题2<span class="small">副标题2</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: 成功，使用浅绿色(#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>
<div></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">
        hello 居中对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；
        hi 居中对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；
        居中对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；
    </p>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-常用样式</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

    <!--
          <ul class="list-group">
            <li class="list-group-item active">列表1</li>
            <li class="list-group-item">列表2</li>
            <li class="list-group-item">列表3</li>
            <li class="list-group-item">列表4</li>
            <li class="list-group-item">列表5</li>
          </ul>
        1.列表
			
            无序列表(<ul><li>...</li></ul>)
				.list-unstyled  去点列表
				.list-inline    内联列表
            有序列表(<ol><li>...</li></ol>)
            自定义列表(<dl><dt>...</dt><dd>...</dd></dl>)
				.dl-horizontal  内联列表（水平列表）
					当标题宽度超过 160px 时，将会显示三个省略号。

        2.代码
            (1)使用<code></code>来显示单行内联代码
            (2)使用<pre></pre>来显示多行代码块
                样式：.pre-scrollable (height,max-height高度固定，为340px,超过存在滚动条)
            (3)使用<kbd></kbd>来显示用户输入代码，如快捷键
		
		3.表格
            table样式 
				.table     基本表格 
			附加样式
                .table-bordered 边框             
                .table-striped	隔行变色 斑马线     
                .table-condensed紧凑    单元格没内距或者内距较其他表格的内距小    
                .table-hover	悬停变色

			tr、th、td样式	
				每种类名控制了行的不同背景颜色
				.active		将悬停的颜色应用在行或者单元格上
                .success	表示成功的操作
                .info		表示信息变化的操作
                .warning	表示一个警告的操作
                .danger		表示一个危险的操作
    -->
    <!--无序列表-->
    <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>无序项目列表二</li>
    </ul>
    <!--自定义列表 内联列表-->
    <dl class="dl-horizontal">
        <dt>HTML 超文本标记语言</dt>
        <dd>HTML称为超文本标记语言，是一种标识性语言。</dd>
        
        <dt>测试标题不能超过160px的宽度，否则后面两个点</dt>
        <dd>我在写一个水平定义列表的效果，我在写一个水平定义列表的效果</dd>
    </dl>


    <hr><br>
    <!--(1)使用<code></code>来显示单行内联代码 -->
    <strong>this is simple code</strong>
    <code>this is simple code</code> <br>
    <code>
        this is simple code <br>
        this is simple code
    </code>
    <!-- 快捷键 -->
    <p>使用<kbd>ctrl</kbd> + <kbd>s</kbd>保存内容</p>
    <!-- 多行代码 -->
    <pre>
public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("helloworld...")
    }
}
    </pre>
    
    <!--显示html代码需要使用字符字体-->
    <pre>
        &lt;h2&gt;你好&lt;/h2&gt;
    </pre>
    
    <!-- 样式：pre-scrollable (height,max-height高度固定，为340px,超过存在滚动条) -->
    <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>


    <hr>
    <br>
    <!-- 		表格         边框             隔行变色      紧凑            悬停变色·-->
    <table class="table table-bordered table-striped table-condensed table-hover">
        <tr class="info">
            <th>JavaSE</th>
            <th>数据库</th>
            <th>JavaScript</th>
        </tr>
        <tr class="success">
            <th>面向对象</th>
            <th>oracle</th>
            <th>json</th>
        </tr>
        <tr class="warning">
            <th>数组</th>
            <th>mysql</th>
            <th>ajax</th>
        </tr>
        <tr class="active">
            <th>JavaSE</th>
            <th>数据库</th>
            <th>JavaScript</th>
        </tr>
        <tr class="danger">
            <th>面向对象</th>
            <th>oracle</th>
            <th>json</th>
        </tr>
        <tr>
            <th>数组</th>
            <th>mysql</th>
            <th>ajax</th>
        </tr>
    </table>

   
</body>
</html>




五、表单

1、表单控件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-表单</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>

    <!--
        表单
            1.文本框: 
				input样式:type="text"
                    .form-control 表单元素的样式
                    .input-lg  	表单控件大
                    .input-sm	表单控件小

            2.下拉框 
				select样式
                    .form-control 表单元素的样式
                    multiple="multiple" 设置下拉框多选

            3.文本域 
				textarea样式
                	.form-control 表单元素的样式

            4.复选框 
				input样式：type="checkbox"
                    垂直显示    .checkbox 			作用div
                    水平显示    .checkbox-inline	作用label

            5.单选框 
				input样式：type="radio"
                    垂直显示    .radio        	作用div
                    水平显示    .radio-inline 	作用label

            6.按钮   
				button样式
                1.使用按钮
                    基础样式: .btn
                    附加样式: 		
                            .btn-primary btn-secondary
                            .btn-info 
                            .btn-success 
                            .btn-warning 
                            .btn-danger 
                            .btn-link
					如果不希望按钮文本换行，可以在按钮中添加text-nowrap类
                2.多标签使用
                    其他标签可以通过添加按钮样式设置成按钮效果 （a标签，span标签等）
                3.按钮大小
                    .btn-lg	大按钮   
                    .btn-sm	正常按钮 
                    .btn-xs	小按钮   
                4.按钮禁用
                    1.通过 disabled属性 （真正的禁用元素）
                    2.通过 .disable样式（样式上禁用）
    -->
    <input type="text"/> <br>
    <select>
        <option value="">请选择城市</option>
        <option value="">上海</option>
        <option value="">北京</option>
    </select><br>
    <textarea></textarea><br>
    <input type="checkbox" name="hobby">唱歌
    <input type="checkbox" name="hobby">跳舞
    <input type="radio" name="hobby">男
    <input type="radio" name="hobby">女 <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>


    <hr><br>
    <!-- 下框框 -->
    <div class="row">
        <div class="col-md-3">
            
            <select class="form-control">
                <option value="">请选择城市</option>
                <option value="">上海</option>
                <option value="">北京</option>
            </select><br>
            <!--多选-->
            <select class="form-control" multiple="multiple">
                <option value="">请选择城市</option>
                <option value="">上海</option>
                <option value="">北京</option>
            </select><br>
            
        </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><input type="checkbox" name="hobby" />唱歌</label>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="hobby" />跳舞</label>
            </div>
        </div>
    </div>
    <!-- 水平显示  label行内元素 -->
    <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>


    <!--单选框-->
    <!-- 垂直显示 -->
    <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>
    <!-- 水平显示 -->
    <div class="row">
        <div class="col-md-3">
            <label class="radio-inline">
                <input type="radio" name="sex" />男
            </label>
            <label class="radio-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-primary">按钮</button>
    <button class="btn btn-info">按钮</button>
    <button class="btn btn-default">按钮</button>
    <button class="btn btn-link">按钮</button> <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-warning 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、表单布局

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

向父元素==== 元素 添加 role=“form”

把标签和控件放在一个带有 class=“form-group” 的==

== 中。这是获取最佳间距所必需的
向所有的文本元素 、 、select 添加 class=“form-control” 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-表单布局</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">

</head>
<body>

    <!--
        表单布局
            form样式： 
                .form-horizontal  	(垂直表单：竖直)
				.form-inline   		(内联表单)
            div样式:
				.form-group
			表单控件：<input> 、<textarea> 、select样式
				.form-control
                
    -->
    <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="text" 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">
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby" />唱歌
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby" />跳舞
                </label>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-md-2">城市</label>
            <div class="col-md-8">
                <select class="form-control">
                    <option value="">请选择城市</option>
                    <option value="">上海</option>
                    <option value="">北京</option>
                </select>
            </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-2 col-md-offset-5">
                <button class="btn btn-primary">提交</button>
            </div>
        </div>

    </form>


    <br>
    <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-default">提交</button>
        </div>
    </form>

</body>
</html>




六、缩略图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-缩略图</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    
    <!--
		1、字体图标
			<span class="字体图标类名"> 字体图标 </span>
		2、缩略图
			.thumbnail 
				这会添加四个像素的内边距（padding）和一个灰色的边框。
				当鼠标悬停在图像上时，会动画显示出图像的轮廓。
			
	-->

    <div class="container">
        <div class="row">
            <!-- 缩略图 -->
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="img/food01.jpg" style="width: 240px;height: 360px;">
                    <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/food02.jpg" style="width: 240px;height: 360px;">
                    <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/food03.jpg" style="width: 240px;height: 360px;">
                    <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/food04.jpg" style="width: 240px;height: 360px;">
                    <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>




七、面板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-面板</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    
    <!--
		面板组件:用于把 DOM 组件插入到一个盒子中
            .panel 	div样式
            .panel-default
				.panel-heading  div样式
				.panel-body     div样式
    -->
    

    <div class="panel panel-warning">
        <div class="panel-heading">
            <h2 align="center">明星合集</h2>
        </div>
        <div class="panel-body">
            <div class="row">
                <!-- 缩略图 -->
                <div class="col-md-3">
                    <div class="thumbnail">
                        <img src="img/food01.jpg" style="width: 240px;height: 360px;">
                        <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/food02.jpg" style="width: 240px;height: 360px;">
                        <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/food03.jpg" style="width: 240px;height: 360px;">
                        <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/food04.jpg" style="width: 240px;height: 360px;">
                        <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>


</body>
</html>




八、导航与分页导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10-导航</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
    <!--
		1.导航：Navigation
			ul样式:
				.nav		基本样式
				.nav-tabs 	标签式的导航菜单
				.nav-pills	胶囊式的导航菜单
				.nav-pills .nav-stacked	垂直的胶囊式导航菜单

              <ul class="nav">
                <li class="nav-item">
                  <a class="nav-link" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >首页</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >简介</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >详情</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link disabled" href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  tabindex="-1" 
                      aria-disabled="true">联系电话</a>
                </li>
              </ul>


			标签式的导航菜单
				给一个无序列表添加 class="nav nav-tabs"
					给任意一个 li 添加 class="active"（表示选中这个导航）
			胶囊式导航菜单
				水平的
				给一个无序列表添加 class="nav nav-pills"
					给任意一个 li 添加 class="active"（表示选中这个导航）
				垂直的
				给一个无序列表添加 class="nav nav-pills" 的同时添加class="nav-stacked"
					给任意一个 li 添加 class="active"（表示选中这个导航）
			两端对齐导航
                让标签式导航两端对齐：给一个无序列表添加 class="nav nav-tabs nav-justified"
                让胶囊式导航两端对齐：给一个无序列表添加 class="nav nav-pills nav-justified"
			
			面包屑导航
				.breadcrumb

			总结：
                .nav nav-tabs	标签页
                .nav nav-pills	胶囊式标签页
                .nav nav-pills nav-stacked	胶囊式标签页以垂直方向堆叠排列的
                .nav-justified	两端对齐的标签页
	
		
		2.分页导航
			默认的分页
				给一个无序列表添加class="pagination"
				给任意一个 li 添加 class="active"（表示选中这一页）
			翻页
				给一个无序列表添加class="pager"

		

	-->
    

    <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>

    <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>

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


    <hr>
    <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>
    <p>翻页导航</p>
    <ul class="pager">
        <li><a href="#">上一页</a></li>
        <li><a href="#">下一页</a></li>

    </ul>


</body>
</html>




九、插件+js

1、下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <!-- 引入BootStrap的核心css文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- 引入Jquery核心js文件，需要在bootstrap 的之前引入 -->
    <script src="js/jquery-3.4.1.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

    <!--
		.dropdown div样式
			.dropdown-toggle  data-toggle="dropdown"

			.dropdown-menu   ul样式
				dropdown-header li样式
				
        下拉菜单
            1、使用一个类名为dropdown,或者btn-group的div 包裹整个下拉框：
                <div class="dropdown"></div>
            2、默认向下dropdown,	向上弹起加入.dropup 即可
                                                                        切换
            3.使用button作为父菜单，使用类名：dropdown-toggle 和自定义data-toggle属性
                <button type="button" class="btn btn-default dropdown-toggle" 
															data-toggle="dropdown">
				</button>
            4.在button中, 使用font 制作下拉箭头
                <span class="caret"></span>

            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 包裹整个下拉框：默认向下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="#" target="_blank">人与自然</a></li>

            <!-- 分组分割线：<li>添加类名"divider"来实现添加下拉分割线的功能 -->
            <li class="divider"></li>

            <li class="dropdown-header">--搞笑--</li>
            <li><a href="#" target="_blank">快乐大本营</a></li>
            <li class="disabled"><a href="#" target="_blank">欢乐喜剧人</a></li>
            <li><a href="#" target="_blank">生活大爆炸</a></li>

        </ul>

    </div>

</body>
</html>



2、模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <!-- 引入BootStrap的核心css文件 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <!-- 引入Jquery核心js文件，需要在bootstrap 的之前引入 -->
    <script src="js/jquery-3.4.1.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <!--操作模态框
            通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，
            同时设置 data-target="#identifier"
                 或 href="#identifier" target="_blank" rel="external nofollow"  来指定要切换的特定的模态框（带有 id="identifier"）。
            
			通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：
                    $('#identifier').modal(options)
                        $('#identifier').modal('show')
                        $('#identifier').modal('hide')
    -->
    <!-- 通过 data 属性 -->
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" >打开模态框</button>
    <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 action="#" class="form-horizontal">
                        <div class="form-group">
                            <label for="uname" class="col-md-2 control-label">姓名</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="col-md-2 control-label">密码 </label>
                            <div class="col-md-8">
                                <input type="text" 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>

在这里插入图片描述