Web前端:Bootstrap最强总结 附详细代码 (带常用案例!)

Web前端基础:

Web前端工具:

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>

效果图

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

评论 36
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值