- 浏览: 7944278 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (2425)
- 软件工程 (75)
- JAVA相关 (662)
- ajax/web相关 (351)
- 数据库相关/oracle (218)
- PHP (147)
- UNIX/LINUX/FREEBSD/solaris (118)
- 音乐探讨 (1)
- 闲话 (11)
- 网络安全等 (21)
- .NET (153)
- ROR和GOG (10)
- [网站分类]4.其他技术区 (181)
- 算法等 (7)
- [随笔分类]SOA (8)
- 收藏区 (71)
- 金融证券 (4)
- [网站分类]5.企业信息化 (3)
- c&c++学习 (1)
- 读书区 (11)
- 其它 (10)
- 收藏夹 (1)
- 设计模式 (1)
- FLEX (14)
- Android (98)
- 软件工程心理学系列 (4)
- HTML5 (6)
- C/C++ (0)
- 数据结构 (0)
- 书评 (3)
- python (17)
- NOSQL (10)
- MYSQL (85)
- java之各类测试 (18)
- nodejs (1)
- JAVA (1)
- neo4j (3)
- VUE (4)
- docker相关 (1)
最新评论
-
xiaobadi:
jacky~~~~~~~~~
推荐两个不错的mybatis GUI生成工具 -
masuweng:
(转)JAVA获得机器码的实现 -
albert0707:
有些扩展名为null
java 7中可以判断文件的contenttype了 -
albert0707:
非常感谢!!!!!!!!!
java 7中可以判断文件的contenttype了 -
zhangle:
https://zhuban.me竹板共享 - 高效便捷的文档 ...
一个不错的网络白板工具
bootstrap常用tips
1 常见的表单中,标示和元素同一行的效果:
<h3>水平排列表单</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮 箱:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密 码:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
</div>
</div>
而分上下两行的效果
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">邮箱地址</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密 码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
</div>
2 常见按钮
<h2>按钮</h2>
<p>
<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>
</p>
<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>
<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 type="button" class="btn btn-default" disabled="disabled">默认</button>
其中增加disabled="disabled",标示为按钮不可点击状态
4)表格
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>姓</th>
<th>名</th>
<th>昵称</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>李</td>
<td>四</td>
<td>拉里</td>
</tr>
<tr>
<td>2</td>
<td>王</td>
<td>五</td>
<td>博德</td>
</tr>
<tr>
<td>3</td>
<td>赵</td>
<td>四</td>
<td>詹姆斯</td>
</tr>
</tbody>
</table>
5 响应式工具
比如让某个工具栏,在小窗口和超小窗口下不显示
<div class="toolbar hidden-xs hidden-sm">
.. 其中针对xs,sm,md,lg等不同尺寸,都可以使用hidden或 visiable属性,分别为显示和不显示用
6 下拉菜单
<div class="container">
<h2>下拉菜单</h2><hr>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" 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>
7 按钮组
<div class="btn-group">
<button type="button" class="btn btn-default">左转弯</button>
<button type="button" class="btn btn-default">直行</button>
<button type="button" class="btn btn-default">右转弯</button>
</div>
8 input控件组
<h2>输入框组</h2><hr>
<div>
<div class="input-group col-xs-4">
<input type="text" class="form-control" placeholder="search">
<span class="input-group-addon">搜索</span>
</div>
<div class="input-group col-xs-4">
<input type="text" class="form-control" placeholder="search">
<span class="input-group-btn">
<input type="submit" value="搜索" class="btn btn-default">
</span>
</div>
<br>
</div>
9 导航
1) 胶囊导航
<h3>胶囊导航</h3>
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">简介</a></li>
<li><a href="#">详情</a></li>
</ul>
<br>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">简介</a></li>
<li><a href="#">详情</a></li>
</ul>
nav-stacked 为纵向的
2)面包导航
<h3>面包屑导航</h3>
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">资料库</a></li>
<li class="active">数据</li>
</ol>
3) 头部导航
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
</ul>
</div>
</nav>
10 列表组
<h2>列表组</h2><hr>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">快船战胜雷霆</h4>
<p class="list-group-item-text">雷霆和快船的第二轮第一场比赛在俄克拉荷马打响,客场作战快船凭借保罗第一节5记三分早早建立两位数领先奠定胜局......</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">马刺击败小牛</h4>
<p class="list-group-item-text">马刺抢七大战笑到最后,4:3击败小牛晋级下一轮,帕克32分,马刺老将吉诺比利发挥出色,砍下20分5助攻6抢断的全能数据......</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">奇才102 :96步行者</h4>
<p class="list-group-item-text">今天步行者和奇才这组对决展开了首场比赛的较量,奇才全队表现出色,在阿里扎、比尔猛烈的三分火力下,一直领先保持到比赛结束......</p>
</a>
</div>
列表组后可以有徽章功能
<ul class="list-group">
<li class="list-group-item">
<span class="badge">52</span>
中国队金牌
</li>
<li class="list-group-item">
<span class="badge">48</span>
美国队金牌
</li>
<li class="list-group-item">
<span class="badge">41</span>
俄罗斯队金牌
</li>
</ul>
11 模态对话框
<h2>模态对话框插件</h2><hr>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal" id="myModal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel">对话框标题</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
12 标签页切换
<h2>标签页切换插件</h2><hr>
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">首页</a></li>
<li><a href="#profile" data-toggle="tab">概述</a></li>
<li><a href="#messages" data-toggle="tab">信息</a></li>
<li><a href="#settings" data-toggle="tab">设置</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">
<h3>欢迎来到Bootstrap 3的jQuery插件测试</h3>
</div>
<div class="tab-pane" id="profile">
<p>这里用于提供Bootstrap 3的jQuery插件的测试用例,并提供讲解</p>
</div>
<div class="tab-pane" id="messages">信息</div>
<div class="tab-pane" id="settings">设置</div>
</div>
13 tooltips提示框
<script>
$('.btn').tooltip();
</script>
<h2>Tooltip插件</h2><hr>
<!-- Tooltip, 必须显式的调用 $('.btn').tooltip(); -->
<a href="#" data-toggle="tooltip" data-placement="right" title="在右侧显示提示内容" class="btn btn-primary">工具提示</a>
<h2>点击弹出框插件</h2><hr>
<!-- Tooltip, 必须显式的调用 $('.btn').tooltip(); -->
<a href="javascript:void(0);" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="采用了点击事件触发,相比Tooltip可以显示更多、更正式的内容,并且可以配置更多样式。"
data-original-title="弹出框的应用">点击了解更多....</a>
14 按钮的 loading 状态
<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary"> 提交 </button>
$('#loading-example-btn').click(function () {
var btn = $(this)
btn.button('loading')
});
15 <h2>折叠插件</h2><hr>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
1 常见的表单中,标示和元素同一行的效果:
<h3>水平排列表单</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">邮 箱:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="请输入邮箱">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密 码:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码">
</div>
</div>
而分上下两行的效果
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">邮箱地址</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密 码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
</div>
2 常见按钮
<h2>按钮</h2>
<p>
<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>
</p>
<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>
<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 type="button" class="btn btn-default" disabled="disabled">默认</button>
其中增加disabled="disabled",标示为按钮不可点击状态
4)表格
<table class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>#</th>
<th>姓</th>
<th>名</th>
<th>昵称</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>李</td>
<td>四</td>
<td>拉里</td>
</tr>
<tr>
<td>2</td>
<td>王</td>
<td>五</td>
<td>博德</td>
</tr>
<tr>
<td>3</td>
<td>赵</td>
<td>四</td>
<td>詹姆斯</td>
</tr>
</tbody>
</table>
5 响应式工具
比如让某个工具栏,在小窗口和超小窗口下不显示
<div class="toolbar hidden-xs hidden-sm">
.. 其中针对xs,sm,md,lg等不同尺寸,都可以使用hidden或 visiable属性,分别为显示和不显示用
6 下拉菜单
<div class="container">
<h2>下拉菜单</h2><hr>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" 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>
7 按钮组
<div class="btn-group">
<button type="button" class="btn btn-default">左转弯</button>
<button type="button" class="btn btn-default">直行</button>
<button type="button" class="btn btn-default">右转弯</button>
</div>
8 input控件组
<h2>输入框组</h2><hr>
<div>
<div class="input-group col-xs-4">
<input type="text" class="form-control" placeholder="search">
<span class="input-group-addon">搜索</span>
</div>
<div class="input-group col-xs-4">
<input type="text" class="form-control" placeholder="search">
<span class="input-group-btn">
<input type="submit" value="搜索" class="btn btn-default">
</span>
</div>
<br>
</div>
9 导航
1) 胶囊导航
<h3>胶囊导航</h3>
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">简介</a></li>
<li><a href="#">详情</a></li>
</ul>
<br>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">简介</a></li>
<li><a href="#">详情</a></li>
</ul>
nav-stacked 为纵向的
2)面包导航
<h3>面包屑导航</h3>
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">资料库</a></li>
<li class="active">数据</li>
</ol>
3) 头部导航
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
</ul>
</div>
</nav>
10 列表组
<h2>列表组</h2><hr>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">快船战胜雷霆</h4>
<p class="list-group-item-text">雷霆和快船的第二轮第一场比赛在俄克拉荷马打响,客场作战快船凭借保罗第一节5记三分早早建立两位数领先奠定胜局......</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">马刺击败小牛</h4>
<p class="list-group-item-text">马刺抢七大战笑到最后,4:3击败小牛晋级下一轮,帕克32分,马刺老将吉诺比利发挥出色,砍下20分5助攻6抢断的全能数据......</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">奇才102 :96步行者</h4>
<p class="list-group-item-text">今天步行者和奇才这组对决展开了首场比赛的较量,奇才全队表现出色,在阿里扎、比尔猛烈的三分火力下,一直领先保持到比赛结束......</p>
</a>
</div>
列表组后可以有徽章功能
<ul class="list-group">
<li class="list-group-item">
<span class="badge">52</span>
中国队金牌
</li>
<li class="list-group-item">
<span class="badge">48</span>
美国队金牌
</li>
<li class="list-group-item">
<span class="badge">41</span>
俄罗斯队金牌
</li>
</ul>
11 模态对话框
<h2>模态对话框插件</h2><hr>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal" id="myModal" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="myModalLabel">对话框标题</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
12 标签页切换
<h2>标签页切换插件</h2><hr>
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">首页</a></li>
<li><a href="#profile" data-toggle="tab">概述</a></li>
<li><a href="#messages" data-toggle="tab">信息</a></li>
<li><a href="#settings" data-toggle="tab">设置</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">
<h3>欢迎来到Bootstrap 3的jQuery插件测试</h3>
</div>
<div class="tab-pane" id="profile">
<p>这里用于提供Bootstrap 3的jQuery插件的测试用例,并提供讲解</p>
</div>
<div class="tab-pane" id="messages">信息</div>
<div class="tab-pane" id="settings">设置</div>
</div>
13 tooltips提示框
<script>
$('.btn').tooltip();
</script>
<h2>Tooltip插件</h2><hr>
<!-- Tooltip, 必须显式的调用 $('.btn').tooltip(); -->
<a href="#" data-toggle="tooltip" data-placement="right" title="在右侧显示提示内容" class="btn btn-primary">工具提示</a>
<h2>点击弹出框插件</h2><hr>
<!-- Tooltip, 必须显式的调用 $('.btn').tooltip(); -->
<a href="javascript:void(0);" class="btn btn-lg btn-danger" data-toggle="popover" title="" data-content="采用了点击事件触发,相比Tooltip可以显示更多、更正式的内容,并且可以配置更多样式。"
data-original-title="弹出框的应用">点击了解更多....</a>
14 按钮的 loading 状态
<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary"> 提交 </button>
$('#loading-example-btn').click(function () {
var btn = $(this)
btn.button('loading')
});
15 <h2>折叠插件</h2><hr>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Collapsible Group Item #3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
发表评论
-
微信开发工具中时间问题的小坑
2018-02-07 19:07 826刚开始用微信小程序开发工具,每次运行任何应用,都报这个错误: ... -
三篇不错的介绍CSS GRID的文章
2017-12-06 09:08 553三篇不错的介绍CSS GRID的文章: http://www. ... -
双因素认证(2FA)教程
2017-11-03 09:16 1572http://www.ruanyifeng.com/blog/ ... -
es6 中的export
2017-08-20 08:00 822https://juejin.im/post/5998625f ... -
markdown中的空格
2017-08-20 07:53 1702即使手动输入空格, 也是很不推荐的方法。我推荐全角空格,切换 ... -
(转)讲真,别再使用JWT了
2017-08-17 23:21 1013不错的好文: http://insights.thoughtw ... -
(转)手把手教你WebStorm+chrome实现时时调试刷新
2017-08-15 10:50 3027参考: http://jingyan.baidu.com/ar ... -
IntelliJ Idea 2017 免费激活方法
2017-08-15 09:38 93221. 到网站 http://idea.lanyus.com/ ... -
前端框架这么多,该何去何从?
2017-08-04 07:17 649http://insights.thoughtworkers. ... -
记录一个HTML 5画拓扑图的商业公司
2017-07-18 19:56 850http://qunee.com/ DEMO:http:// ... -
vue 2例子学习收集
2017-07-16 11:46 10081 vue2.0手撸闲鱼App https://githu ... -
(收藏)虚拟DOM内部是如何工作的
2017-07-13 22:08 593虚拟DOM内部是如何工作的 https://segmentfa ... -
最近看到的几篇精彩JAVASCRIPT博客文章推荐
2017-07-11 07:10 569【深度长文】JavaScript数组所有API全解密 http ... -
jsonp 跨域原理:深入浅出 jsonp
2017-07-10 19:55 1431https://lzw.me/a/jsonp.html jso ... -
(转)深度长文-JavaScript数组所有API全解密
2017-07-08 19:59 824深度长文-JavaScript数组所有API全解密 http: ... -
(收藏)网页导出PDF的方案
2017-07-06 07:13 982(收藏)网页导出PDF的方案 https://yiqiwuli ... -
Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素
2017-06-28 12:37 1151https://juejin.im/post/59525195 ... -
国内一个不错的大屏UI设计厂家
2017-06-03 19:43 3160http://www.lanlanwork.com/dp.ph ... -
canvas仿芝麻信用分仪表盘
2017-05-28 20:21 1592canvas仿芝麻信用分仪表盘 https://segment ... -
(转)CSS 变量教程
2017-05-10 21:12 579http://www.ruanyifeng.com/blog/ ...
相关推荐
"bootstrap常用插件"这个主题,涉及到的是Bootstrap生态系统中的一些非核心但非常实用的扩展,它们可以进一步增强Bootstrap的基础功能,满足更复杂或特定的界面需求。 1. **轮播(Carousel)** Bootstrap的轮播...
这个“bootstrap常用功能样例”压缩包显然是一个包含各种Bootstrap功能演示的资源集合,非常适合初学者理解和学习Bootstrap的各种特性。 1. **响应式设计**:Bootstrap的核心特性之一就是响应式布局。它使用预定义...
### Bootstrap的常用组件和样式的深入解析 #### 栅格系统 栅格系统是Bootstrap框架中的核心组件之一,它能够帮助开发者快速构建响应式的布局。通过定义不同屏幕尺寸下的列宽,可以轻松实现网页在不同设备上的适配。...
下面将详细介绍Bootstrap输入框组件的使用方法。 首先,`<div class="input-group">` 是定义一个输入框组的基本结构。在这个div内部,我们可以放置一个或多个与输入相关的元素,如文本输入框、选择器、复选框等。 ...
文章首先提到了Bootstrap框架中的表格、表单验证、文件上传、复选下拉框、弹出框等常用组件。这些组件由于它们的实用性,已经被广大开发者所熟悉并应用在各种项目中。作者在文章中提到,他在此基础上又进一步发现并...
综上所述,"BootStrap布局常用控件整合"的资源包将涵盖Bootstrap的基础布局原理、常用UI组件的使用方法以及如何利用HTML5特性构建现代网页。通过学习和应用这些知识,开发者可以高效地创建功能强大且视觉美观的网页...
Bootstrap 日期组件是Web开发中常用的一个功能,它允许用户在网页上方便地选择和输入日期。Bootstrap,作为最流行且广泛使用的前端框架之一,提供了丰富的样式和交互设计,使得日期选择器在视觉效果和用户体验上都有...
以下是对Bootstrap输入框组件使用方法的详细解释: 1. **基本用法** Bootstrap 的输入框组件允许在输入框周围添加额外的元素,如图标或提示文本。通过将这些元素和输入框一起放入`.input-group`的容器内,可以创建...
这个“bootstrap案例35个常用案例”压缩包包含了一系列实用的示例,帮助开发者快速理解和掌握Bootstrap的强大功能。以下是这些案例中可能涉及的一些关键知识点: 1. **响应式设计**: Bootstrap的核心特性之一就是...
Bootstrap是一个前端开发框架,它基于HTML、CSS和JavaScript,并且提供了大量的预制组件,可以帮助开发者快速...在学习和使用Bootstrap时,重要的是掌握其栅格系统的原理和组件的使用方法,并注意其对jQuery的依赖性。
Bootstrap Switch 开关组件使用方法详解 Bootstrap Switch 开关组件是基于 Bootstrap 框架的开关控件,提供了灵活且美观的开关控件解决方案。以下是 Bootstrap Switch 开关组件的使用方法详解: 基本使用 首先,...
在Web应用中,分页是处理大量数据常用的方法,它将数据分割成多个页面,让用户逐页浏览,提高用户体验并减轻服务器负担。Vue.js中的分页组件通常包含页码显示、上一页、下一页、跳转到指定页等功能。 在这个Vue.js ...
这个“jquery常用组件打包下载”提供了一系列实用的jQuery插件,帮助开发者快速构建功能丰富的Web应用。 首先,让我们来了解一下jQuery库的核心特性: 1. **选择器**:jQuery提供了一种强大的CSS选择器语法,使得...
在本压缩包文件中,我们重点探讨的是Bootstrap的可编辑表格、下拉框和日期控件,这些是网页表单和数据展示中常用且实用的功能。 首先,让我们详细了解一下Bootstrap的可编辑表格。Bootstrap可编辑表格是一种允许...
通过访问官方文档(http://www.kuitao8.com/demo/20140224/1/bootstrap-multiselect-master/index.html),你可以了解详细的配置和用法,包括设置选项、获取选中值和文本、处理选项分组等。 在实际开发中,多选框的...
Bootstrap 图片上传插件是一种广泛应用于网页设计中的组件,它结合了jQuery库,使得在网页上实现多张图片的上传变得更加便捷。Bootstrap以其简洁、直观的界面设计和强大的响应式功能,深受开发者喜爱,而jQuery则...
3. **UI-Router与Bootstrap导航**:在AngularJS中,UI-Router是常用的路由管理库,它可以配合Bootstrap的导航条组件,实现基于URL的页面切换,提供更复杂的路由结构。 4. **响应式设计与AngularJS**:Bootstrap的...
3. **初始化日历**:在文档加载完成后,使用jQuery选择器找到目标元素,并调用插件的初始化方法。 ```javascript $(document).ready(function() { $('#calendar').yearCalendar({ // 配置项 }); }); ``` 4. *...
在Bootstrap中,柱状图是一种常用的数据可视化元素,它可以帮助用户直观地理解各种数据的对比和分布。Bootstrap柱状图插件通常基于JavaScript库,如jQuery或Chart.js,来增强其功能和交互性。 柱状图是数据可视化的...