bootstrap

最新推荐文章于 2024-08-14 09:51:23 发布
最新推荐文章于 2024-08-14 09:51:23 发布
阅读量91 收藏
点赞数
文章标签： bootstrap css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52701502/article/details/130300060
版权

bootstrap 教案

学习目标

1.熟练掌握栅格系统
2.熟练掌握bootstrap常见组件

一、bootstrap概述

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

相关案例

bootstrap特点：

  • html 5 文档类型

    Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

  • 移动设备优先

    Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

  • 布局容器

    Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

二、下载

  • 网址：https://www.bootcss.com/

三 、CSS样式

3.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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>默认容器</title>
    <style>
        .nav{
            height:80px;
            background-color: red;
        }
        .head {
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <!-- 具有外边距容器 -->
    <div class="container nav">默认容器</div>
    <!-- 通栏容器 -->
    <div class="container-fluid head">通栏容器</div>
</body>
</html>

3.2 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 通过“行（row）”在水平方向创建一组“列（column）”。
  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

通过研究后面的实例，可以将这些原理应用到你的代码中。

案例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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>桌面栅格系统布局</title>
    <style>
       .col-md-1,
       .col-md-2,
       .col-md-3,
       .col-md-4,
       .col-md-5,
       .col-md-6,
       .col-md-7,
       .col-md-8,
       .col-md-9,
       .col-md-10,
       .col-md-11,
       .col-md-12{
            padding: 0 12px;
       }
    </style>
</head>
<body>
    <!-- 定义外部容器 -->
    <div class="container">
        <!-- 有三行内容 -->
        <div class="row">
            <div class="col-md-1" style="background:red;border:2px solid blue;">每内容1</div>
            <div class="col-md-1" style="background:red;border:2px solid blue;">每内容2</div>
            <div class="col-md-1" style="background:red;border:2px solid blue;">每内容3</div>
            <div class="col-md-1" style="background:red;border:2px solid blue;">每内容4</div>
            <div class="col-md-1" style="background:red;border:2px solid blue;">每内容5</div>
            <div class="col-md-1" style="background:red;border:2px solid blue;">每内容6</div>
            <div class="col-md-1" style="background:red;border:2px solid blue;">每内容7</div>
            <div class="col-md-1" style="background:red;border:2px solid blue;">每内容8</div>
            <div class="col-md-1" style="background:red;border:2px solid blue;">每内容9</div>
            <div class="col-md-1" style="background:red;border:2px solid blue;">每内容10</div>
            <div class="col-md-1" style="background:red;border:2px solid blue;">每内容11</div>
            <div class="col-md-1" style="background:red;border:2px solid blue;">每内容12</div>
        </div>
        <div class="row">
            <div class="col-md-4" style="background:red;border:2px solid blue;">目录</div>
            <div class="col-md-8" style="background:red;border:2px solid blue;">轮播图</div>    
        </div>
        <div class="row">
            <div class="col-md-4" style="background:red;border:2px solid blue;">目录</div>
            <div class="col-md-4" style="background:red;border:2px solid blue;">轮播图</div>
            <div class="col-md-4" style="background:red;border:2px solid blue;">轮播图</div>
        </div>
    </div>
</body>
</html>

案例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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>移动端栅格系统</title>
    <style>
       
    </style>
</head>
<body>
    <!-- 定义外部容器 -->
    <div class="container">
        <!-- 有三行内容 -->
        <div class="row">
            <div class="col-md-3 col-xs-6" style="background:red;border:2px solid blue;">每内容1</div>
            <div class="col-md-3 col-xs-6" style="background:red;border:2px solid blue;">每内容2</div>
            <div class="col-md-3 col-xs-6" style="background:red;border:2px solid blue;">每内容3</div>
            <div class="col-md-3 col-xs-6" style="background:red;border:2px solid blue;">每内容4</div>
            
        </div>
    </div>
</body>
</html>

案例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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>多余列另起一行</title>
</head>
<body>
    <!-- 定义外部容器 -->
    <div class="container">
        <!-- 多余列令起一行 -->
        <div class="row">
            <div class="col-md-4" style="background:red;border:2px solid blue;">目录</div>
            <div class="col-md-4" style="background:red;border:2px solid blue;">轮播图</div>
            <div class="col-md-8" style="background:red;border:2px solid blue;">轮播图</div>
        </div>
    </div>
</body>
</html>

案例4：偏移列

<!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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>偏移量</title>
</head>
<body>
    <!-- 定义外部容器 -->
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background:red;border:2px solid blue;">左边块</div>
            <!-- col-md-offset 设置偏移量 -->
            <div class="col-md-4 col-md-offset-4" style="background:red;border:2px solid blue;">右边块</div>
        </div>
    </div>
</body>
</html>

案例5：嵌套列

<!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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>行嵌套</title>
</head>
<body>
    <!-- 定义外部容器 -->
    <div class="container">
        <!-- row 只能嵌套 col 但是col可以嵌套row -->
        <div class="row">
            <div class="col-md-9" style="background:red;border:2px solid blue;">
                左上边
                <div class="row">
                    <div class="col-md-4" style="background:red;border:2px solid blue;">左下边</div>
                    <div class="col-md-4" style="background:red;border:2px solid blue;">右下边</div>
                </div>
            </div>  
        </div>
    </div>
</body>
</html>

**案例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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>列排序</title>
</head>
<body>
    <!-- 定义外部容器 -->
    <div class="container">
        <div class="row">
            <!-- col-md-push往右移动几个格 -->
            <!-- col-md-pull往左移动几个格 -->
            <div class="col-md-4 col-md-push-8" style="background:red;border:2px solid blue;">左边</div>
            <div class="col-md-6 col-md-pull-4" style="background:blue;border:2px solid blue;">右边</div>
        </div>
    </div>
</body>
</html>

3.3 排版

3.3.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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>标题</title>
</head>
<body>
    <!-- 定义外部容器 -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>胖叔讲Java<small>第二阶段前端</small></h1>
            </div>
        </div>
    </div>
</body>
</html>

3.3.2 页面主题内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-
                      
                      
                      
                      +" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>主体</title>
</head>
<body>
    <!-- 定义外部容器 -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p class="lead">小李飞刀第一章</p>
				<p>冷风如刀，以大地为砧板，视众生为鱼肉。万里飞雪，将穹苍作烘炉，熔万物为白银。雪将住，风未定，一辆马车自北而来，滚动的车轮辗碎了地上的冰雪，却辗不碎天地间的寂寞
				冷风如刀，以大地为砧板，视众生为鱼肉。万里飞雪，将穹苍作烘炉，熔万物为白银。雪将住，风未定，一辆马车自北而来，滚动的车轮辗碎了地上的冰雪，却辗不碎天地间的寂寞
				冷风如刀，以大地为砧板，视众生为鱼肉。万里飞雪，将穹苍作烘炉，熔万物为白银。雪将住，风未定，一辆马车自北而来，滚动的车轮辗碎了地上的冰雪，却辗不碎天地间的寂寞
				冷风如刀，以大地为砧板，视众生为鱼肉。万里飞雪，将穹苍作烘炉，熔万物为白银。雪将住，风未定，一辆马车自北而来，滚动的车轮辗碎了地上的冰雪，却辗不碎天地间的寂寞
				</p>
            </div>
        </div>
    </div>
</body>
</html>

3.3.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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>内联文本</title>
</head>
<body>
    <!-- 定义外部容器 -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p class="lead">小李<mark>飞刀</mark>第一章</p>
				<p>冷风如刀，以大地为砧板，视众生为鱼肉。万里飞雪，将穹苍作烘炉，熔万物为白银。雪将住，风未定，一辆马车自北而来，滚动的车轮辗碎了地上的冰雪，却辗不碎天地间的寂寞
				冷风如刀，以大地为砧板，视众生为鱼肉。万里飞雪，将穹苍作烘炉，熔万物为白银。雪将住，风未定，一辆马车自北而来，滚动的车轮辗碎了地上的冰雪，却辗不碎天地间的寂寞
				冷风如刀，以大地为砧板，视众生为鱼肉。万里飞雪，将穹苍作烘炉，熔万物为白银。雪将住，风未定，一辆马车自北而来，滚动的车轮辗碎了地上的冰雪，却辗不碎天地间的寂寞
				冷风如刀，以大地为砧板，视众生为鱼肉。万里飞雪，将穹苍作烘炉，熔万物为白银。雪将住，风未定，一辆马车自北而来，滚动的车轮辗碎了地上的冰雪，却辗不碎天地间的寂寞
				</p>
                原价：<del>998￥</del>，折扣：12￥
            </div>
        </div>
    </div>
</body>
</html>

3.3.4 小号，着重

<!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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>小号着重号</title>
</head>
<body>
    <!-- 定义外部容器 -->
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <p class="lead">小李飞刀<strong>第一章</strong></p>
                <small>作者：古龙</small>
            </div>
        </div>
    </div>
</body>
</html>

3.3.5 文本对齐

<!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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>文本对齐</title>
</head>
<body>
    <div class="container-fluid">
		<div class="row">
			<!--
				1.可以通过class直接设置文本的对齐方式，具体如下
					text-left:左对齐
					text-center:内容居中
					text-right:右对齐
					text-justify:内容规整，自动换行
					text-nowrap:不换行
			  -->
			<div class="col-md-6" style="background: red">
				<p class="text-left" style="background:pink">内容左对齐</p>
				<p class="text-center" style="background:blue">内容居中</p>
				<p class="text-right" style="background:pink">内容右对齐</p>
				<p class="text-justify">hello hellohello hellohello hellohello 
				hellohello hellohello hellohello 
				ellohello hellohello hellohello hellohello 
				hellohello hellohello hellohello hellohello 
				hellohello hellohello hellohello hellohello hellohello 
				hellohello hellohello hellohello hellohello hellohello 
				hellohello hellohello hellohello hellohello hellohello 
				hellohello hellohello hellohello hellohello hellohello 
				hellohello hellohello hellohello hellohello hellohello 
				hellohello hellohello hellohello hellohello hellohello 
				hellohello hello</p>
				<p class="text-nowrap">hellohello hellohello hellohello 
				ellohello hellohello hellohello hellohello 
				hellohello hellohello hellohello hellohello 
				hellohello hellohello hellohello hellohello hellohello 
				hellohello hellohello hellohello hellohello hellohello 
				hellohello hellohello hellohello hellohello hellohello 
				hellohello hellohello hellohello hellohello hellohello 
				hellohello hellohello hellohello hellohello hellohello 
				hellohello hellohello hellohello hellohello hellohello 
				hellohello hello </p>
			</div>
		</div>
	</div>
</body>
</html>

3.3.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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>转大小写</title>
</head>
<body>
    <div class="container-fluid">
		<div class="row">
			<div class="col-md-6" style="background: red">
				<!-- 1.转大写 -->
				<p class="text-uppercase">abcdefg</p>
				<!-- 2.转小写 -->
				<p class="text-lowercase">ABCDEFG</p>
				<!-- 3.首字母大写 -->
				<p class="text-capitalize">abcdefg</p>
			</div>
		</div>
	</div>
</body>
</html>

###3.3.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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>地址</title>
</head>
<body>
    <div class="container-fluid">
		<div class="row">
			<div class="col-md-6" style="background: red">
				<address>地址：北京市xx区xxx镇xx村</address>
			</div>
		</div>
	</div>
</body>
</html>

###3.3.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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>列表</title>
</head>
<body>
    <div class="container-fluid">
		<div class="row">
			<div class="col-md-6" >
				<!-- 1.无序列表  -->
				<ul>
					<li>洗衣机</li>
					<li>冰箱</li>
					<li>彩电</li>
				</ul>
				<!-- 2.有序列表 -->
				<ol>
					<li>洗衣机</li>
					<li>冰箱</li>
					<li>彩电</li>
				</ol>
				<!-- 3.无样式列表 -->
				<ul class="list-unstyled">
					<li>洗衣机</li>
					<li>冰箱</li>
					<li>彩电</li>
				</ul>
				<!-- 4.内联列表  -->
				<ul class="list-inline">
					<li>洗衣机</li>
					<li>冰箱</li>
					<li>彩电</li>
				</ul>
				<!-- 5.带有描述信息的列表  -->
				<dl>
				  <dt>配送方式</dt>
				  <dd>上门自提</dd>
				  <dd>211限时达</dd>
				</dl>
				<!-- 6.带有水平描述信息的列表  -->
				<dl class="dl-horizontal">
				  <dt>配送方式</dt>
				  <dd>上门自提</dd>
				  <dd>211限时达</dd>
				</dl>
			</div>
		</div>
	</div>
</body>
</html>

3.4 表格

3.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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <title>表格</title>
</head>
<body>
    <div class="container-fluid">
		<div class="row">
			<!-- 基本表格 -->
			<table class="table">
				<tr>
					<td>编号</td>
					<td>姓名</td>
					<td>性别</td>
					<td>手机号</td>
				</tr>
				<tr>
					<td>1</td>
					<td>小红</td>
					<td>女</td>
					<td>138389438</td>
				</tr>
				<tr>
					<td>2</td>
					<td>小李</td>
					<td>男</td>
					<td>121212121</td>
				</tr>
				<tr>
					<td>3</td>
					<td>小王</td>
					<td>男</td>
					<td>135121212</td>
				</tr>
			</table>	
		</div>
	</div>
</body>
</html>

3.4.2 条纹状表格实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>条纹状表格</title>
<link rel="stylesheet"  href="../bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12" >
				<table class="table table-striped">
					<tr>
						<td>编号</td>
						<td>姓名</td>
						<td>性别</td>
						<td>手机号</td>
					</tr>
					<tr>
						<td>1</td>
						<td>小红</td>
						<td>女</td>
						<td>138389438</td>
					</tr>
					<tr>
						<td>2</td>
						<td>小李</td>
						<td>男</td>
						<td>121212121</td>
					</tr>
					<tr>
						<td>3</td>
						<td>小王</td>
						<td>男</td>
						<td>135121212</td>
					</tr>
				</table>	
			</div>
		</div>
	</div>
</body>
</html>

3.4.3 带边框表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>带边框表格</title>
<link rel="stylesheet"  href="../bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12" >
			<!-- 1.带边框表格 table table-bordered -->
				<table class="table table-bordered">
					<tr>
						<td>编号</td>
						<td>姓名</td>
						<td>性别</td>
						<td>手机号</td>
					</tr>
					<tr>
						<td>1</td>
						<td>小红</td>
						<td>女</td>
						<td>138389438</td>
					</tr>
					<tr>
						<td>2</td>
						<td>小李</td>
						<td>男</td>
						<td>121212121</td>
					</tr>
					<tr>
						<td>3</td>
						<td>小王</td>
						<td>男</td>
						<td>135121212</td>
					</tr>
				</table>	
			</div>
		</div>
	</div>
</body>
</html>

3.4.4 鼠标悬浮表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标悬浮表格</title>
<link rel="stylesheet"  href="../bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12" >
			<!-- 1.鼠标悬浮 table-hover -->
				<table class="table table-bordered table-hover">
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>性别</th>
						<th>手机号</th>
					</tr>
					<tr>
						<td>1</td>
						<td>小红</td>
						<td>女</td>
						<td>138389438</td>
					</tr>
					<tr>
						<td>2</td>
						<td>小李</td>
						<td>男</td>
						<td>121212121</td>
					</tr>
					<tr>
						<td>3</td>
						<td>小王</td>
						<td>男</td>
						<td>135121212</td>
					</tr>
				</table>	
			</div>
		</div>
	</div>
</body>
</html>

3.5 表单

3.5.1 表单基本应用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单的基本应用</title>
<link rel="stylesheet"  href="../bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12" >
				<!-- 1.表单的基本应用  -->
				<form action="http://www.baidu.com" method="post">
					<div class="from-group">
						<label for="username">姓名</label>
						<input type="text" class="form-control" id="username"/>
					</div>
					<div class="from-group">
						<label for="usersex">姓别</label>
						<input type="text" class="form-control" id="usersex"/>
					</div>
					<div class="from-group">
						<label for="phone">邮箱</label>
						<input type="email" class="form-control" id="phone"/>
					</div>
					<br/>
					<button type="submit" class="btn btn-default">提交</button>
				</form>
			</div>
		</div>
	</div>
</body>
</html>

3.5.2 内联表单的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联表单</title>
<link rel="stylesheet"  href="../bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12" >
                <!-- class form-inline 内联表单-->
				<form class="form-inline">
					<div class="form-group">
						<label for="username">用户名</label>
						<input type="text" id="username" class="form-control" placeholder="请输入用户名" />
					</div>
					<button type="submit" class="btn btn-primary">提交</button>
				</form>
			</div>
		</div>
	</div>
</body>
</html>

###3.5.3 水平表单以及被支持的控件

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

##3.6 按钮

3.6.1 可作为按钮的几个标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮</title>
<link rel="stylesheet"  href="../bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12" >
				<!-- 1.可以作为按钮的几个标签 -->
				<a class="btn btn-default">百度</a>
				<button class="btn btn-default">按钮2</button>
				<input type="button" class="btn btn-default"  value="按钮3"/>
				<input type="submit" class="btn btn-default" />
			</div>
		</div>
	</div>
</body>
</html>

3.6.2 按钮的几个样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮</title>
<link rel="stylesheet"  href="../bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12" >
				<!-- 1.按钮的几个常见样式 -->
				<button type="button" class="btn btn-default">按钮1</button>
				<button type="button" class="btn btn-primary">按钮2</button>
				
				<button type="button" class="btn btn-success">（成功）Success</button>
				<button type="button" class="btn btn-info">（一般信息）Info</button>
				<button type="button" class="btn btn-warning">（警告）Warning</button>
				<button type="button" class="btn btn-danger">（危险）Danger</button>
				<button type="button" class="btn btn-link">（链接）Link</button>
			</div>
		</div>
	</div>
</body>
</html>

###3.6.3 按钮的尺寸设置

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮</title>
<link rel="stylesheet"  href="../bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12" >
				<!-- 1.大按钮 -->
				<button type="button" class="btn btn-primary btn-lg">大按钮</button>
				<!-- 2.小按钮 -->
				<button type="button" class="btn btn-primary btn-sm">小按钮</button>
				<button type="button" class="btn btn-primary btn-xs">超小按钮</button>
			</div>
		</div>
	</div>
</body>
</html>

3.6.4 按钮的其他操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮</title>
<link rel="stylesheet"  href="../bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12" >
				<!-- 1.按钮的其他操作 -->
				<button class="btn btn-primary btn-xs btn-block">设置按钮为块元素</button>
				<!-- 2.禁用按钮-->
				<button class="btn btn-primary btn-ms" disabled>禁用按钮</button>
				<!-- 3.a标签禁用 -->
				<a href="#" class="btn btn-primary btn-ms disabled">百度</a>
			</div>
		</div>
	</div>
</body>
</html>

四、bootstrap组件

4.1 字体图标

包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为 Glyphicons 添加一个友情链接。

案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图标组件</title>
<link rel="stylesheet"  href="../bootstrap/css/bootstrap.min.css" />
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12" >
				<!-- 
				1.图标组件不能和其他组件共用一个标签，应该独立使用一个标签
				2.图标标签不能包含内容
				 -->
				 <button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-plus" title="添加"></span></button>
				 <button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-minus" title="删除"></span></button>
				 <button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-search" title="查询"></span></button>
				 <button class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-pencil" title="修改"></span></button>
				 

			</div>
		</div>
	</div>
</body>
</html>

##4.2 下拉菜单

4.2.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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../bootstrap3/js/bootstrap.min.js"></script>
    <title>下拉选</title>
</head>
<body>
    <div class="container-fluid">
		<div class="row">
			<div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="logout-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                  admin
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="logout-menu">
                  <li><a href="#">个人信息</a></li>
                  <li><a href="#">修改密码</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">安全退出</a></li>
                </ul>
              </div>
		</div>
	</div>
</body>
</html>

4.2.2 下拉选方法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉选组件</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function(){
		//1.启动下拉选
		//$(".dropdown-toggle").dropdown();
		//2.启动下拉选并默认是初始状态是显示
		$(".dropdown-toggle").dropdown("toggle");
	});
</script>
</head>
<body>
	<!-- 1.下拉选组件 -->
	<div class="dropdown" id="myDropdown">
		 <!-- 2.下拉选按钮设置 -->
		 <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
		   	系统管理
		    <span class="caret"></span>
		 </button>
		 <!-- 3.下拉选内容设置 -->
		 <ul class="dropdown-menu" aria-labelledby="menu1">
		 	<!-- 标题  -->
		 	<li class="dropdown-header">权限系统管理</li>
		    <li><a href="#">注册</a></li>
		    <li><a href="#">登录</a></li>
		    <!-- 分割线  -->
		    <li role="separator" class="divider"></li>
		    <!-- 禁用功能 -->
		    <li class="disabled"><a href="#">禁用功能</a></li>
		    <li><a href="#">安全退出</a></li>
		  </ul>
	</div>
</body>
</html>

4.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">
    <!-- 引入bootstrap资源 引入样式-->
    <link href="../bootstrap3/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../bootstrap3/js/bootstrap.min.js"></script>
    <script>
        $(function(){
            //1.启动下拉选
            //$(".dropdown-toggle").dropdown();
            //2.启动下拉选并默认是初始状态是显示
            $(".dropdown-toggle").dropdown("toggle");
            //3.下拉选事件:当点击下拉选显示时触发
            $("#myDropdown").on('show.bs.dropdown', function () {
                alert("点击显示")
            })
            //4.下拉选事件:当显示菜单可见时触发事件
            $("#myDropdown").on('shown.bs.dropdown', function () {
                alert("可见的")
            })
            //5.下拉选事件:当点击下拉选隐藏时触发
            $("#myDropdown").on('hide.bs.dropdown', function () {
                alert("点击隐藏")
            })
            //6.下拉选事件:当点击下拉选隐藏时触发
            $("#myDropdown").on('hidden.bs.dropdown', function () {
                alert("隐藏的")
            })
        });
    </script>
    <title>下拉选</title>
</head>
<body>
    <div class="container-fluid">
		<div class="row">
			<div class="dropdown" id="myDropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="logout-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                  admin
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="logout-menu">
                  <li><a href="#">个人信息</a></li>
                  <li><a href="#">修改密码</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">安全退出</a></li>
                </ul>
              </div>
		</div>
	</div>
</body>
</html>

4.3 按钮组

4.3.1 按钮组的基本使用

案例:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮组</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="btn-group" role="group" aria-label="label1">
	  <button type="button" class="btn btn-primary">左边</button>
	  <button type="button" class="btn btn-primary">中间</button>
	  <button type="button" class="btn btn-primary">右边</button>
	</div>
</body>
</html>

4.3.2 按钮组工具栏

把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮组</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="btn-toolbar" role="group" aria-label="label1">
	  <div class="btn-group" role="group1" aria-label="label1">
	  	 <button type="button" class="btn btn-primary">1</button>
	  	 <button type="button" class="btn btn-primary">2</button>
	     <button type="button" class="btn btn-primary">3</button>
	  </div>
	  <div class="btn-group" role="group2" aria-label="label2">
	  	 <button type="button" class="btn btn-primary">4</button>
	  	 <button type="button" class="btn btn-primary">5</button>
	     <button type="button" class="btn btn-primary">6</button>
	  </div>
	</div>
</body>
</html>

4.3.3 按钮组尺寸

只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮组</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	  <!--
	  	1.巨大btn-group-lg
	  	2.小的 btn-group-sm
	  	3.更小的btn-group-xs
	    -->
	  <div class="btn-group btn-group-lg" role="group1" aria-label="label1">
	  	 <button type="button" class="btn btn-primary">1</button>
	  	 <button type="button" class="btn btn-primary">2</button>
	     <button type="button" class="btn btn-primary">3</button>
	  </div>
	  <div class="btn-group btn-group-sm" role="group1" aria-label="label1">
	  	 <button type="button" class="btn btn-primary">1</button>
	  	 <button type="button" class="btn btn-primary">2</button>
	     <button type="button" class="btn btn-primary">3</button>
	  </div>
	  <div class="btn-group btn-group-xs" role="group1" aria-label="label1">
	  	 <button type="button" class="btn btn-primary">1</button>
	  	 <button type="button" class="btn btn-primary">2</button>
	     <button type="button" class="btn btn-primary">3</button>
	  </div>
</body>
</html>

###4.3.4 按钮的嵌套

想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮组</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	 <div class="btn-group" role="group" aria-label="...">
  		<button type="button" class="btn btn-primary">登录</button>
  		<button type="button" class="btn btn-primary">注册</button>
		<div class="btn-group" role="group">
		    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
		      	系统管理
		      <span class="caret"></span>
		    </button>
		    <ul class="dropdown-menu">
		      <li><a href="#" >安全退出</a></li>
		      <li><a href="#" >修改密码</a></li>
		    </ul>
		</div>
	</div>
</body>
</html>

###4.3.4 垂直排列

让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮组</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- btn-group-vertical 垂直按钮组 -->	
	 <div class="btn-group-vertical btn-group-lg" role="group" aria-label="...">
  		<a href="" class="btn btn-primary">按钮1</a>
  		<a href="" class="btn btn-primary">按钮2</a>
  		<a href="" class="btn btn-primary">按钮3</a>
  		<a href="" class="btn btn-primary">按钮4</a>
	</div>
</body>
</html>

4.4 按钮式下拉菜单

4.4.1 基本使用

把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        系统管理<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">登录</a></li>
        <li><a href="#">注册</a></li>
        <li><a href="#">修改面</a></li>
        <li role="separator" class="divider">分割线</li>
        <li><a href="#">aa</a></li>
    </ul>
</div>

4.4.2 输入框组

通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>输入框组</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	 <!-- 输入框组基本使用 -->
	<div class="input-group">
	  <span class="input-group-addon" id="basic-addon1">@</span>
	  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
	</div>
	
	<div class="input-group">
	  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
	  <span class="input-group-addon" id="basic-addon2">@example.com</span>
	</div>
	
	<div class="input-group">
	  <span class="input-group-addon">$</span>
	  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
	  <span class="input-group-addon">.00</span>
	</div>
	
	<label for="basic-url">Your vanity URL</label>
	<div class="input-group">
	  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
	  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
	</div>
</body>
</html>

4.5 导航

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式

4.5.1 标签页（选项卡）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签页</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div id="myTag" style="width:800px;height:200px;border:1px solid pink;border-radius:3px;">
		    <ul id="myTabs" class="nav nav-tabs" >
		      <li class="active"><a href="#lishi" >历史</a></li>
		      <li><a href="#tiyu" id="tiyutab">体育</a></li>
		      <li class="dropdown">
		        <a href="#" id="myTabDrop1"  data-toggle="dropdown" >
		       		 财经
		        <span class="caret"></span></a>
		        <ul class="dropdown-menu">
		          <li><a href="#caijing1">财经1</a></li>
		          <li><a href="#caijing2">财经2</a></li>
		        </ul>
		      </li>
		    </ul>
		    <div id="myTabContent" class="tab-content">
		      <div class="tab-pane fade active in" id="lishi" >
		       	 历史内容
		      </div>
		      <div class="tab-pane fade" id="tiyu" >
		        <p>体育内容</p>
		      </div>
		      <div class="tab-pane fade" id="caijing1">
		        <p>财经1内容</p>
		      </div>
		      <div class="tab-pane fade" id="caijing2" >
		        <p>财经2内容</p>
		      </div>
		    </div>
	   </div>
		<button id="btn">体育</button>
	<script type="text/javascript">
		//1.启动选项卡 方式一
		$("#myTabs a").click(function (e) {
		  e.preventDefault();
		  $(this).tab('show');
		})
		//2.指定显示那个选项卡
		$("#btn").click(function(){
			$("#tiyutab").tab("show");
		});
	</script>
</body>
</html>

事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W7Mye4C6-1682120196388)(imgs\9.png)]

###4.5.2 胶囊式标签页

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签页</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<script src="../bootstrap/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div id="myTag" style="width:800px;height:200px;border:1px solid pink;border-radius:3px;">
		    <ul id="myTabs" class="nav nav-pills" >
		      <li class="active"><a href="#lishi" >历史</a></li>
		      <li><a href="#tiyu" id="tiyutab">体育</a></li>
		      <li class="dropdown">
		        <a href="#" id="myTabDrop1"  data-toggle="dropdown" >
		       		 财经
		        <span class="caret"></span></a>
		        <ul class="dropdown-menu">
		          <li><a href="#caijing1">财经1</a></li>
		          <li><a href="#caijing2">财经2</a></li>
		        </ul>
		      </li>
		    </ul>
		    <div id="myTabContent" class="tab-content">
		      <div class="tab-pane fade active in" id="lishi" >
		       	 历史内容
		      </div>
		      <div class="tab-pane fade" id="tiyu" >
		        <p>体育内容</p>
		      </div>
		      <div class="tab-pane fade" id="caijing1">
		        <p>财经1内容</p>
		      </div>
		      <div class="tab-pane fade" id="caijing2" >
		        <p>财经2内容</p>
		      </div>
		    </div>
	   </div>
		<button id="btn">体育</button>
	<script type="text/javascript">
		//1.启动选项卡 方式一
		$("#myTabs a").click(function (e) {
		  e.preventDefault();
		  $(this).tab('show');
		})
		//2.指定显示那个选项卡
		$("#btn").click(function(){
			$("#tiyutab").tab("show");
		});
	</script>
</body>
</html>

总结：

bootstrap掌握常用的布局与标签样式即可，关于组件的使用通过官方api边使用边学习边复制即可，没必要记住。

五、bootstrap综合案例~权限系统

加菲猫���
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Bootstrap使用
m0_57774967的博客
04-24 5158
一、使用bootstrap步骤： 1.创建文件夹结构 2.创建html骨架结构 3.引入相关样式文件 4.书写内容（直接用bootstrap预先定义好的样式使用 修改bootstrap原来样式，注意权重问题） 要想学好bootstrap的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果 布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预先定义好这个类，叫.container，它提供...
bootstrap-4.6.2
06-13
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和JavaScript插件，用于快速构建响应式和移动优先的网页。标题"bootstrap-4.6.2"表明我们讨论的是Bootstrap框架的第4版中的第6次次要...
阿里亲心小号实测
区块链斜杠青年(爱踢门)
10-17 3103
阿里亲心小号还是挺不错的，阿里果然是运营高手
Bootstrap简介
归兮的博客
08-18 8862
bootstrap是一个基于HTML、CSS和Javascript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件，bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。Bootstrap 4 概览_Bootstrap中文网什么是组件组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象思想来说，将一些符合某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。...
bootstrap的安装
12-05 1767
再vue中用npm安装1)、使用指令 2)、安装成功后，能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容: 至此bootStrap也引入结束，接下来我们的重点来了，因为BootStrap与VUE有一个专门的设计叫做bootstrap-vue.js，所以我们引入它之后就可以直接使用它们提供的专有样式，比原生的bootStrap要好看很多3)、使用指令:4)、在main.js文件中添加:
bootstrap datetimepicker
lishuaigell的博客
05-17 5321
效果预览 我们先来看一下效果 可以看到这款插件的功能很强大，涵盖了十年视图，年视图，月视图，甚至小时视图，分钟视图都有，几乎能够满足大部分人的需要。不仅如此，还有完善的中文文档，方便我们个性化设置噢，我们一起去看看吧！ datetimepicker 官方文档： http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 插件下载地址： https://github.com/smalot/bootstrap-datetimepicker/archiv
bootstrap-4.3.1
06-30
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面： 从 Less 迁移到 Sass 改进网格系统 缺省弹性框支持 Dropped wells, thumbnails, and panels for cards 合并所有 ...
bootstrap旅游网站
02-09
Bootstrap是世界上最流行的前端开发框架之一，尤其在构建响应式、移动优先的网页设计时，它提供了丰富的组件和样式。"Bootstrap旅游网站"项目显然利用了Bootstrap的强大功能来创建一个专门针对旅游业的网站模板。...
bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js
11-12
在"bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js"的标题中，我们可以看到两个关键文件：`bootstrap.min.css`和`bootstrap.bundle.min.js`。`bootstrap.min.css`是Bootstrap的核心CSS文件，经过压缩...
Bootstrap5 图标库 bootstrap-icons
09-30
Bootstrap5图标库bootstrap-icons是前端开发中一个非常实用的资源，它为开发者提供了大量美观、一致的SVG图标，可以方便地集成到Bootstrap5项目中，为网页设计增添丰富的视觉元素。Bootstrap图标库的设计理念是简洁...
一闪一闪图片 css动画
最新发布
有问题可关注公众号：前端研究院 后台输入问题回复
08-14 326
这段代码会使得图片不断地闪烁，闪烁的频率由。决定，即每秒闪烁一次。中的百分比来改变闪烁的强度和速度。
CSS的重绘和重排是什么？
沐爸的博客
08-12 1031
CSS的重绘和重排是什么？它俩有什么区别？如何对重绘和重排进行优化？快来一起看看吧！
前端案例：极速问诊项目（移动端自适应）（HTML+CSS+JS）
li3123537691的博客
08-13 313
一个简单的移动端案例，模拟不同设备下逻辑分辨率不同，宽高自适应正常打开整体布局打开 f12 （ctrl + shift + M）或者点击左上角图标,将其模拟为移动端设备在移动设备iPhone6/7/8，逻辑分辨率375的整体布局其banner图尺寸现在切换设备为iPad，逻辑分辨率为768，此设备下banner图尺寸自适应再切换设备为iPhone 14 Pro Max，逻辑分辨率为430，此设备下banner图尺寸自适应。
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能
qq_42431718的博客
08-13 285
html+css+js网页设计 电商戴欧妮珠宝网3个页面 有轮播图，折叠面板，一键置顶等功能 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
HTML表格、表单、标签、CSS、选择器
2301_80034711的博客
08-11 982
时，会自动聚焦到其绑定的标签。内联样式微辣用户名辣
CSS（层叠样式表）
Chujun123528的博客
08-09 1279
CSS全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页样式的语言。它可以将HTML文档中的内容与样式分离，使得网页的结构和呈现分离，提高了页面的可维护性和可重用性。CSS允许开发者对HTML元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等。
display:flex布局，最简单的案例
有问题可关注公众号：前端研究院 后台输入问题回复
08-12 214
【代码】display:flex布局，最简单的案例。
在vue3中配置scss
iku_n的博客
08-12 335
要在 Vue 3 中使用 SCSS（Sass 的一个子集），你需要安装相应的依赖，并对项目进行一些配置。
html+css+js网页设计 电商模版4个页面
qq_42431718的博客
08-13 301
html+css+js网页设计 电商模版4个页面 带js 网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

加菲猫���

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值