全面解析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 相关文章推荐
网络图片延迟加载实现代码 超越jquery控件
Mar 27 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
Node.js中child_process实现多进程
Feb 03 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
Ionic快速安装教程
Jun 03 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 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 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
php实现购物车功能(下)
2016/01/05 PHP
微信利用PHP创建自定义菜单的方法
2016/08/01 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
用JS操作FRAME中的IFRAME及其内容的实现代码
2008/07/26 Javascript
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
利用JS延迟加载百度分享代码,提高网页速度
2013/07/01 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
python中pygame针对游戏窗口的显示方法实例分析(附源码)
2015/11/11 Python
Python用UUID库生成唯一ID的方法示例
2016/12/15 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
Pytorch 图像变换函数集合小结
2021/02/01 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
无畏的旅行:Intrepid Travel
2017/12/20 全球购物
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
工程业务员工作职责
2013/12/07 职场文书
先进德育工作者事迹材料
2014/01/24 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
小学生常见病防治方案
2014/06/06 职场文书
学校与家长安全责任书
2014/07/23 职场文书
作风建设整改方案
2014/10/27 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
表扬通报怎么写
2015/01/16 职场文书