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鼠标悬停特效具体方法
Jun 17 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
jquery心形点赞关注效果的简单实现
Nov 14 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
May 10 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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
swfupload 多文件上传实现代码
2008/08/27 PHP
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
php三元运算符知识汇总
2015/07/02 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
2016/07/24 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
移动端js图片查看器
2016/11/17 Javascript
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
对vue 键盘回车事件的实例讲解
2018/08/25 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
解决vscode进行vue格式化,会自动补分号和双引号的问题
2020/10/26 Javascript
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
基于python的列表list和集合set操作
2019/11/24 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
HTML5的video标签的浏览器兼容性增强方案分享
2016/05/19 HTML / CSS
英国最大的邮寄种子和植物公司:Thompson & Morgan
2017/09/21 全球购物
沪江旗下的海量优质课程平台:沪江网校
2017/11/07 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
2014年办公室主任工作总结
2014/11/12 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
Nginx实现负载均衡的项目实践
2022/03/18 Servers