Bootstrap布局组件应用实例讲解


Posted in Javascript onFebruary 17, 2016

本文实例介绍了Bootstrap布局组件应用实践,分享给大家供大家参考,具体内容如下

字体图标的应用示例

<button type="button" class="btn btn-default">
 <span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>

下拉菜单示例

<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" class="dropdown-header">下拉菜单标题</li>
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#">选项1</a>
 </li>
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#">选项2</a>
 </li>
 <li role="presentation"> 
 <a role="menuitem" tabindex="-1" href="#">选项3</a>
 </li>
 <li role="presentation" class="divider"></li><!--分割线-->
 <li role="presentation">
 <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
 </li>
 </ul>
</div>

按钮工具栏与按钮组

<div class="btn-toolbar" role="toolbar"><!--用来嵌套btn-group-->
 <div class="btn-group btn-group-lg">
 <!--btn-group-lg用来控制按钮组的大小,bt-group-vertical是垂直的按钮组,bt-group也可以嵌套bt-group-->
 <button type="button" class="btn btn-default">Button 1</button>
 <button type="button" class="btn btn-default">Button 2</button>
 <button type="button" class="btn btn-default">Button 3</button>
 </div>
 <div class="btn-group btn-group-sm">
 <button type="button" class="btn btn-default">Button 4</button>
 <button type="button" class="btn btn-default">Button 5</button>
 <button type="button" class="btn btn-default">Button 6</button>
 </div>
 <div class="btn-group btn-group-xs">
 <button type="button" class="btn btn-default">Button 7</button>
 <button type="button" class="btn btn-default">Button 8</button>
 <button type="button" class="btn btn-default">Button 9</button>
 </div>
</div>

按钮下拉菜单

<div class="btn-group"><!--加类.dropup可以变成按钮上拉菜单-->
 <button type="button" class="btn btn-default dropdown-toggle" 
 data-toggle="dropdown"> <!-- 加类.btn-xs之类的东西改变按钮大小-->
 默认 <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>

表单中的输入框组

<form class="bs-example bs-example-form" role="form">
 <div class="input-group input-group-lg"><!--input-group-lg调整输入框组大小-->
 <input type="text" class="form-control">
 <span class="input-group-addon">.00</span>
 </div>
 <br>
 <div class="input-group">
 <span class="input-group-addon">
 <input type="checkbox"><!--复选框和单选框都能应用于输入框组-->
 </span>
 <input type="text" class="form-control">
 </div>
 <br>
 <div class="input-group">
 <input type="text" class="form-control">
 <span class="input-group-btn"><!--按钮也能应用于输入框组请注意这里的类变为了input-group-btn,甚至可以加上前面的按钮下拉菜单-->
 <button class="btn btn-default" type="button">
 Go!
 </button>
 </span>
 </div>
 </form>

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是关于Bootstrap布局组件应用的部分内容,希望对大家的学习有所帮助,继续关注。

Javascript 相关文章推荐
一个符号插入器 中用到的js代码
Sep 04 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
Jquery的基本对象转换和文档加载用法实例
Feb 25 Javascript
JavaScript更改字符串的大小写
May 07 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
Apr 25 Javascript
深入php面向对象、模式与实践
Feb 16 #Javascript
三个js循环的关键字示例(for与while)
Feb 16 #Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 #Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 #Javascript
深入浅析AngularJS和DataModel
Feb 16 #Javascript
Javascript中的Prototype到底是什么
Feb 16 #Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 #Javascript
You might like
PHP中调用JAVA
2006/10/09 PHP
php 数组使用详解 推荐
2011/06/02 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
Linux系统中设置多版本PHP共存配合Nginx服务器使用
2015/12/21 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
javascript编程起步(第五课)
2007/01/10 Javascript
JavaScript基础知识之数据类型
2012/08/06 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
2020/02/03 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
神经网络python源码分享
2017/12/15 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
python判断无向图环是否存在的示例
2019/11/22 Python
证婚人经典证婚词
2014/01/09 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
2014年教研员工作总结
2014/12/23 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
开学第一天的感想
2015/08/10 职场文书
2016年“我们的节日·端午节”活动总结
2016/04/01 职场文书
Python面向对象编程之类的概念
2021/11/01 Python
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL