BootStrap前端框架
来源：互联网 发布：批处理执行python 编辑：程序博客网 时间：2024/06/01 11:35
一.what前端CSS框架,另一个前端框架Foundation前端框架:使用HTML、CSS、JavaScript编写的组件工具集,拿来可以直接用，不用从造轮子.二.why最流行的前端框架、用的多Twitter公司于2011年8月开源的整体式前端框架,由Twitter的设计师Mark Otto和JacobThornton合作开发，短短几个月时间红遍全球,大量的Bootstrap风格的网站出现在互联网的浪潮中,而应用更为广泛的是它的后台管理页面.近两年的所有互联网项目的后台均采用了Bootstrap进行构建.为什么如此流行1.功能强大和样式美观2.简单易用、文档丰富3.高度可定制性4.丰富的生态圈5.布局兼容性好三.how(第一个程序)1.下载Bootstraphttp://getbootstrap.com最新版本bootstrap-3.3.7不同版本的区别: 最新版本已经发展到Bootstrap 3 但是不意味着 Bootstrap2已经淘汰了,Bootstrap3采用了扁平化的风格,Bootstrap2在按钮、工具栏等位置更多采用了立体的效果,它们之间没有谁好谁坏的区别,只是设计风格的不同. 应该根据自己项目的实际需求来决定使用哪一个版本扁平化概念的核心意义是：去除冗余、厚重和繁杂的装饰效果。而具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素，这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上，则强调了抽象、极简和符号化。关于扁平化可以参考http://baike.baidu.com/link?url=8RakX7FRvO0H7FbVWc2mBOMcSpy-humjYXGQEYZTjrbPfcCM1JNZCPjk0Hf60TlY6ma0FYvn5a992RPpfpJVA_2.在项目中引入Bootstrap引入3个文件bootstrap.cssjquery.js Bootstrap.jsBootstrap要求的jquery在1.9.1版本或以上,jQuery3以下演示代码如下：<html> <head> <title>第一个Bootstrap程序</title> <link href="../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link> </head> <body> <h1>Hello,Bootstrap!</h1> <script src="jquery-2.1.4.js"></script> <script src="cbootstrap.js"></script> </body></html>需要注意的是因为bootstrap框架依赖于jquery,所以要先导入jquery.js再导入bootstrap.js.另外以前我们导入 js都是在head中导入,现在为什么要把它放到body中导入呢?因为如果放到head中导入,服务器给客户端浏览器传输该页面的时候从上到下传输,这样会先传输js文件,如果用户的网速比较慢,这样在传输js文件的过程中,body中的内容还没有传输过来,这样用户看到的是一片白,影响用户的体验,所以我们通常把js文件放到后面加载,这样用户可以先看到body中的内容,再下载js来改变页面的行为,提高用户了用户的体验.(否则用户看见一片白直接关闭网页了)普通纯HTML效果如下比较全的第一个程序<!DOCTYPE html><html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!!!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> </body></html>代码解释1：<meta name="viewport" content="width=device-width, initial-scale=1.0">页面宽度为设备宽度,初始缩放比例为1.0,调整比例对桌面浏览器并不起作用,只对移动端浏览器生效,比例值越大字越大该语句是为了解决移动端浏览器显示问题不加上面这句话,在web端访问没问题,在移动端浏览器中显示效果如下加上这句话以后效果如下具体详见:http://davidbcalhoun.com/2010/viewport-metatag/代码解释2: <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script> <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script> <![endif]-->条件注释 IE9以下 引入这两个文件,IE9以上(包括IE9)把它当做注释内容,不引入.引入这两个文件为了让IE8支持HTML5元素和媒体查询.四.基本样式1.普通按钮(1)按钮基本样式演示代码:<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>(2)调节按钮的大小<p> <button type="button" class="btn btn-primary btn-lg">主要</button> <button type="button" class="btn btn-default btn-lg">默认</button> </p> <p> <button type="button" class="btn btn-primary">主要</button> <button type="button" class="btn btn-default">默认</button> </p> <br/> <p> <button type="button" class="btn btn-primary btn-sm">主要</button> <button type="button" class="btn btn-default btn-sm">默认</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">主要</button> <button type="button" class="btn btn-default btn-xs">默认</button> </p>(3)块级按钮<button> 和<a> 默认都是行内元素(内联元素),而对于移动端来说一个占据一行的大按钮再正常不过了演示代码:<button type="button" class="btn btn-primary btn-block">主要</button><button type="button" class="btn btn-default btn-block">默认</button>(4)不可点击的按钮讲按钮的背景色做50%的褪色处理以呈现出无法点击的效果<button type="button" class="btn btn-primary" disabled="disabled">主要</button><button type="button" class="btn btn-default" disabled="disabled">默认</button>2.关闭按钮对按钮元素应用.close类就可以显示一个关闭按钮,如图所示<button type="button" class="close" aria-hidden="true">×</button>aria-hidden="true" 对屏幕阅读器来说这个按钮时隐藏的屏幕阅读器,便于残障人士更方便阅读网页内容的工具关于屏幕阅读器,可参见http://www.zhangxinxu.com/wordpress/2012/03/wai-aria-%E6%97%A0%E9%9A%9C%E7%A2%8D%E9%98%85%E8%AF%BB/3.下拉按钮对span元素应用caret类就可以显示一个下拉符号<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span></button>4.图片<img src="img/beer.jpg" /><img src="img/beer.jpg" class="img-rounded" /><img src="img/beer.jpg" class="img-circle" /><img src="img/beer.jpg" class="img-thumbnail" />5.表格演示代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>bootstrap表格</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="../../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link> <style type="text/css"> tr.tableHead { background-color:#000000; color:#ffffff; }tr.tableHead>th { text-align: center; } </style> </head> <body> <div class="text-center"> <h1>商品信息</h1> <table class="table table-striped table-bordered table-hover"> <thead> <tr class="tableHead"> <th>商品编号</th> <th>商品名称</th> <th>商品描述</th> <th>商品种类</th> <th>操作</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>macbook air</td> <td>苹果最新超薄笔记本</td> <td>笔记本</td> <td><a href="#">修改</a></td> <td><a href="#">删除</a></td> </tr> <tr> <td>2</td> <td>ipad pro</td> <td>苹果最新平板电脑</td> <td>平板电脑</td> <td><a href="#">修改</a></td> <td><a href="#">删除</a></td> </tr> <tr> <td>3</td> <td>iphone6s plus</td> <td>苹果最新大屏手机</td> <td>手机</td> <td><a href="#">修改</a></td> <td><a href="#">删除</a></td> </tr> </tbody> </table> </div> <script src="../../css/bootstrap/js/jquery-2.1.4.js"></script> <script src="../../css/bootstrap/js/bootstrap.js"></script> </body></html>6.工具类(1)浮动工具左浮动、右浮动: 为元素添加.pull-left、.pull-right类就可以设置左浮动和有浮动演示代码如下:<div class="pull-left">111</div><div class="pull-right">222</div>内部的源代码如下:.pull-right { float: right !important;}.pull-left { float: left !important;}!important; 设置该属性为最高优先级,即相当于把该属性定义在css文件最下面.(2)显示/隐藏工具使用.show类显示, .hidden类隐藏,这种隐藏是不占位的,相当于设置了display:none<div class="show">333</div><div class="hidden">444</div>(3)居中使用.center-block 类将元素设为块级元素并居中<div style="width:100px;background-color:yellowgreen;" class="center-block">555</div>注意必须设置元素的宽度居中才有效5.对除了屏幕阅读器的设备隐藏使用.sr-only类<a class="sr-only" href="#content">Skip to main content</a>五.组件集1.导航条Bootstrap的导航主要分为胶囊式导航、面包屑导航、头部导航3类,可以满足大多数的开发需求.胶囊式导航水平胶囊导航胶囊导航实质是一个无序列表,只需要给ul元素添加.nav和.nav-pills类即可<ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li></ul>垂直胶囊导航如果需要纵向的胶囊导航, 只需要在水平胶囊导航的基础上加一个.nav-stacked 类即可 <div style="width:140px;text-align:center;"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul></div>面包屑导航面包屑导航一般用于有层次关系的选项，如果想实现面包屑导航,需要给ul加一个.breadcrumb类即可.<ul class="breadcrumb"> <li><a href="#">首页</a></li> <li><a href="#">资料库</a></li> <li><a href="#">数据</a></li></ul>头部导航 <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <!--这里设置网站的标题 --> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">网站Logo</a> </div> <!—这里设置网站的链接 --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">链接<span class="sr-only">(current)</span></a></li> <li><a href="#">链接</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">搜索</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">链接</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">下拉菜单<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --></nav>具体分析头部导航主要分为两层结构,第一层是最外面的 <nav class="navbar navbar-default">…</nav>，这一层用于设置导航的基本样式将.navbar-default类替换为 .navbar-inverse类,则显示为反色的导航(黑底白字)第二层有两个并列的元素: <div class="navbar-header">…</div>内部用于设置标题内容.<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">….</div>内部则用于编写具体的导航链接、搜索表单、下拉菜单等具体的导航内容。Bootstrap提供了在小窗口下导航 收起/展开的功能同学们可以把上面的窗口拖小的试一下添加.navbar-fixed-top可以让导航条固定在顶部,不会随页面滚动而消失。为了防止固定在顶部后遮挡正常内容,需要设置:body{padding-top:50px;} 其中具体的值取决于导航条的高度加了body的补白不会遮挡正常内容,不加会遮挡2.下拉菜单演示代码：<div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <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 class="divider"></li> <li><a href="#">选项四</a></li> </ul></div>按钮和下拉选择都要包裹在<div class="dropdown">….</div>内按钮必须添加 data-toggle="dropdown" 触发器放置下拉选项的无须列表需要添加 .dropdown-menu 类添加一个空的<li class="divider"></li>来分割列表项3.按钮组上面一组是放到按钮组中的效果,下面一组是没有放到按钮组的效果按钮组用于把一组按钮放在同一行里，按钮之间没有间隙.用法很简单,只需要将一组按钮放在<div class="btn-group">..</div>中即可.演示代码:<div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> <input type="button" class="btn btn-default" value="点我" /></div>(1)垂直排列<div class="btn-group-vertical"></div>(2)两端对齐(按钮组拉伸到100%宽度)演示代码:<div class="btn-group btn-group-justified"> <a class="btn btn-default">Left</a> <a class="btn btn-default">Middle</a> <a class="btn btn-default">Right</a></div>注意:两端对齐的用法只适用于<a>元素,因为按钮元素不能应用这些样式并将其所包含的内容两端对齐.(3)嵌套,可以在 按钮组 内继续 嵌套 按钮组演示代码: <div class="btn-group"> <button type="button" class="btn btn-default">Left</button> <button type="button" class="btn btn-default">Middle</button> <button type="button" class="btn btn-default">Right</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <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 class="divider"></li> <li><a href="#">选项四</a></li> </ul> </div> </div> 4.input控件组多个input控件放到一组中配合使用,下面演示了几种常见的组合，最常见的input控件组非搜索框莫属.(1)搜索框实质就是 文本框+按钮演示代码: <div class="input-group" style="width:500px;margin:0px auto;"> <input type="text" class="form-control"/><span class="input-group-btn"><input type="button" name="search" value="search" class="btn btn-default"/> </span> </div>如果需要带下拉菜单的按钮,只需要将按钮换成下拉菜单即可。(2)搜索框+文字搜索框后不是按钮,不可点击演示代码:<div class="input-group" style="width:500px;margin:0px auto;"> <input type="text" class="form-control" /> <span class="input-group-addon"> 输入完成后回车 </span></div>5.列表组上图是未经美化的列表,下图是经过美化的列表演示代码如下:<div style="width:100px;"> <ul class="list-group"> <li class="list-group-item"><a href="">选项一</a></li> <li class="list-group-item"><a href="">选项二</a></li> <li class="list-group-item"><a href="">选项三</a></li> <li class="list-group-item"><a href="">选项四</a></li> </ul></div>注意:列表组中使用有序列表时不会显示序号.列表组不仅可以应用于列表,还可以将其他需要列表的元素展现为列表的样子.例如,左图为不加样式的,右图为加上列表组样式的.演示代码:<div class="class="list-group" style="width:200px;"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">英格兰战胜威尔士</h4> <p>最新欧洲杯战况英格兰2:1战胜威尔士....</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">乌克兰对北爱尔兰</h4> <p>乌克兰对北爱尔兰....</p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">德国对波兰</h4> <p>德国队波兰....</p> </a></div>为列表组添加徽章也十分容易,Bootstrap会自动将徽章放置在右边演示代码:<div style="width:150px;"> <ul class="list-group"> <li class="list-group-item"> <!-- 即使将徽章放在前面,最终还是会居右放置--> <span class="badge">52</span> <a href="">中国队金牌</a> </li> <li class="list-group-item"> <span class="badge">48</span> <a href="">美国队金牌</a> </li> <li class="list-group-item"> <span class="badge">41</span> <a href="">俄罗斯队金牌</a> </li> </ul> </div>6.分页几乎所有的列表页面都需要分页, Bootstrap提供了一个较为美观的分页样式,如下图所示：实现上述效果比较简单,只需给无序列表的ul元素添加pagination类即可演示代码：<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="#">5</a></li> <li><a href="#">»</a></li></ul>可以通过添加 .pagination-lg类或.pagination-sm类来获得比标准尺寸更大或更小的分页,例如:<ul class="pagination pagination-lg”>..</ul><ul class="pagination">..</ul><ul class="pagination pagination-sm”>..</ul>如果仅仅想使用上一页/下一页的功能怎么办?Bootstrap也内置了该功能,为ul添加.pager类即可，演示代码:<ul class="pager"> <li><a href="#">上一页</a></li> <li><a href="#">下一页</a></li></ul>注意:翻页元素默认居中对齐,如果为列表元素添加.previous和.next类,可以将上一页/下一页按钮设置为两端对齐.演示代码:<div> <ul class="pager"> <li class="previous"><a href="#">上一页</a></li> <li class="next"><a href="#">下一页</a></li> </ul></div>7.标签和Badge标签一般用于对内容进行标记,例如可以用在京东的订单管理后台,标示订单的状态(”未发货”、”已发货”、”已完成”等)Bootstrap内置了6种常用的标签类,分别为default(默认)、primary(主要)、success(成功)、info(消息)、warning(警告)、danger(危险操作)演示代码:<span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><span class="label label-info">Info</span><span class="label label-warning">Warning</span><span class="label label-danger">Danger</span>除了标签之外,还有一种提示信息很常用,很多网站都有消息系统来提示用户有未读的新闻、私信等内容,Bootstrap中称之为badge(徽章),如图所示演示代码:<button class="btn btn-primary"> 未读信息 <span class="badge">4</span></button>8.缩略图有时候需要在网页中布局图像、文本等(例如商品展示),可以使用缩略图演示代码如下:<!DOCTYPE html><html><head> <title>Bootstrap 实例 - 缩略图</title> <link href="../../css/bootstrap/css/bootstrap.css" rel="stylesheet"></head><body><div class="row"> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../../img/cat.png" alt="通用的占位符缩略图"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../../img/cat.png" alt="通用的占位符缩略图"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../../img/cat.png" alt="通用的占位符缩略图"> </a> </div> <div class="col-sm-6 col-md-3"> <a href="#" class="thumbnail"> <img src="../../img/cat.png" alt="通用的占位符缩略图"> </a> </div></div> <script src="../../js/jquery/jquery-2.1.4.js"></script> <script src="../../css/bootstrap/js/bootstrap.js"></script></body></html>9.面板很多时候需要将某些内容放到一个容器里,此时可以使用Bootstrap的面板组件.可以看到,面板的作用就是加上了容器的边框并设置了内容和容器间的边距,对应最简单面板样式的代码如下：<div class="panel panel-default"> <div class="panel-body">基础面板示例</div></div>我们还可以为面板添加header和footer，如下图所示演示代码如下:<div class="panel panel-default" style="width:500px;"> <div class="panel-heading">面板页头</div> <div class="panel-body">面板内容省略...</div> <div class="panel-footer">面板页脚</div></div>面板代码的配色和之前介绍的标签是一致的,都是对应诸如success、warning、danger等颜色,例如<div class="panel panel-default">…</div><div class="panel panel-primary">…</div><div class="panel panel-success">…</div><div class="panel panel-info">…</div><div class="panel panel-warning">…</div><div class="panel panel-danger">…</div>10.进度条进度条常用于文件的上传和下载、内容的加载等场景,Bootstrap提供了多种进度条样式供选择.注意:Bootstrap以及其他前端组件只解决进度条的样式问题,追踪进度扔需依赖服务端程序.Bootstrap中,一个标准的进度条如下图所示:最简单的实现代码如下:<div class="progress" style="width:500px;"> <div class="progress-bar" style="width:60%;"></div></div>为外层的div元素添加.progress类,为内层的div元素添加.progress-bar类,并控制内层div的宽度百分比,这样就得到一个基础的进度条了. 进度条的颜色既可以自己根据需要用自定义的颜色进行覆盖,也可以调用Bootstrap内置的类来覆盖. 为内层的div元素添加. progress-bar-success就可以获得如下图的颜色,其命名规律和Bootstrap的标签类是一致的.<div class="progress" style="width:500px;"> <div class="progress-bar progress-bar-success" style="width:60%;"></div></div>我们还可以为进度条添加条纹效果,如下图所示.实现条纹效果需要为外层的div添加.progress-striped类,演示代码:<div class="progress progress-bar-striped" style="width:500px;"> <div class="progress-bar progress-bar-info" style="width:60%;"></div></div>六.Bootstrap中的JavaScript特效Bootstrap的流行很大程度上得益于它大大降低了页面开发的学习成本,很多时候,JavaScript效果是一些非专业人士或美工出身的站长最头疼的问题,从零开始学习一门真正的编程语言,到能够在实战中实现足够好的效果,这个时间和学习成本是相当高的.而Bootstrap实现了从UI到JavaScript代码的一体化,只要在HTML代码中加入框架约定的触发器,就可以实现大多数的效果.即使用导官方没有提供的效果,开源社区的开发者也往往能提供现成的解决方案. 下面就来看看Bootstrap提供的几种常用效果吧.1.模态对话框 如果想让用户在当前页面完成某种稍显复杂的操作,譬如登录、注册,或者是阅读一段用户说明，模态对话框是一个不错的选择。用户在操作或阅读完毕后可以很方便地返回原页面，免去了页面跳转带来的等待.点击”开始演示模态框” 按钮后,弹出模态对话框演示代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>演示分页组件</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="../../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link> </head> <body> <h2>创建模模态对话框（Modal）</h2> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> <div class="modalfade" 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"> 模态对话框示例 </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> </div> </div> <script src="../../css/bootstrap/js/jquery-2.1.4.js"></script> <script src="../../css/bootstrap/js/bootstrap.js"></script> </body></html>根据代码分析,完整的模态对话框功能主要分为两个部分:出发按钮和对话框.出发按钮可以是一个button，也可以是一个链接，只需要加入两个元素:data-toggle=” modal”触发器data-target="#myModal",用于和相应的对话框id进行对应.对话框部分主要分3层.第一层:<div class=”modal” id=”myModal”>…</div>,这一层使用class=”modal”设置样式并设置模态对话框的触发类,提供id和触发按钮的data-target属性的值进行对应，还可以添加其他的配置属性.第二层:<div class=”modal-dialog”>…</div>,设置一个居中的对话框.第三层:<div class=”modal-content”>…</div>,设置具体的内容.注意:不要在一个模态框上重叠另一个模态框.开发中,选项参数可以通过data属性或JavaScript进行传递。对于data属性,需要将选项名称放到data-之后,例如data-backdrop=””，具体的参数可以参考官方文档.2.标签页切换如果有多个分类的内容,又不想全部直接展现在页面上,使用标签页进行切换是一个不错的选择.如下图所示演示代码:<ul class="nav nav-tabs" id="myTab"> <li class="active"><a href="#intro" data-toggle="tab">商品介绍</a></li> <li><a href="#parameter" data-toggle="tab">规格参数</a></li> <li><a href="#qingdan" data-toggle="tab">包装清单</a></li> <li><a href="#pingjia" data-toggle="tab">商品评价</a></li> <li><a href="#shouhou" data-toggle="tab">售后保障</a></li></ul><div class="tab-content"> <div class="tab-pane active" id="intro">我是商品介绍</div> <div class="tab-pane" id="parameter">我是规格参数</div> <div class="tab-pane" id="qingdan">我是包装清单</div> <div class="tab-pane" id="pingjia">我是商品评价</div> <div class="tab-pane" id="shouhou">我是售后保障</div></div> 标签页切换由两部分组成:标签页部分和与标签页对应的内容部分.标签页部分本质是一个列表,为列表的ul/ol属性添加.nav和.nav-tabs类,使其展现为标签页的样式,列表项中的<a>链接需要加上data-toggle=”tab”这个触发器, 并且href的值要和对应内容部分的id进行对应. 内容部分需要包裹在<div class=”tab-content”>…</div>内部,保证除了应该显示的内容外,其他是隐藏的.内容的各个单项需要包裹在<div class=”tab-pane”>…</div>内部,并且要为<divclass=”tab-pane”>标签设置一个id,用于与标签页的href属性的值对应.3.TooltipTooltip插件的效果是鼠标悬停在目标元素上时,显示额外的提示,如下图所示演示代码:<a href="#" id="myTooltip" data-toggle="tooltip" data-placement="right" title="在右侧显示提示内容" class="btn btn-primary">工具提示</a>其中data-toggle=”tooltip”是插件触发器,title的内容是提示文字,data-placement属性用于指定提示出现的位置。要使该插件生效,需要在页面底部添加JavaScript代码完成初始化:<script type="text/javascript"> $("#myTooltip").tooltip();</script>开发者可以为tooltip()函数添加参数,或者在标签内添加”data-参数名”进行配置,比如上面例子中的data-placement=”right”.4.弹出框Tooltip采用的是hover进行触发,多用于简单的提示,弹出框则通过点击触发,一般用于显示更多的内容,如下图所示.应用弹出框插件的代码结构和Tooltip差不多,演示代码如下:<a href="javascript:void(0);" id="myPopover" class="btn btn-lg btn-danger" data-toggle="popover" data-content="采用了点击事件触发,相比Tooltip可以显示更多、更正式的内容,并且可以配置更多样式." data-original-title="弹出框的应用">点击了解更多</a>需要添加data-toggle=”popover”触发器进行插法,主要有两个配置项: data-content配置弹出框内容,data-original-title配置弹出框的标题. 弹出框对Tooltip存在依赖,因此插件中必须包含有Tooltip.和Tooltip一样,也需要添加初始化JavaScript代码:<script type="text/javascript"> $("#myPopover").popover();</script>和Tooltip一样,可以为popover()函数添加参数,或者在标签内添加”data-参数名”进行配置，比如上面Tooltip例子中的data-placement=”right”5.提示信息一般来说,任务执行成功或失败后,用户需要得到一个提示信息,这个信息可以出现在页面跳转后的新页面,也可以是Ajax执行成功后的回调。但它们都有一个共同的特点,需要在阅读完毕后消失.Bootstrap内置了警告框插件,使用户可以单击关闭按钮关掉提示信息。演示代码如下:<div id="my-alert" class="alert alert-danger fade in" style="width:400px;"> 警告,服务器挂了! <a href="#" class="close" data-dismiss="alert">X</a></div>构造提示信息需要两个部分:提示信息和关闭信息按钮。提示信息这里使用了Bootstrap内置的alert类,关闭按钮则是在和提示信息文字并列的位置构造一个链接,为该链接添加data-dismiss=”alert”这个触发器来触发关闭事件.Bootstrap为警告框的关闭动作暴露了事件,允许进行监听,可以再编写关闭警告框后执行的动作.Close.bs.alert: 当close函数被调用之后,此事件被立即触发.Closed.bs.alert: 当警告框被关闭之后(CSS过渡效果执行完毕),此事件被触发,演示代码如下:<script type="text/javascript"> $("#my-alert").bind('closed.bs.alert',function(){ alert('关闭了!'); })</script>8.幻灯片Bootstrap集成了一个幻灯片组件,可以完成图片或内容的切换和自动播放。幻灯片结构由3部分组成:控制器、内容部分、标识符.控制器负责控制幻灯的翻页，标识符告诉我们页码,内容部分负责展现内容。具体的代码如下:演示代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>演示幻灯片组件</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="../../css/bootstrap/css/bootstrap.css" type="text/css" rel="stylesheet"></link> </head> <body> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width:730px;"> <!--标识符:告诉我们页码--> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- 幻灯片内容 --> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="../../img/1.jpg"> </div> <div class="item"> <img src="../../img/2.jpg"> </div> <div class="item"> <img src="../../img/3.jpg"> </div> </div> <!-- 控制器: 负责上一页/下一页 --> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> <script src="../../css/bootstrap/js/jquery-2.1.4.js"></script> <script src="../../css/bootstrap/js/bootstrap.js"></script> </body></html>首先,所有内容都需要包裹在<div class=”carousel slide”>..</div>内部,如果需要开启轮播,则需要加入data-ride=”carousel”触发器.标识符部分是一个列表,需要为ol/ul添加class="carousel-indicators"类.内容部分需要整体包裹在<div class="carousel-inner”>..</div>内部，每一页的内容需要包裹在<div class="item">…</div>内部.控制器部分实际就是一个<a>链接,需要为这个链接加上carousel-control类,并添加一个.left或.right类指明向前翻页还是向后翻页.翻页的图标可以使用Bootstrap内置的图标:<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>也可以自定义图标样式.注意:Bootstrap的幻灯片插件是基于CSS3实现的动画效果,但是IE9及IE9以下的浏览器不支持这些必要的CSS属性，因此在IE下回丢失过渡动画效果.和其他插件的参数配置一样,可以通过data属性或JavaScript传递选项参数,对于data属性，将选项名称放到data-之后,例如data-interval=”3000”来调整轮播的时间。
阅读全文
0 0
- 【前端框架Bootstrap】 介绍
- 前端开发框架bootstrap
- Bootstrap前端开发框架
- 前端开发框架bootstrap
- 前端框架之Bootstrap
- BootStrap 前端框架介绍
- Bootstrap前端框架学习
- 前端框架Bootstrap布局！
- bootstrap web前端框架
- 前端框架Bootstrap+AppCan
- 学习前端框架Bootstrap
- 【前端】Bootstrap框架入门
- 前端框架--bootstrap开始
- Bootstrap前端框架
- Bootstrap前端框架
- 前端框架之bootstrap
- 前端框架-BootStrap
- 前端之框架-bootstrap
- 吴恩达Coursera深度学习课程 DeepLearning.ai 提炼笔记（1-4）-- 深层神经网络（转载）
- 发送与接收事件
- java死锁问题
- 时间序列数据库TSDB排名
- SQLite在unity下使用的工具类
- BootStrap前端框架
- 随便谈谈IT行业的几个定律
- 基于handle_detector的机器人对目标定位
- java菱形图案
- vmware workstation14连网
- Java中static学习心得
- 第7章 虚拟机类加载机制7.1~7.3
- C语言操作符
- Linux搭建FFMPEG环境
