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 相关文章推荐
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 Javascript
小程序自定义轮播图圆点组件
Jun 25 Javascript
JS前端轻量fabric.js系列之画布初始化
Aug 05 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实现点击可刷新验证码
2015/11/07 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
2013/05/28 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
JavaScipt中栈的实现方法
2016/02/17 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
深入理解AngularJS中的ng-bind-html指令
2017/03/27 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
使用Python来开发Markdown脚本扩展的实例分享
2016/03/04 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python操作xlsx文件的包openpyxl实例
2018/05/03 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
对pandas的算术运算和数据对齐实例详解
2018/12/22 Python
Python多图片合并PDF的方法
2019/01/03 Python
使用python去除图片白色像素的实例
2019/12/12 Python
法律进企业活动方案
2014/03/04 职场文书
大学新闻系求职信
2014/06/03 职场文书
团日活动总结怎么写
2014/06/25 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
浅谈Mysql多表连接查询的执行细节
2021/04/24 MySQL
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
解析目标检测之IoU
2021/06/26 Python
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers