旺财速啃H5框架之Bootstrap（六）

年后太忙，一直没有更新

好，这篇结束，速啃嘛，就应该拿重点，实用点。继续之前的内容，接着来讲讲网页中常用的布局组件与插件，我喜欢用简单的直接的话或案例来说明，就是针对那些想快速能做出点东西的人而准备的。。。

好，走起。。。。

一、下拉菜单（Dropdowns）

下拉功能在网站是经常见到的，用CSS能写出简单的下拉效果，事件型的CSS就写不出来了，那么用bootstrap就能很快的帮你搞定，如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可，

看案例：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 下拉菜单（Dropdowns）</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="dropdown">

   <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"

      data-toggle="dropdown">

      主题

      <span class="caret"></span>

   </button>

   <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

      <li role="presentation">

         <a role="menuitem" tabindex="-1" href="#">Java</a>

      </li>

      <li role="presentation">

         <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>

      </li>

      <li role="presentation">

         <a role="menuitem" tabindex="-1" href="#">

            数据通信/网络

         </a>

      </li>

      <li role="presentation" class="divider"></li>

      <li role="presentation">

         <a role="menuitem" tabindex="-1" href="#">分离的链接</a>

      </li>

   </ul>

</div>

</body>

</html>

查询效果：《猛点这里》

通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单《猛点这里》

有时会有类似按钮下拉的情况，做按钮下拉也很简单，看案例：

<!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="btn-group">

   <button type="button" class="btn btn-default dropdown-toggle"

      data-toggle="dropdown">

      默认 <span class="caret"></span>

   </button>

   <ul class="dropdown-menu" role="menu">

      <li><a href="#">功能</a></li>

      <li><a href="#">另一个功能</a></li>

      <li><a href="#">其他</a></li>

      <li class="divider"></li>

      <li><a href="#">分离的链接</a></li>

   </ul>

</div>

<div class="btn-group">

   <button type="button" class="btn btn-primary dropdown-toggle"

      data-toggle="dropdown">

      原始 <span class="caret"></span>

   </button>

   <ul class="dropdown-menu" role="menu">

      <li><a href="#">功能</a></li>

      <li><a href="#">另一个功能</a></li>

      <li><a href="#">其他</a></li>

      <li class="divider"></li>

      <li><a href="#">分离的链接</a></li>

   </ul>

</div>

</body>

</html>

只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可

查询效果：《猛点这里》

二、输入框

您可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮

下面是一个基本的输入框组：

<!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 style="padding: 100px 100px 10px;">

   <form class="bs-example bs-example-form" role="form">

      <div class="input-group">

         <span class="input-group-addon">@</span>

         <input type="text" class="form-control" placeholder="twitterhandle">

      </div>

      <br>

      <div class="input-group">

         <input type="text" class="form-control">

         <span class="input-group-addon">.00</span>

      </div>

      <br>

      <div class="input-group">

         <span class="input-group-addon">$</span>

         <input type="text" class="form-control">

         <span class="input-group-addon">.00</span>

      </div>

   </form>

</div>

</body>

</html>

查询效果：《猛点这里》

更多输入框请查看这里：http://noob.d8jd.com/noob/5/121.html

三、分页

分页基本在每个网站都有，那么这里给你提供了快速分页的封装。

直接看案例：

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

<ul class="pagination">

  <li><a href="#">&laquo;</a></li>

  <li><a href="#">1</a></li>

  <li><a href="#">2</a></li>

  <li><a href="#">3</a></li>

  <li><a href="#">4</a></li>

  <li><a href="#">5</a></li>

  <li><a href="#">&raquo;</a></li>

</ul>

</body>

</html>

查询效果：《猛点这里》

分页时的其它状态如下：

分页的状态效果

默认的翻页效果

翻页的状态效果

四、图片轮播

幻灯片是页面大气不可或缺的元素，用bootstrap来完成也很简单:

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 简单的轮播（Carousel）插件</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 id="myCarousel" class="carousel slide">

   <!-- 轮播（Carousel）指标 -->

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

   <!-- 轮播（Carousel）项目 -->

   <div class="carousel-inner">

      <div class="item active">

         <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">

      </div>

      <div class="item">

         <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">

      </div>

      <div class="item">

         <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">

      </div>

   </div>

   <!-- 轮播（Carousel）导航 -->

   <a class="carousel-control left" href="#myCarousel"

      data-slide="prev">&lsaquo;</a>

   <a class="carousel-control right" href="#myCarousel"

      data-slide="next">&rsaquo;</a>

</div> 

</body>

</html>

查询效果：《猛点这里》

更多幻灯片的设置请看这里：http://noob.d8jd.com/noob/5/148.html

五、弹出框

看效果图

旺财速啃H5框架之Bootstrap（六）

不用说，你肯定会用得上的，看怎么弄：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 实例 - 弹出框（Popover）插件</title>

<link rel="stylesheet" href="http://static.d8jd.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container" style="padding: 100px 50px 10px;" >

<button type="button" class="btn btn-default" title="Popover title"

data-container="body" data-toggle="popover" data-placement="left"

data-content="左侧的 Popover 中的一些内容">

左侧的 Popover

</button>

<button type="button" class="btn btn-primary" title="Popover title"

data-container="body" data-toggle="popover" data-placement="top"

data-content="顶部的 Popover 中的一些内容">

顶部的 Popover

</button>

<button type="button" class="btn btn-success" title="Popover title"

data-container="body" data-toggle="popover" data-placement="bottom"

data-content="底部的 Popover 中的一些内容">

底部的 Popover

</button>

<button type="button" class="btn btn-warning" title="Popover title"

data-container="body" data-toggle="popover" data-placement="right"

data-content="右侧的 Popover 中的一些内容">

右侧的 Popover

</button>

</div>

<script>

$(function () {

$("[data-toggle='popover']").popover();

});

</script>

</body>

</html>

查询效果：《猛点这里》

更多幻灯片的设置请看这里：http://noob.d8jd.com/noob/5/144.html

六、提示框

看效果

旺财速啃H5框架之Bootstrap（六）

是不是经常用到呢

看案例：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 实例 - 工具提示（Tooltip）插件</title>

<link rel="stylesheet" href="http://static.d8jd.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>

<body>

<h4>工具提示（Tooltip）插件 - 锚</h4>

这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" title="默认的 Tooltip">默认的 Tooltip</a>.

这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip</a>.

这是一个 <a href="#" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip</a>.

这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip</a>.

这是一个 <a href="#" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</a>

<br>

<h4>工具提示（Tooltip）插件 - 按钮</h4>

<button type="button" class="btn btn-default" data-toggle="tooltip"  title="默认的 Tooltip"> 默认的 Tooltip</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的 Tooltip">左侧的 Tooltip

</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="顶部的 Tooltip">顶部的 Tooltip

</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的 Tooltip">底部的 Tooltip

</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的 Tooltip">右侧的 Tooltip</button>

<script>

$(function () { $("[data-toggle='tooltip']").tooltip(); });

</script>

</body>

</html>

查询效果：《猛点这里》

更多幻灯片的设置请看这里：http://noob.d8jd.com/noob/5/143.html

七、滑动门效果

看效果

旺财速啃H5框架之Bootstrap（六）

案例源码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 实例 - 标签页（Tab）插件事件</title>

<link rel="stylesheet" href="http://static.d8jd.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>

<body>

<hr>

<p class="active-tab"><strong>激活的标签页</strong>：<span></span></p>

<p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>

<hr>

<ul id="myTab" class="nav nav-tabs">

<li class="active"><a href="#home" data-toggle="tab">

d8jd Home</a></li>

<li><a href="#ios" data-toggle="tab">iOS</a></li>

<li class="dropdown">

<a href="#" id="myTabDrop1" class="dropdown-toggle"

  data-toggle="dropdown">

Java <b class="caret"></b></a>

<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">

<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>

<li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li>

</ul>

</li>

</ul>

<div id="myTabContent" class="tab-content">

<div class="tab-pane fade in active" id="home">

<p>W3Cschoool教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>

</div>

<div class="tab-pane fade" id="ios">

<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple

TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>

</div>

<div class="tab-pane fade" id="jmeter">

<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>

</div>

<div class="tab-pane fade" id="ejb">

<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。

</p>

</div>

</div>

<script>

$(function(){

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

// 获取已激活的标签页的名称

var activeTab = $(e.target).text();

// 获取前一个激活的标签页的名称

var previousTab = $(e.relatedTarget).text();

$(".active-tab span").html(activeTab);

$(".previous-tab span").html(previousTab);

});

});

</script>

</body>

</html>

查询效果：《猛点这里》

八、模态框

点击弹出一个层，看效果

旺财速啃H5框架之Bootstrap（六）

案例源码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Bootstrap 实例 - 模态框（Modal）插件方法</title>

<link rel="stylesheet" href="http://static.d8jd.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</head>

<body>

<h2>模态框（Modal）插件方法</h2>

<!-- 按钮触发模态框 -->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

开始演示模态框

</button>

<!-- 模态框（Modal） -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal"

aria-hidden="true">×

</button>

<h4 class="modal-title" id="myModalLabel">

模态框（Modal）标题

</h4>

</div>

<div class="modal-body">

按下 ESC 按钮退出。

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default"

data-dismiss="modal">关闭

</button>

<button type="button" class="btn btn-primary">

提交更改

</button>

</div>

</div><!-- /.modal-content -->

</div><!-- /.modal-dialog -->

</div><!-- /.modal -->

<script>

$(function () { $('#myModal').modal({

keyboard: true

})});

</script>

</body>

</html>

查询效果：《猛点这里》

这种网页也是经常用到的哦

OK，网页经常用到的效果差不多这些，差不多介绍完了，不知道你能不能把这些融入到网页中。

其实bootstrap仅仅只是把某些CSS封装好，你按钮他的要求写，可以说对懒人有用的东西，当然最主要的是他考虑了不同的设备，如果你有时间，JS也OK的，你也可以写出这样的来，至少适应不同的设备，只是花点时间而已。欢迎大家留言交流，这就是一个多年搞后台的人对bootstrap的理解程度，高手指教。。。回头有空，我用bootstrap写一套完整的网页出来，附加详细注释。不喜勿喷。

旺财速啃H5框架之Bootstrap（六）的更多相关文章

旺财速啃H5框架之Bootstrap（五）
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
旺财速啃H5框架之Bootstrap（四）
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
旺财速啃H5框架之Bootstrap（三）
好多天没有写了,继续走起在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
旺财速啃H5框架之Bootstrap（一）
接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...
旺财速啃H5框架之Bootstrap（二）
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续上一篇的已经把bootstrap了解个大概了,接 ...
H5框架之Bootstrap（二）
H5框架之Bootstrap(二) 突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续上一篇的已经 ...
H5框架之Bootstrap（一）
H5框架之Bootstrap(一) 接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了 ...
关于H5框架之Bootstrap的小知识
浏览器支持旧的浏览器可能无法很好的支持 Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器 CSS源码研究我们不是在head里面引入了下面这些文件么 &l ...
关于web开发前端h5框架的选择
关于web开发前端h5框架的选择看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...

随机推荐

Git 遇到了 early EOF index-pack failed 问题
Git 遇到了 early EOF index-pack failed 问题今天想 clone 一下 boost 在 github 的 repo,结果在 clone 的过程中遇到了下面的错误.我原本 ...
&commat;JoinColumn
@OneToOne注释只能确定实体与实体的关系是一对一的关系,不能指定数据库表中的保存的关联字段.所以此时要结合@JoinColumn标记来指定保存实体关系的配置. @JoinColumn与本书上一章 ...
C语言程序设计现代方法&lowbar;基本类型(第七章)
C语言支持两种不同的数值类型,整数类型,浮点类型. C语言的整数类型有不同的尺寸.int类型通常为32位,但在老的CPU上可能是16位.有些可能是64位. 因此,int型如果在16位CPU上最大值就是 ...
MySql5&period;6 Window超详细安装教程
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 目录一.安装包准备二.开始安装三.验证安装四.客户端工具一.安装包准备 1.下载MySql ...
64位SqlServer通过链接服务器与32位oracle通讯
在SQL SERVER里只安装了32位的oracle客户端的情况下,添加链接服务器然后执行查询会报如下信息: 原因:在64位的SQL Engine中已经不提供MSDAORA 的驱动了,可以使用Ora ...
HTML5入门总结 HTML5API
w3cshools MDN英文 MDN中文 HTML5 HTML5 is the latest evolution of the standard that defines HTML. The t ...
jQuery+Ajax+PHP实现异步分页数据显示
这几天做毕业设计的时候需要使用到一个异步分页的功能,即翻页的时候只是刷新分页的数据而不是刷新整个页面.因为之前做项目的时候没有做过这方面的功能,所以还是纠结了挺长时间的,在网上也找了很多资料,结合自己 ...
结合之前看的一些东西，阅读RockMQ实战与原理解析笔记
Topic有多个message queue,消息可以并行的向各个message queue发送,消费者也可以并行的从多个message queue读取消息并消费 clustering模式消费一个top ...
MyBatis学习资料
中文文档:http://www.mybatis.org/mybatis-3/zh/index.html http://blog.csdn.net/neosmith/article/details/61 ...
B树，B+树，红黑树应用场景AVL树，红黑树，B树，B+树，Trie树
B B+运用在file system database这类持续存储结构,同样能保持lon(n)的插入与查询,也需要额外的平衡调节.像mysql的数据库定义是可以指定B+ 索引还是hash索引. C++ ...