全面解析Bootstrap布局组件应用


Posted in Javascript onFebruary 22, 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>

导航(tab标签页)

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs"><!--加上类nav-justified可以让导航两端对齐-->
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
 <li><a href="#">iOS</a></li>
</ul>
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
</ul>
<p>垂直的胶囊式导航菜单</p>
<ul class="nav nav-pills nav-stacked">
 <li class="active"><a href="#">Home</a></li>
 <li><a href="#">SVN</a></li>
</ul>

 导航栏

<nav class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <a class="navbar-brand" href="#">W3Cschool</a>
 </div>
 <div>
  <ul class="nav navbar-nav"><!--.navbar-fixed-top和.navbar-fixed-bottom可以使导航栏固定在顶部和底部, .navbar-static-top会使导航栏随页面滚动吗, .navbar-inverse实现背景颜色和文字颜色互换-->
   <li class="active"><a href="#">iOS</a></li>
   <li><a href="#">SVN</a></li>
   <li class="dropdown">
   <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    Java 
    <b class="caret"></b>
   </a>
   <ul class="dropdown-menu">
    <li><a href="#">jmeter</a></li>
    <li><a href="#">EJB</a></li>
    <li><a href="#">Jasper Report</a></li>
    <li class="divider"></li>
    <li><a href="#">分离的链接</a></li>
   </ul>
   </li>
  </ul>
  <!--导航栏中的表单-->
  <form class="navbar-form navbar-left" role="search">
   <div class="form-group">
   <input type="text" class="form-control" placeholder="Search">
   </div>
   <button type="submit" class="btn btn-default">提交</button>
  </form>
  <!--导航栏按钮-->
  <button type="button" class="btn btn-default navbar-btn">
   导航栏按钮
  </button>
  <!--导航栏文本-->
  <div class="navbar-text navbar-right">
    <p >导航栏文本 <a href="#" class="navbar-link">我是链接</a></p>
   </div>
  <!--navbar-left和navbar-right可以实现向左和向右对齐-->
 </div>
</nav>

响应式的导航栏

以下金黄色部分为对一般的导航栏的区别

<nav class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" 
   data-target="#example-navbar-collapse">
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span><!--下面有几个选项这里就有几个iconbar-->
  </button>
  <a class="navbar-brand" href="#">W3Cschool</a>
 </div>
 <div class="collapse navbar-collapse" id="example-navbar-collapse">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#">iOS</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">Troy</a></li>
  </ul>
 </div>
</nav>

面包屑导航

<ol class="breadcrumb">
 <li><a href="#">Home</a></li>
 <li><a href="#">2013</a></li>
 <li class="active">十一月</li>
</ol>

分页和翻页

<!--以下所有示例都可以用disabled和active类来控制激活和禁用-->
<!--分页-->
<ul class="pagination"><!--pagination-sm和pagination-lg来控制分页的大小-->
 <li><a href="#">«</a></li>
 <li class="active"><a href="#">1</a></li>
 <li class="disabled"><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li><a href="#">»</a></li>
</ul>
<!--翻页-->
<ul class="pager">
 <li><a href="#">Previous</a></li>
 <li><a href="#">Next</a></li>
</ul>
<!--翻页-->
<ul class="pager">
 <li class="previous"><a href="#">← Older</a></li>
 <li class="next"><a href="#">Newer →</a></li>
</ul>

标签

<span class="label label-default">默认标签</span>
<span class="label label-primary">主要标签</span>
<span class="label label-success">成功标签</span>
<span class="label label-info">信息标签</span>
<span class="label label-warning">警告标签</span>
<span class="label label-danger">危险标签</span>

徽章

徽章比标签更圆滑,主要用于突出显示新的或未读的项

<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
 <li class="active">
  <a href="#">
   <span class="badge pull-right">42</span>
   首页
  </a>
 </li>
 <li><a href="#">简介</a></li>
 <li>
  <a href="#">
   <span class="badge pull-right">3</span>
   消息
  </a>
 </li>
</ul>

超大屏幕

<div class="jumbotron">
 <div class="jumbotron">
  <h1>欢迎登陆页面!</h1>
  <p>这是一个超大屏幕(Jumbotron)的实例。</p>
  <p><a class="btn btn-primary btn-lg" role="button">
   学习更多</a>
  </p>
 </div>
</div>
<!--翻过来jumbotron包着jumbotron就会得到一个不带圆角且占更多宽度的超大屏幕-->

页面标题示例

<div class="page-header">
 <h1>页面标题实例
  <small>子标题</small>
 </h1>
</div>

缩略图

<div href="#" class="thumbnail">
   <img src="/wp-content/uploads/2014/06/kittens.jpg" 
   alt="通用的占位符缩略图">
  </div>
  <div class="caption">
   <h3>缩略图标签</h3>
   <p>一些示例文本。一些示例文本。</p>
   <p>
   <a href="#" class="btn btn-primary" role="button">
    按钮
   </a> 
   <a href="#" class="btn btn-default" role="button">
    按钮
   </a>
   </p>
  </div>

警告

<div class="alert alert-success alert-dismissable"><!--alert-dismissable为可删除警告-->
 <button type="button" class="close" data-dismiss="alert" 
  aria-hidden="true">
  ×
 </button>
 成功!很好地完成了提交。
</div>
<div class="alert alert-info alert-dismissable">
 <button type="button" class="close" data-dismiss="alert" 
  aria-hidden="true">
  ×
 </button>
 <a href="#" class="alert-link">成功!很好地完成了提交。</a><!--警告中的标签-->
</div>
<div class="alert alert-warning alert-dismissable">
 <button type="button" class="close" data-dismiss="alert" 
  aria-hidden="true">
  ×
 </button>
 警告!请不要提交。
</div>
<div class="alert alert-danger alert-dismissable">
 <button type="button" class="close" data-dismiss="alert" 
  aria-hidden="true">
  ×
 </button>
 错误!请进行一些更改。
</div>

进度条

<!--一般进度条-->
<div class="progress progress-striped active"><!--progress-striped为加条纹,加active条纹会产生动画效果-->
 <!--progress-bar-info progress-bar-warning progress-bar-danger progress-bar-success 会给进度条不同颜色,不加就是最基本的-->
 <div class="progress-bar progress-bar-success" role="progressbar" 
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  
  style="width: 90%;">
  <span class="sr-only">90% 完成(成功)</span>
 </div>
</div>
<!---堆叠的进度条-->
<div class="progress">
 <div class="progress-bar progress-bar-success" role="progressbar" 
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" 
  style="width: 40%;">
  <span class="sr-only">40% 完成</span>
 </div>
 <div class="progress-bar progress-bar-info" role="progressbar" 
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  
  style="width: 30%;">
  <span class="sr-only">30% 完成(信息)</span>
 </div>
 <div class="progress-bar progress-bar-warning" role="progressbar" 
  aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"  
  style="width: 20%;">
  <span class="sr-only">20% 完成(警告)</span>
 </div>
</div>

媒体标签

.media:该 class 允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的左边或者右边。
.media-list:如果你需要一个列表,各项内容是无序列表的一部分,可以使用该 class。可用于评论列表与文章列表。

<ul class="media-list">
 <li class="media">
  <a class="pull-left" href="#">
   <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
   alt="通用的占位符图像">
  </a>
  <div class="media-body">
   <h4 class="media-heading">媒体标题</h4>
   <p>这是一些示例文本。这是一些示例文本。 
   这是一些示例文本。这是一些示例文本。
   这是一些示例文本。这是一些示例文本。
   这是一些示例文本。这是一些示例文本。
   这是一些示例文本。这是一些示例文本。</p>
   <!-- 嵌套的媒体对象 -->
   <div class="media">
   <a class="pull-left" href="#">
    <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
    alt="通用的占位符图像">
   </a>
   <div class="media-body">
    <h4 class="media-heading">嵌套的媒体标题</h4>
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
    <!-- 嵌套的媒体对象 -->
    <div class="media">
     <a class="pull-left" href="#">
      <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
      alt="通用的占位符图像">
     </a>
     <div class="media-body">
      <h4 class="media-heading">嵌套的媒体标题</h4>
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
     </div>
    </div>
   </div>
   </div>
   <!-- 嵌套的媒体对象 -->
   <div class="media">
   <a class="pull-left" href="#">
    <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
    alt="通用的占位符图像">
   </a>
   <div class="media-body">
    <h4 class="media-heading">嵌套的媒体标题</h4>
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
    这是一些示例文本。这是一些示例文本。
   </div>
   </div>
  </div>
 </li>
 <li class="media">
  <a class="pull-right" href="#">
   <img class="media-object" src="/wp-content/uploads/2014/06/64.jpg" 
   alt="通用的占位符图像">
  </a>
  <div class="media-body">
   <h4 class="media-heading">媒体标题</h4>
   这是一些示例文本。这是一些示例文本。
   这是一些示例文本。这是一些示例文本。
   这是一些示例文本。这是一些示例文本。
   这是一些示例文本。这是一些示例文本。
   这是一些示例文本。这是一些示例文本。
  </div>
 </li>
</ul>

列表组

<!--一般列表组-->
<ul class="list-group">
 <li class="list-group-item">免费域名注册</li>
 <li class="list-group-item">
  <span class="badge">新</span>
  24*7 支持
 </li>
 <li class="list-group-item">每年更新成本</li>
 <li class="list-group-item">
  <span class="badge">新</span>
  折扣优惠
 </li>
</ul>
<!--自定义列表组-->
<div class="list-group">
 <a href="#" class="list-group-item active">
  <h4 class="list-group-item-heading">
   入门网站包
  </h4>
 </a>
 <a href="#" class="list-group-item">
  <h4 class="list-group-item-heading">
   免费域名注册
  </h4>
  <p class="list-group-item-text">
   您将通过网页进行免费域名注册。
  </p>
 </a>
 <a href="#" class="list-group-item">
  <h4 class="list-group-item-heading">
   24*7 支持
  </h4>
  <p class="list-group-item-text">
   我们提供 24*7 支持。
  </p>
 </a>
</div>

面板

<div class="panel panel-default"><!--可替代panel-default的类:panel-primary,panel-success,panel-info,panel-warning,panel-danger-->
 <div class="panel-heading">
  <h3 class="panel-title">
   带有 title 的面板标题
  </h3>
 </div>
 <div class="panel-body">
  面板内容
 </div>
 <!---带表格-->
 <table class="table">
  <th>产品</th><th>价格 </th>
  <tr><td>产品 A</td><td>200</td></tr>
  <tr><td>产品 B</td><td>400</td></tr>
 </table>
 <!---带列表组-->
 <ul class="list-group">
  <li class="list-group-item">免费域名注册</li>
  <li class="list-group-item">免费 Window 空间托管</li>
  <li class="list-group-item">图像的数量</li>
  <li class="list-group-item">24*7 支持</li>
  <li class="list-group-item">每年更新成本</li>
 </ul>
  <div class="panel-footer">面板脚注</div>
</div>

well效果

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>

<div class="well well-lg">您好,我在大的 Well 中!</div>
<div class="well well-sm">您好,我在小的 Well 中!</div>

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

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
用js判断浏览器是否是IE的比较好的办法
May 08 Javascript
javascript搜索框效果实现方法
May 14 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
Vue中使用clipboard实现复制功能
Sep 05 Javascript
H5实现手机拍照和选择上传功能
Dec 18 Javascript
React冒泡和阻止冒泡的应用详解
Aug 18 Javascript
vue制作toast组件npm包示例代码
Oct 29 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 #Javascript
JavaScript function函数种类详解
Feb 22 #Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
Feb 22 #Javascript
jQuery获取字符串中出现最多的数
Feb 22 #Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 #Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 #Javascript
javascript实现一个简单的弹出窗
Feb 22 #Javascript
You might like
PHP Mysql编程之高级技巧
2008/08/27 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
jQuery实现返回顶部功能
2016/02/23 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
nodejs使用express创建一个简单web应用
2017/03/31 NodeJs
javascript数组去重常用方法实例分析
2017/04/11 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
Python中类的初始化特殊方法
2017/12/01 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
numpy返回array中元素的index方法
2018/06/27 Python
python利用跳板机ssh远程连接redis的方法
2019/02/19 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
详解Python3 pandas.merge用法
2019/09/05 Python
Python线程指南分享
2019/11/19 Python
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
应届毕业生求职信范文
2014/07/07 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2014年司机工作总结
2014/11/21 职场文书
协议书范文
2015/01/27 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript