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 相关文章推荐
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
浅谈javascript回调函数
Dec 07 Javascript
原生javascript获取元素样式
Dec 31 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
Mar 08 Javascript
微信小程序 实现动态显示和隐藏某个控件
Apr 27 Javascript
JS实现json的序列化和反序列化功能示例
Jun 13 Javascript
详解VUE中v-bind的基本用法
Jul 13 Javascript
vue中使用sessionStorage记住密码功能
Jul 24 Javascript
JavaScript实现随机点名器实例详解
May 07 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
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
ThinkPHP查询语句与关联查询用法实例
2014/11/01 PHP
ThinkPHP中url隐藏入口文件后接收alipay传值的方法
2014/12/09 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
如何基于jQuery实现五角星评分
2020/09/02 jQuery
[48:37]EG vs OG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
python简单实现刷新智联简历
2016/03/30 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
python实现文本界面网络聊天室
2018/12/12 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
我的求职计划书
2014/01/10 职场文书
博士毕业生自我鉴定范文
2014/04/13 职场文书
离职证明标准格式
2014/09/15 职场文书
社区结对共建协议书
2016/03/23 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA
python实现学生信息管理系统(面向对象)
2022/06/05 Python
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS