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拖拽(第一课 未兼容)拖拽思路
Mar 29 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
vue2中filter()的实现代码
Jul 09 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
原生JS 购物车及购物页面的cookie使用方法
Aug 21 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 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 采集程序 常用函数
2008/12/18 PHP
php 购物车的例子
2009/05/04 PHP
php xml常用函数的集合(比较详细)
2013/06/06 PHP
PHP strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
PHP将XML转数组过程详解
2013/11/13 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
php layui实现前端多图上传实例
2019/07/30 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
use jscript Create a SQL Server database
2007/06/16 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
javascript实现省市区三级联动下拉框菜单
2015/11/17 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
Angularjs中的ui-bootstrap的使用教程
2017/02/19 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
详解Vue 匿名、具名和作用域插槽的使用方法
2019/04/22 Javascript
vue-cli3+typescript新建一个项目的思路分析
2019/08/06 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
在Python编程过程中用单元测试法调试代码的介绍
2015/04/02 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
学生信息管理系统python版
2018/10/17 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
python中线程和进程有何区别
2020/06/17 Python
企业车辆管理制度
2014/01/24 职场文书
幼儿园新年寄语
2014/04/03 职场文书
Python初学者必备的文件读写指南
2021/06/23 Python
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
Android开发之WECHAT微信小程序路由跳转的两种形式
2022/04/12 Java/Android