【Bootstrap基础学习】02 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="#">&laquo;</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="#">&raquo;</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="#">&larr; Older</a></li>

  <li class="next"><a href="#">Newer &rarr;</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">

      &times;

   </button>

   成功！很好地完成了提交。

</div>

<div class="alert alert-info alert-dismissable">

   <button type="button" class="close" data-dismiss="alert"

      aria-hidden="true">

      &times;

   </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">

      &times;

   </button>

   警告！请不要提交。

</div>

<div class="alert alert-danger alert-dismissable">

   <button type="button" class="close" data-dismiss="alert"

      aria-hidden="true">

      &times;

   </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>

好了，终于从某网站上把示例都玩了一遍，啊，我的天。

算是自己都玩了一遍，每个示例类都用了一遍，如果是专业的前端什么的，把这些类的具体CSS写法看完，我觉得那一定进步比较大。

【Bootstrap基础学习】02 Bootstrap的布局组件应用示例的更多相关文章

Bootstrap基础学习 ---- 系列文章
[Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap ...
bootstrap基础学习【导航条、分页导航】（五）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
bootstrap基础学习【菜单、按钮、导航】（四）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
bootstrap基础学习【网格系统】（三）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
bootstrap基础学习【表单含按钮】（二）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
bootstrap基础学习【排版】（一）
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
Bootstrap基础学习(一)—表格与按钮
一.Bootstrap 概述 Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁 ...
【Bootstrap基础学习】00 序
其实这样的东西很多了,但是我就是要写. 我写这种鬼东西只是为了监督自己,如果能顺便帮一下别人就更好了. 这个系列的基础学习,不会去看实体书,主要是去看网上的资料和官网. Bootstrap就是对jQu ...
bootstrap基础学习小记（二）排版、列表、代码风格、表格
排版——标题.副标题.段落(正文文本).强调内容.粗体.斜体.强调相关的类.文本对齐 <!DOCTYPE HTML> <html> <head> <meta ...
Bootstrap 基础学习笔记（一）
排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值, h1~h3重置后的值都是20px:h4~h6重置后的值都 ...

随机推荐

桌面oracle 11g导入多年库的dump备忘
接到客户6G的dump文件.先导入桌面orcale ,imp提示出错,执行impdp后如下连接到: Oracle Database 11g Express Edition Release 11.2. ...
openssl 学习之从证书中提取RSA公钥N 和 E
原文链接: http://blog.csdn.net/kkxgx/article/details/19850509 通常数字证书包含很多信息,其中N和E值即我们称为的公钥.如何从PEM 或者DER格式 ...
js 当前日期增加自然月
js 在日期不满足的情况下就会自动加1个月,比如在当前时间为3月31号,传入1,1两个参数,预期结果为2月29日,但是结果输出了3月2日.就是如果不满就会溢出到下个月,后来看了api发现了setMon ...
开发Android必知的工具
程序开发有时候非常依赖使用的开发工具,好的完备的开发工具可以让开发人员的工作效率有大幅度的提高.开发Android也是如此,大家可能都离不开Eclipse或Android Studio这些工具,但他们 ...
Jdbc如何从PostgreSql读取海量数据？PostgreSql源代码分析纪录
前言: 最近做数据同步,需要从PostgreSql获取数据,发现一旦数据比较多,那么读取的速度非常慢,并且内存占用特别多&GC不掉. 代码样例: 为了方便讲解,下面写了事例代码,从b2c_or ...
Object-C Categories和Protocols
Category 要扩展一个不可修改的类,通常的做法是为该类创建一个子类,在子类中实现想要实现的方法,在Object-C中,可以通过category来实现,并且实现方式更为简单. 现在有如下定义:一个 ...
程序员之路：以Android证道
大道三千,何以证道? 最近有私信.邮件给我咨询一些职业生涯规划的同学,我在这里以过来人的身份给大家一些建议. 任何行业,任何职位,无论高低,无论大小,都可以分为广博.精深两个方向. 精深自然指的是在某 ...
创建 iPhone/iOS8 弹出菜单（窗口）
基本步骤添加视图:主视图与弹出视图关联视图配置弹出视图编码实现:弹出菜单样式及控制器委托 override func prepareForSegue(segue: UIStoryboardSe ...
Oracle数据库入门——常用的数据字典
一.oracle数据字典主要由以下几种视图构成:1.user视图以user_为前缀,用来记录用户对象的信息 2.all视图以all_为前缀,用来记录用户对象的信息及被授权访问的对象信息 3.dba视图 ...
VMware三个版本workstation、server、esxi的区别
VMware三个版本 workstation: 单机级,用在个人桌面系统中,需要操作系统支持 servier:工作组级,用于服务器,需要操作系统支持 esxi:企业级,用于服务器,不需要操作系统支持 ...

【Bootstrap基础学习】02 Bootstrap的布局组件应用示例

【Bootstrap基础学习】02 Bootstrap的布局组件应用示例的更多相关文章

随机推荐

热门专题