【学习笔记】Bootstrap常用组件整理
2016-07-30 10:11
676 查看
Bootstrap作为twitter推出的前端开发工具包,短时间内便红遍业界。确实它功能强大并且界面美观。
虽然在实际工作中较少会在非服务器端的项目中用到,但是bootsrap依然是值得我们在平常学习研究的优秀框架。
这里整理出了一些bootstrap的组件,供大家参考。
一、工具类:
二、组件
截图:
三、js
虽然在实际工作中较少会在非服务器端的项目中用到,但是bootsrap依然是值得我们在平常学习研究的优秀框架。
这里整理出了一些bootstrap的组件,供大家参考。
一、工具类:
<span style="font-family:Arial;font-size:12px;"><!DOCTYPE html> <html> <head> <title>Bootstrap 工具类</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="../js/bootstrap-3.3.6/dist/css/bootstrap.css"> <style type="text/css"> * { margin: 0 } .divs { text-align: center; line-height: 75px; font-family: "微软雅黑"; float: left; margin: 10px; width: 100px; height: 75px; background-color: #E3E3E3 } </style> </head> <body> <div class="divs div1"> <button type="button" class="close" aria-hidden="true">×</button> 关闭按钮 </div> <div class="divs div2"> <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> </div> <div class="divs pull-left">浮动pull-left</div> <div class="divs pull-right">浮动pull-right</div> <div class="divs show">show/hidden</div> <div class="center-block" style="width: 150px;background-color: #E3E3E3;">居中center-block</div> <div class="sr-only divs" href="#content">Skip to main content</div> <script src="../js/jquery-2.1.4/jquery-2.1.4.js"></script> <script src="../js/bootstrap-3.3.6/dist/js/bootstrap.js"></script> </body> </html></span>截图:
二、组件
<span style="font-family:Arial;font-size:12px;"><!DOCTYPE html> <html> <head> <title>Bootstrap 组件</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link rel="stylesheet" href="../js/bootstrap-3.3.6/dist/css/bootstrap.css"> <style type="text/css"> * { margin: 0 } #span1 { display: inline-block; margin-left: 2px; vertical-align: middle; /*border-top: 4px dashed;*/ border-right: 4px solid transparent; border-left: 4px solid transparent; border-bottom: 4px solid; } body { padding-top: 50px; } .part { float: left; margin: 10px; box-shadow: 1px 1px 3px #E8E8E8; } .table .tableHead { color: white; background-color: #737373 } </style> </head> <body> <div class="part" style="width: 100%;"> <nav class="navbar navbar-default navbar-fixed-top"> <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="ico ed44 n-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> <h3>头部导航</h3> </div> <div class="part"> <h3>表格</h3> <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 class="winBlue"> <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> <div class="part"> <h3>胶囊式导航条</h3> <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> </div> <div class="part" style="width: 100px;"> <h3>垂直胶囊导航条</h3> <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> <div class="part" style="width: 300px;"> <h3>面包屑导航条</h3> <ul class="breadcrumb"> <li> <a href="#">首页</a> </li> <li> <a href="#">资料库</a> </li> <li> <a href="#">数据</a> </li> </ul> </div> <div class="part 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="part" style="width: 20px;height: 20px;"> <h3>箭头</h3> <span id="span1"> </span> </div> <div class="btn-group part"> <h3>按钮组</h3> <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> <div class="btn-group part btn-group-vertical "> <h3>垂直按钮组</h3> <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> <div class="part"> <h3>两端对齐按钮组</h3> <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> </div> <div class="part"> <h3>嵌套按钮组</h3> <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> </div> <div class="part"> <h3>input控件组 搜索框</h3> <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> </div> <div class="part"> <h3>搜索框2 带下拉菜单</h3> <div class="input-group" style="width:500px;margin:0px auto;"> <input type="text" class="form-control" /> <span class="input-group-btn"> <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> </span> </div> </div> <div class="part"> <h3>搜索框—+文字</h3> <div class="input-group" style="width:500px;margin:0px auto;"> <input type="text" class="form-control" /> <span class="input-group-addon"> 输入完成后回车 </span> </div> </div> <div class="part"> <h3>列表组件</h3> <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> <div class="part"> <h3>用列表组件将内容分成列表的样式</h3> <div 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> </div> <div class="part"> <h3>列表后面加徽章 badge</h3> <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> </div> <div class="part"> <h3>分页</h3> <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> <div class="part"> <h3>更大或更小的分页 pagination-lg pagination-sm</h3> <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="#">5</a> </li> <li> <a href="#">»</a> </li> </ul> </div> <div class="part"> <h3>上下页</h3> <ul class="pager"> <li> <a href="#">上一页</a> </li> <li> <a href="#">下一页</a> </li> </ul> </div> <div class="part"> <h3>加previous next 两端对齐</h3> <ul class="pager"> <li class="previous"> <a href="#">上一页</a> </li> <li class="next"> <a href="#">下一页</a> </li> </ul> </div> </div> <div class="part"> <h3>各种标签</h3> <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> </div> <div class="part"> <h3>提示信息</h3> <button class="btn btn-primary"> 未读信息 <span class="badge">4</span> </button> </div> <div class="part"> <h3>面板</h3> <div class="panel panel-default"> <div class="panel-body">基础面板示例</div> </div> <div class="panel panel-default" style="width:500px;"> <div class="panel-heading">面板页头</div> <div class="panel-body">面板内容省略...</div> <div class="panel-footer">面板页脚</div> </div> <div class="part"> <h3>面板配色同标签</h3> <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> </div> </div> <div class="part"> <h3>进度条</h3> <div class="progress" style="width:500px;"> <div class="progress-bar" style="width:60%;"></div> </div> <h3>进度条 颜色命名规律同标签</h3> <div class="progress " style="width:500px;"> <div class="progress-bar progress-bar-success" style="width:60%;"></div> </div> <h3>加斜条纹效果 progress-bar-striped</h3> <div class="progress" style="width:500px;"> <div class="progress-bar progress-bar-info progress-bar-striped" style="width:60%;"></div> </div> </div> <script src="../js/jquery-2.1.4/jquery-2.1.4.js "></script> <script src="../js/bootstrap-3.3.6/dist/js/bootstrap.js "></script> </body> </html></span>
截图:
三、js
<span style="font-family:Arial;font-size:12px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>bootstrap js特效</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link href="../js/bootstrap-3.3.6/dist/css/bootstrap.css" type="text/css" rel="stylesheet"></link> <style type="text/css"> .part { float: left; margin: 10px; box-shadow: 1px 1px 3px #E8E8E8; } </style> </head> <body> <div class="part"> <h2>创建模模态对话框(Modal)</h2> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button> <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"> 模态对话框示例 </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> </div> <div class="part"> <h3>标签页</h3> <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> </div> <div class="part"> <h3>tooltip</h3> <a href="#" id="myTooltip" data-toggle="tooltip" data-placement="right" title="在右侧显示提示内容" class="btn btn-primary">工具提示</a> </div> <div class="part"> <h3>弹出框</h3> <a href="javascript:void(0);" id="myPopover" class="btn btn-lg btn-danger" data-toggle="popover" data-content="采用了点击事件触发,相比Tooltip可以显示更多、更正式的内容,并且可以配置更多样式." data-original-title="弹出框的应用">点击了解更多</a> </div> <div class="part"> <h3>提示信息</h3> <div id="my-alert" class="alert alert-danger fade in" style="width:400px;"> 警告,服务器挂了! <a href="#" class="close" data-dismiss="alert">X</a> </div> </div> <script src="../js/jquery-2.1.4/jquery-2.1.4.js"></script> <script src="../js/bootstrap-3.3.6/dist/js/bootstrap.js"></script> </body> <script type="text/javascript"> $("#myTooltip").tooltip(); $("#myPopover").popover(); $("#my-alert").bind('closed.bs.alert',function(){ alert('关闭了!'); }) </script> </html></span>截图:
相关文章推荐
- 12个免费的 Twitter Bootstrap 后台模板
- 基于bootstrap3的表格组件
- bootstrap学习笔记(三)
- hello world bootstrap 编译
- bootstrap-table 筛选数据报400错误
- 如何将文本编辑器嵌入框架--以Umeditor&CodeIgniter框架为例
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
- JS组件系列——表格组件神器:bootstrap table
- bootstrap入门步骤
- 打造简单实用的Thinkphp分页样式(Bootstrap版本)
- bootstrap 的滚动监听
- bootstrap-table使用总结
- 【插件-前端-bootstrap】快速上手布局web页面用什么?快速制表用什么?bootstrap及其插件(1)
- 一个利用Bootstrap写的的小作品
- bootstrap, boosting, bagging 几种方法的区别与联系
- bootstrap 响应式实用工具
- bootstrap学习笔记(二)
- bootstrap 下拉选择框select实现从服务器加载option
- bootstrap学习笔记(一)