Web前端：Bootstrap最强总结 附详细代码 （带常用案例！）

最新推荐文章于 2024-09-10 15:03:07 发布
最新推荐文章于 2024-09-10 15:03:07 发布
阅读量1.7w 收藏 291
点赞数 63
分类专栏： # Web前端 文章标签： html java css bootstrap html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55221239/article/details/115374335
版权

Web前端基础：

Web前端工具：

Web前端：Bootstrap最强总结

Bootstrap基础

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的一个用于快速开发 Web 应用程序和网站的前端框架。

Bootstrap 包的内容

  • 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
  • CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
  • 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
  • JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
  • 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

下载

下载地址：Bootstrap中文网

您会看到两个按钮：

  • Download Bootstrap：下载 Bootstrap。点击该按钮，您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
  • Download Source：下载源代码。点击该按钮，您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
    如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。

由于文件是被编译过和压缩过的，在独立的功能开发中，您不必每次都包含这些独立的文件。

文件结构

  • 预编译的 Bootstrap
    当您下载了 Bootstrap 的已编译的版本，解压缩 ZIP 文件，您将看到下面的文件/目录结构：在这里插入图片描述
    如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.），以及已编译压缩的 CSS 和 JS（bootstrap.min.）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题
  • Bootstrap 源代码
  • 如果您下载了 Bootstrap 源代码，那么文件结构将如下所示
    在这里插入图片描述
    less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
    dist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
    docs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档。

以上信息来自Bootstrap中文网

入门及使用

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bootstrap入门与使用</title>
		<!--boostrap的使用：
			1、必须先引入bootstrap的支持 ，包括js、css、font文件
			2、引入的文件必须先有jQuery的核心文件，再引入bootstrap的js文件，再引入自己的文件
			3、css文件必须先引入bootstrap的css文件再引入自己的文件
			4、font文件无需在页面上引入，但是需要在项目的目录中存在
		-->
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<!--导入自己的js文件-->
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrap-theme.css" />
		<!--导入自己的css文件-->
	</head>
	<body>
		<h1>bootstrap使用</h1>
	</body>
</html>

注意：注意导入顺序！！！先导入Bootstrap

Bootstrap CSS部分

按钮

类描述
.btn为按钮添加基本样式
.btn-default默认/标准按钮
.btn-primary原始按钮样式（未被操作）
.btn-success表示成功的动作
.btn-info该样式可用于要弹出信息的按钮
.btn-warning表示需要谨慎操作的按钮
.btn-danger表示一个危险动作的按钮操作
.btn-link让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg制作一个大按钮
.btn-sm制作一个小按钮
.btn-xs制作一个超小按钮
.btn-block块级按钮(拉伸至父元素100%的宽度)
.active按钮被点击
.disabled禁用按钮

按钮实例

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Bootstrap 按钮</title>		
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<!--任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。
			但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：
			以下样式可用于<a>, <button>, 或 <input> 元素上：
		-->
		<h1>不同样式的按钮</h1>
		<button type="button" class="btn btn-default">标准按钮</button>
		<button type="button" class="btn btn-primary">原始按钮</button>
		<button type="button" class="btn btn-success">成功按钮</button>
		<button type="button" class="btn btn-info">信息按钮</button>
		<button type="button" class="btn btn-warning">警告按钮</button>
		<button type="button" class="btn btn-danger">危险按钮</button>
		<button type="button" class="btn btn-link">链接按钮</button>
		<h1>大小不同的按钮</h1>
		<button type="button" class="btn btn-info btn-xs">xs按钮</button>
		<button type="button" class="btn btn-success btn-sm">sm按钮</button>
		<button type="button" class="btn btn-danger btn-lg">lg按钮</button>
		<button type="button" class="btn btn-warning btn-block">block按钮</button>
		<h1>不同状态的按钮</h1>
		<button type="button" class="btn btn-default">标准按钮</button>
		<button type="button" class="btn btn-default active">标准激活按钮按钮</button>
		<button type="button" class="btn btn-primary">原始按钮</button>
		<button type="button" class="btn btn-primary active">原始激活按钮</button>
		
		<button type="button" class="btn btn-default">标准按钮</button>
		<button type="button" class="btn btn-default disabled">标准禁用按钮按钮</button>
		<button type="button" class="btn btn-primary">原始按钮</button>
		<button type="button" class="btn btn-primary disabled">原始禁用按钮</button>
	
		<input type="button" class="btn btn-info" value="input按钮"/>
		<a href="01-bootstrap-入门与使用.html" class="btn btn-info" >a链接</a>
	</body>
</html>

效果图
在这里插入图片描述

表格

Bootstrap 提供了一个清晰的创建表格的布局

Bootstrap 支持的表格元素

标签描述
< table>为表格添加基础样式
< thead>表格标题行的容器元素（< tr>），用来标识表格列
< tbody>表格主体中的表格行的容器元素（< tr>
< tr>一组出现在单行上的表格单元格的容器元素（< td> 或 < th>）
< td>默认的表格单元格
< th>特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 < thead> 内使用
< caption>关于表格存储内容的描述或总结

表格类

下表样式可用于表格中：

标签描述
.table为任意 < table> 添加基本样式 (只有横向分隔线)
.table-striped在 < tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered为所有表格的单元格添加边框
.table-hover在 < tbody> 内的任一行启用鼠标悬停状态
.table-condensed让表格更加紧凑

< tr>, < th> 和 < td> 类
下表的类可用于表格的行或者单元格

类描述
.active将悬停的颜色应用在行或者单元格上
.success表示成功的操作
.info表示信息变化的操作
.warning表示一个警告的操作
.danger表示一个危险的操作

实例

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bootstrap表格</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<div class="table-responsive">
		<table class="table table-bordered table-striped table-hover table-condensed">
			<tr class="danger">
				<th>序号</th><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>总计</th><th>操作</th>
			</tr>
			<tr>
				<td class="warning">1</td>
				<td class="info">【明治夹心饼干】明治(Meiji) 小熊饼干 草莓夹心 15分钟可以摇成球 新加坡进口 网红儿童零食50g_10盒办公室下午茶点心</td>
				<td class="active">￥129.8</td>
				<td class="success">1</td>
				<td>￥129.8</td>
				<td><button type="button">删除</button></td>
			</tr>
			<tr>
				<td>2</td>
				<td>【明治夹心饼干】明治(Meiji) 小熊饼干 草莓夹心 15分钟可以摇成球 新加坡进口 网红儿童零食50g_10盒办公室下午茶点心</td>
				<td>￥129.8</td>
				<td>1</td>
				<td>￥129.8</td>
				<td><button type="button">删除</button></td>
			</tr>
			<tr>
				<td>3</td>
				<td>【明治夹心饼干】明治(Meiji) 小熊饼干 草莓夹心 15分钟可以摇成球 新加坡进口 网红儿童零食50g_10盒办公室下午茶点心</td>
				<td>￥129.8</td>
				<td>1</td>
				<td>￥129.8</td>
				<td><button type="button">删除</button></td>
			</tr>
		</table>
		</div>
	</body>
</html>

效果图
在这里插入图片描述

表单

Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单

表单布局类型：

  • 垂直表单（默认）
  • 内联表单
  • 水平表单

垂直或基本表单

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

  1. 向父 < form> 元素添加 role=“form”
  2. 把标签和控件放在一个带有 class .form-group 的 < div> 中。这是获取最佳间距所必需的
  3. 向所有的文本元素 < input>、< textarea> 和 < select> 添加 class .form-control
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 基本表单</title>
  	<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
	<script type="text/javascript" src="js/bootstrap.js" ></script>
	<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
 
<form role="form">
   <div class="form-group">
      <label for="name">名称</label>
      <input type="text" class="form-control" id="name" 
         placeholder="请输入名称">
   </div>
   <div class="form-group">
      <label for="inputfile">文件输入</label>
      <input type="file" id="inputfile">
      <p class="help-block">这里是块级帮助文本的实例。</p>
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> 请打勾
      </label>
   </div>
   <button type="submit" class="btn btn-default">提交</button>
</form>
 
</body>
</html>

效果图：
在这里插入图片描述

内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 标签添加 class .form-inline。

实例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例 - 内联表单</title>
 	<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
	<script type="text/javascript" src="js/bootstrap.js" ></script>
	<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
 
<form class="form-inline" role="form">
   <div class="form-group">
      <label class="sr-only" for="name">名称</label>
      <input type="text" class="form-control" id="name" 
         placeholder="请输入名称">
   </div>
   <div class="form-group">
      <label class="sr-only" for="inputfile">文件输入</label>
      <input type="file" id="inputfile">
   </div>
   <div class="checkbox">
      <label>
      <input type="checkbox"> 请打勾
      </label>
   </div>
   <button type="submit" class="btn btn-default">提交</button>
</form>
 
</body>
</html>

效果图：
在这里插入图片描述

水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

  • 向父 < form> 元素添加 class .form-horizontal
  • 把标签和控件放在一个带有 class .form-group 的 < div> 中
  • 向标签添加 class .control-label
<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 水平表单</title>
   <script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
	<script type="text/javascript" src="js/bootstrap.js" ></script>
	<link rel="stylesheet" href="css/bootstrap.css" />
</head>
<body>
 
<form class="form-horizontal" role="form">
   <div class="form-group">
      <label for="firstname" class="col-sm-2 control-label">名字</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="firstname" 
            placeholder="请输入名字">
      </div>
   </div>
   <div class="form-group">
      <label for="lastname" class="col-sm-2 control-label">姓</label>
      <div class="col-sm-10">
         <input type="text" class="form-control" id="lastname" 
            placeholder="请输入姓">
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <div class="checkbox">
            <label>
               <input type="checkbox"> 请记住我
            </label>
         </div>
      </div>
   </div>
   <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
         <button type="submit" class="btn btn-default">登录</button>
      </div>
   </div>
</form>
 
</body>
</html>

效果图
在这里插入图片描述

综合案例

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bootstrap表单</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<form role="form" class="form-horizontal">
			<div class="form-group">
				<label for="name">用户名</label>
				<input class="form-control" name="name" />
			</div>
			<div class="form-group">
				<label for="name">密码</label>
				<input class="form-control" type="password" name="name" />
			</div>
		</form>
		<form role="form" class="form-horizontal">
			<div class="form-group has-success">
				<label for="name" class="col-lg-2 control-label">用户名</label>
				<div class="col-lg-7">
					<input class="form-control" name="name" />
				</div>
			</div>
			<div class="form-group has-warning">
				<label for="name" class="col-lg-2 control-label">密码</label>
				<div class="col-lg-7">
					<input class="form-control" type="password" name="name" />
				</div>
			</div>
			<div class="form-group has-error">
				<label for="name" class="col-lg-2 control-label">协议</label>
				<div class="col-lg-7">
					<textarea class="form-control" rows="4" ></textarea>
				</div>
			</div>
			<div class="form-group">
				<label for="name" class="col-lg-2 control-label">爱好</label>
				<div class="col-lg-7">
					<label class="checkbox-inline">
						<input type="checkbox" name="hobby" value="0"  />NBA
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" name="hobby" value="10"  />book
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" name="hobby" value="20"  />swim
					</label>
				</div>
			</div>
			<div class="form-group">
				<label for="name" class="col-lg-2 control-label">下拉列表</label>
				<div class="col-lg-7">
					<select class="form-control">
						<option value="1">请选择</option>
					</select>
				</div>
			</div>
		</form>
		<hr>
		<form role="form" class="form-inline">
			<div class="form-group">
				<label for="name">用户名</label>
				<input class="form-control" name="name" />
			</div>
			<div class="form-group">
				<label for="name">密码</label>
				<input class="form-control" type="password" name="name" />
			</div>
		</form>
	</body>
</html>

效果图
在这里插入图片描述

图片

Bootstrap 提供了三个可对图片应用简单样式的 class：

  • .img-rounded：添加 border-radius:6px 来获得图片圆角
  • .img-circle：添加 border-radius:500px 来让整个图片变成圆形
  • .img-thumbnail：添加一些内边距（padding）和一个灰色的边框

实例

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bootstrap图片</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/mycss.css" />
		<!--<style>
			.img-thumbnail {
			  padding: 14px;
			  border: solid red 1px;
			}
		</style>-->
	</head>
	<body>
		<img class="img-circle" src="img/cat.jpg" title="服不服？" />
		<img class="img-rounded" src="img/cat.jpg" title="服不服？" />
		<img class="img-thumbnail" src="img/cat.jpg" title="服不服？" />
		
		<img class="img-responsive" src="img/cat2.jpg" title="服不服？" />
	</body>
</html>

效果图
在这里插入图片描述

网格系统

什么是网格

在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。

什么是网格系统

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类

基本的网格结构

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

偏移列

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

实例：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 偏移列</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
 
   <h1>Hello, world!</h1>
 
   <div class="row" >
      <div class="col-xs-6 col-md-offset-3" 
         style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
         </p>
      </div>
 
   </div>
</div>
 
</body>
</html>

效果图：
在这里插入图片描述

嵌套列

为了在内容中嵌套默认的网格，请添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

在下面的实例中，布局有两个列，第二列被分为两行四个盒子。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 嵌套列</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
 
   <h1>Hello, world!</h1>
 
   <div class="row">
 
      <div class="col-md-3" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第一列</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
 
      <div class="col-md-9" style="background-color: #dedef8;box-shadow: 
         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <h4>第二列 - 分为四个盒子</h4>
         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Consectetur art party Tonx culpa semiotics. Pinterest 
                  assumenda minim organic quis.
               </p>
            </div>
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p> sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.
               </p>
            </div>
         </div>
 
         <div class="row">
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat.
               </p>
            </div>   
            <div class="col-md-6" style="background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
         </div>
 
      </div>
 
   </div>
 
</div>
 
</body>
</html>

效果图：
在这里插入图片描述

列排序

Bootstrap 网格系统另一个完美的特性，就是您可以很容易地以一种顺序编写列，然后以另一种顺序显示列。

您可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

在下面的实例中，我们有两列布局，左列很窄，作为侧边栏。我们将使用 .col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 列排序</title>
   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
   <script src="/scripts/jquery.min.js"></script>
   <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
 
   <h1>Hello, world!</h1>
 
   <div class="row">
      <p>排序前</p>
      <div class="col-md-4" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8" style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div><br>
   <div class="row">
      <p>排序后</p>
      <div class="col-md-4 col-md-push-8" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8 col-md-pull-4" 
         style="background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, 
         inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div>
 
</div>
 
</body>
</html>

效果图：

在这里插入图片描述

辅助类

文本

在这里插入图片描述

背景

在这里插入图片描述

其他

类描述
.pull-left元素浮动到左边
.pull-right元素浮动到右边
.center-block设置元素为 display:block 并居中显示
.clearfix清除浮动
.show强制元素显示
.hidden强制元素隐藏
.sr-only除了屏幕阅读器外，其他设备上隐藏元素
.sr-only-focusable与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)
.text-hide将页面元素所包含的文本内容替换为背景图
.close显示关闭按钮
.caret显示下拉式功能

其他辅助类实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bootstrap辅助类</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<style>
			p{
				padding: 30px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<p class="text-danger bg-primary pull-left">段落</p>
			<p class="text-info bg-success pull-right">段落</p>
			<div class="clearfix"></div>
			<a href="#" class="text-danger bg-info center-block">超链接</a>
			<a href="#" class="text-warning bg-success center-block">超链接</a>
			
			<p>关闭图标实例
				<button type="button" class="close" aria-hidden="true">&times;</button>
			</p>
		</div>
	</body>
</html>

效果图

在这里插入图片描述

布局组件

导航栏

导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>导航栏</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<div class="container">
			
			<nav class="nav navbar-default">
				<div class="navbar-header">
					<a href="#" class="navbar-brand">BudingCode</a>
				</div>
				<div>
					<ul class="nav navbar-nav">
						<li class="active"><a href="">JSVASE</a></li>
						<li class="dropdown">
							<a href="" class="dropdown-toggle" data-toggle="dropdown" >WEB<b class="caret"></b></a>
							<ul class="dropdown-menu">
								<li><a href="">MYSQL</a></li>
								<li><a href="">MYSQL</a></li>
								<li><a href="">MYSQL</a></li>
								<li><a href="">MYSQL</a></li>
							</ul>
						</li>
						<li><a href="">MYSQL</a></li>
					</ul>
				</div>
			</nav>
			
		</div>
	</body>
</html>

效果图
在这里插入图片描述

警告框

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>警告框</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<div class="container">
			<div class="alert alert-success">
				<a href="" class="alert-link">success</a>
			</div>
			<div class="alert alert-info">info</div>
			<div class="alert alert-warning">warning</div>
			<div class="alert alert-danger">danger</div>
			
			<div class="alert alert-danger alert-dismissable">danger
				<button class="close" type="button" data-dismiss="alert">
					&times;
				</button>
			</div>
		</div>
	</body>
</html>

效果图
在这里插入图片描述

进度条

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>警告框</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<div class="container">
			<div class="alert alert-success">
				<a href="" class="alert-link">success</a>
			</div>
			<div class="alert alert-info">info</div>
			<div class="alert alert-warning">warning</div>
			<div class="alert alert-danger">danger</div>
			
			<div class="alert alert-danger alert-dismissable">danger
				<button class="close" type="button" data-dismiss="alert">
					&times;
				</button>
			</div>
		</div>
	</body>
</html>

效果图
在这里插入图片描述

分页

分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分页</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<div class="container">
			<ul class="pagination">
				<li class="disabled"><a href="">上一页</a></li>
				<li class="active"><a href="">1</a></li>
				<li><a href="">2</a></li>
				<li><a href="">3</a></li>
				<li><a href="">4</a></li>
				<li><a href="">下一页</a></li>
			</ul><br />
			<ul class="pagination pagination-sm">
				<li class="disabled"><a href="">上一页</a></li>
				<li class="active"><a href="">1</a></li>
				<li><a href="">2</a></li>
				<li><a href="">3</a></li>
				<li><a href="">4</a></li>
				<li ><a href="">下一页</a></li>
			</ul><br />
			<ul class="pagination pagination-lg">
				<li class="disabled"><a href="">上一页</a></li>
				<li class="active"><a href="">1</a></li>
				<li><a href="">2</a></li>
				<li><a href="">3</a></li>
				<li><a href="">4</a></li>
				<li><a href="">下一页</a></li>
			</ul><br />
			<ul class="pager">
				<li class="previous"><a href="">Previous</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 class="next"><a href="">next</a></li>
			</ul><br />
		</div>
	</body>
</html>

效果图

在这里插入图片描述

字体图标

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体图标</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<div class="container">
			<span class="glyphicon glyphicon-search"></span> search
			<span class="glyphicon glyphicon-home"></span> home
			<span class="glyphicon glyphicon-file"></span> file
			<span class="glyphicon glyphicon-film"></span> film
			<span class="glyphicon glyphicon-trash"></span> trash
			<button type="button" class="btn btn-danger">
				<span class="glyphicon glyphicon-plus"></span> plus
 			</button>
			
			<button type="button" class="btn btn-danger">
				<span class="glyphicon glyphicon-user"></span> 用户
			</button>
		</div>
	</body>
</html>

效果图
在这里插入图片描述

轮播图

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script>
			$(function(){
				$("#myCarousel").carousel({
					interval:1500
				});
			});s
		</script>
	</head>
	<body>
		<div id="myCarousel" class="carousel slide">
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<div class="item active">
					<img src="img/pic1.jpg"  title="第1张图"/>
					<div class="carousel-caption">第1张图</div>
				</div>
				<div class="item">
					<img src="img/pic2.jpg"  title="第2张图"/>
					<div class="carousel-caption">第2张图</div>
				</div>
				<div class="item">
					<img src="img/pic3.jpg"  title="第3张图"/>
					<div class="carousel-caption">第3张图</div>
				</div>
			</div>
			<a href="#myCarousel" class="carousel-control left" data-slide="prev">&lt;</a>
			<a href="#myCarousel" class="carousel-control right" data-slide="next">&gt;</a>
		</div>
	</body>
</html>

效果（自动）
在这里插入图片描述

在这里插入图片描述

模拟对话框

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播图</title>
		<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<!--触发模态对话框的按钮-->
		<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">
			添加学生信息
		</button>
		<!--模态对话框-->
		<div id="myModal" class="modal fade">
			<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">添加学生信息</h4>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" role="form">
							<div class="form-group">
								<label for="stuId" class="col-sm-2 control-label">学号：</label>
								<div class="col-sm-10">
									<input name="stuId" class="form-control" />
								</div>
							</div>
							<div class="form-group">
								<label for="stuName" class="col-sm-2 control-label">姓名：</label>
								<div class="col-sm-10">
									<input name="stuName" class="form-control" />
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-info" data-dismiss="modal">提交</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

效果图

初始界面
在这里插入图片描述
点击添加
在这里插入图片描述

bootstrap框架实例
chengqianduan的博客
05-01 1346
html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> link rel="stylesheet" href="../BootStrap/day1/bootstrap/bootstrap-3.3.5-dist/css/bootstrap.css"/> meta name="viewpor
消息中间件之二：kafka详解
企业实战系列集 ●●● https://ximenjianxue.blog.csdn.net
09-02 714
概述 Kafka是一种分布式的，基于发布/订阅的消息系统。 整理中……
Bootstrap期末课程设计
03-09
资源名称：Bootstrap期末课程设计 内容使用语言：HTML5+css3+js+bootstrap框架 使用/学习场景：完成整个学期成果，了解框架的好处 应用场景：对于使用框架对于完成一个网页的实现更加容易 特点：加深对前端语言的应用（HTML，css, js） 适用人群：想短时间内完成Bootstrap的初学者 使用/学习说明：在学习的过程中，体会框架对于设计整个网页的好处，在实践中进步
【前端开发】bootstrap框架综合案例（2）
`雾博客
06-17 624
<!DOCTYPE html> <html> <head> <title>Bootstrap 4</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.mi
Bootstrap框架示例文件实战解析
最新发布
weixin_36382073的博客
09-10 1588
本文还有配套的精品资源，点击获取 简介：Bootstrap是一个为快速开发响应式、移动优先网站而设计的前端开发框架。它提供丰富的组件和样式，借助示例文件集（包含HTML、CSS和JavaScript代码），本课程旨在深入讲解Bootstrap的核心特性，包括响应式布局、预定义组件、自定义样式、JavaScript插件、栅格系统和可访问性等。学员将学习如何通过这些示例文件，加...
bootstrap框架实例大全
10-16
包含bootstrap完整的组件参考实例,让你的网页开发更快速!
BootStrap项目案例
12-21
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的css前端框架，这是一个示例
【前端开发】bootstrap框架综合案例（5）
`雾博客
06-17 1026
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 导入css文件夹中bootstrap.min.css基础样式文件 --> <link rel="stylesheet" type="text/
使用Bootstrap框架写的一个小实例
m0_49499183的博客
07-09 915
今天学习了一下Bootstrap框架，，写一个小实例练练手，感受一下bootstrap兼容三端的强大。 <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt
Bootstrap框架：代码
weixin_43731793的博客
07-27 529
** ** ** ** **
附答案 | 最强Python面试题之机器学习篇
AudiA6LV6的博客
09-23 1177
机器学习简单的说，机器学习就是让机器从数据中学习，进而得到一个更加符合现实规律的模型，通过对模型的使用使得机器比以往表现的更好，这就是机器学习。数据：从现实生活抽象出来的一些事物或者规律的特征进行数字化得到。学习：在数据的基础上让机器重复执行一套特定的步骤（学习算法）进行事物特征的萃取，得到一个更加逼近于现实的描述（这个描述是一个模型它的本身可能就是一个函数）。我们把大概能够描述现实的这个函数称作我们学到的模型。更好：我们通过对模型的使用就能更好的解释世界，解决与模型相关的问题。机器学习机器学习。
Bootstrap实例工程
01-26
本工程为Bootstrap实例，实例详解请访问博主博客：http://blog.csdn.net/u013142781
Bootstrap完整案例
12-04
里面包含Bootstrap示例----树形菜单，项目用表及初始化数据,Bootstrap技术文档.docx,各大组件的压缩包,测试数据,以及源码
bootstrap框架开发源码
09-04
bootstrap框架开发源码，完整框架体系，明确的开发注解，适合初学者快速入门
10分钟，小白也能用Django做个小App！
cainiao_python的博客
10-13 2827
Python里面最强大的web开发框架非Django莫属，当然很多老鸟会跳出来说Flask也是很牛逼的，还有一些高手会喷你说前两个都是菜鸡，天下武功唯快不破fastapi框架才是最强大。关...
遇见OFFER，阿里云最强技术团队现身招聘，“职”为你来
热门推荐
遇见OFFER
05-28 6万+
最近还在找工作吗？我们又来放送招聘信息啦！快来看看吧~
网址备忘录
sinat_35444807的博客
10-31 1188
Bookmarks 前端学习 HTML canvas three.js Noise - value - 2D (1条消息) three.js script vertex和fragment在react中使用/纯js写法_草宝虫的博客-CSDN博客 texture = new THREE.TextureLoader().load()引入纹理，图片应该放在vue脚手架中的哪块 - SegmentFault 思否 Three.js – JavaScript 3D Library 前
Bootstrap响应式项目实践1
qq_56180999的博客
06-03 3195
Bootstrap响应式项目实践1 文章目录Bootstrap响应式项目实践1一、成果展示二、代码三、代码基于四、遇到的问题和解决1.导航条固定后网页其他内容上移（被导航条遮住）2.窗口缩小时导航条内容溢出（排版错乱）3.发现自己的网页大小不适应视口大小4.因内容多少不一致，导致缩略图高度不一致5.标题（.title）字体大小不变，影响响应式布局 一、成果展示 二、代码 <!doctype html> <html lang="zh-CN"> <head>
BootStrap前端框架 入门加案例
Zz_cheng的博客
05-02 532
BootStrap前端框架 为所有开发者、所有应用场景而设计。 Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。 官网 Bootstrap中文网3 （当前版本 v3.3.7） 前言 是一套现成的css样式集合，是两个推特员工完成的，可以快速地出一个网页 一、BootStrap特点？ 简洁、直观、强悍的前端开发框架，html css js工具集，让web开发更加的快速和简单 响应式设计、卓越的兼容性、12列网格、样式向导文档 丰富的组件 二、下载与使
web前端使用bootstrap制作水平表单
06-03
好的，下面是一个使用Bootstrap制作水平表单的示例代码： ```html <form> <div class="form-group row"> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group row"> <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group row"> <div class="col-sm-10 offset-sm-2"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </div> </form> ``` 上面的代码中，使用了Bootstrap的CSS类实现了一个水平表单。其中，`.form-group`类定义了一个表单元素组，`.row`类定义了一个行，`.col-sm-*`类定义了列的宽度。 需要注意的是，以上代码中的样式需要引入Bootstrap的CSS文件和JS文件才能正常显示。
评论 36
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值