1、字形图标:

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px; color:#000000;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

2、下拉菜单：

<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="#">Java</a></li>
      <li role="presentation" class="divider"></li>
      <li role="presentation" class="dropdown-header">下拉菜单标题</li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">分离的链接</a></li>
   </ul>
</div>

3、按钮组：

垂直的按钮组：.btn-group-vertical

<div class="btn-group">
  <button type="button" class="btn btn-default">按钮 1</button>
  <button type="button" class="btn btn-default">按钮 2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下列<span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">下拉链接 1</a></li>
      <li><a href="#">下拉链接 2</a></li>
    </ul>
  </div>
</div>

4、按钮下拉菜单：

按钮大小：.btn-large、.btn-sm 或 .btn-xs

按钮上拉菜单：只需要简单地向父 .btn-group 容器添加 .dropup 即可

<div class="btn-group">
   <button type="button" class="btn btn-default">默认</button>
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><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>

5、输入框组：

<form class="bs-example bs-example-form" role="form">
      <div class="input-group">
         <span class="input-group-addon">@</span>
         <input type="text" class="form-control" placeholder="twitterhandle">
      </div>
      <br>
      <div class="input-group">
         <input type="text" class="form-control">
         <span class="input-group-addon">.00</span>
      </div>
　　  <div class="input-group">
         <div class="input-group-btn">
           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉菜单<span class="caret"></span></button>
              <ul class="dropdown-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><!-- /btn-group -->
        <input type="text" class="form-control">
    </div>
</form>

6、导航：

<p>标签式的导航菜单</p>
<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
</ul>
<p>基本的胶囊式导航菜单</p>
<ul class="nav nav-pills">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</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>
   <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>
   <li class="disabled"><a href="#">iOS（禁用链接）</a></li>
   <li><a href="#">VB.Net</a></li>
</ul><br><br>
<p>带有下拉菜单的标签</p>
<ul class="nav nav-tabs">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Java <span class="caret"></span></a>
      <ul class="dropdown-menu">
         <li><a href="#">Swing</a></li>
         <li><a href="#">jMeter</a></li>
         <li><a href="#">EJB</a></li>
         <li class="divider"></li>
         <li><a href="#">分离的链接</a></li>
      </ul>
   </li>
   <li><a href="#">PHP</a></li>
</ul>
<p>带有下拉菜单的胶囊</p>
<ul class="nav nav-pills">
   <li class="active"><a href="#">Home</a></li>
   <li><a href="#">SVN</a></li>
   <li><a href="#">iOS</a></li>
   <li><a href="#">VB.Net</a></li>
   <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Java <span class="caret"></span></a>
      <ul class="dropdown-menu">
         <li><a href="#">Swing</a></li>
         <li><a href="#">jMeter</a></li>
         <li><a href="#">EJB</a></li>
         <li class="divider"></li>
         <li><a href="#">分离的链接</a></li>
      </ul>
   </li>
   <li><a href="#">PHP</a></li>
</ul>

7、导航栏：

<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">
         <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>
            </ul>
         </li>
      </ul>
   </div>
</nav>
导航栏中的表单与按钮
<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <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>
</nav>
导航栏中的文本
<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <p class="navbar-text navbar-right">Signed in as
         <a href="#" class="navbar-link">Thomas</a>
      </p>
   </div>
</nav>
对齐
<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-left">
         <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>
            </ul>
         </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
         <button type="submit" class="btn btn-default">
            向左对齐-提交按钮
         </button>
      </form>
      <p class="navbar-text navbar-left">向左对齐-文本</p>
      <!--向右对齐-->
      <ul class="nav navbar-nav navbar-right">
         <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>
            </ul>
         </li>
      </ul>
      <form class="navbar-form navbar-right" role="search">
         <button type="submit" class="btn btn-default">
            向右对齐-提交按钮
         </button>
      </form>
      <p class="navbar-text navbar-right">向右对齐-文本</p>
   </div>
</nav>
固定到顶部
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
      </ul>
   </div>
</nav>
固定到底部
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
</nav>
随页面滚动的导航栏
<nav class="navbar navbar-default navbar-static-top" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
      </ul>
   </div>
</nav>
倒置的导航栏
<nav class="navbar navbar-inverse" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">W3Cschool</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">iOS</a></li>
         <li><a href="#">SVN</a></li>
      </ul>
   </div>
</nav>

8、面包屑导航

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

9、分页

分页状态：.disabled、.active

分页大小：pagination-lg,pagination,pagination-sm

<ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><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>

10、标签

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

11、徽章：

<a href="#">Mailbox <span class="badge">50</span></a>

12、超大屏幕

带圆角
<div class="container">
   <div class="jumbotron">
      <h1>欢迎登陆页面！</h1>
      <p>这是一个超大屏幕（Jumbotron）的实例。</p>
      <p><a class="btn btn-primary btn-lg" role="button">
         学习更多</a>
      </p>
   </div>
</div>
不带圆角
<div class="jumbotron">
   <div class="container">
      <h1>欢迎登陆页面！</h1>
      <p>这是一个超大屏幕（Jumbotron）的实例。</p>
      <p><a class="btn btn-primary btn-lg" role="button">
         学习更多</a>
      </p>
   </div>
</div>

13、页面标题

<div class="page-header">
   <h1>页面标题实例
      <small>子标题</small>
   </h1>
</div>
<p>这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。这是一个示例文本。</p>

14、缩略图

<div class="col-sm-6 col-md-3">
      <div 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>

15、警告

<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-danger">错误！请进行一些更改。</div>
可取消的
<div class="alert alert-danger alert-dismissable">
   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>错误！请进行一些更改。
</div>
16、进度条
<div class="progress">
   <div class="progress-bar" role="progressbar" aria-valuenow="60"
      aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
      <span class="sr-only">40% 完成</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: 90%;">
      <span class="sr-only">90% 完成（成功）</span>
   </div>
</div>
条纹的进度条
<div class="progress progress-striped">
   <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 progress-striped active">
   <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>

17、多媒体对象

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

18、列表组

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

19、面板

<div class="panel panel-primary">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-success">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-info">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-warning">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-danger">
   <div class="panel-heading">
      <h3 class="panel-title">面板标题</h3>
   </div>
   <div class="panel-body">
      这是一个基本的面板
   </div>
</div>
<div class="panel panel-default">
   <div class="panel-heading">面板标题</div>
      <div class="panel-body">
         <p>这是一个基本的面板内容。这是一个基本的面板内容。
         这是一个基本的面板内容。这是一个基本的面板内容。
         这是一个基本的面板内容。这是一个基本的面板内容。
         这是一个基本的面板内容。这是一个基本的面板内容。
         </p>
   </div>
   <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>

20、Well

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

Bootstrap 新手学习笔记——布局组件的更多相关文章

  1. bootstrap 新手学习笔记 代码整理

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Bootstrap新手学习笔记——css

    Css模块: 1.网格系统: class前缀:.col-xs-*,.col-sm-*,.col-md-*,.col-lg-* <div class="container"&g ...

  3. Bootstrap学习笔记-布局

    Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html><head> <meta charset="utf- ...

  4. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  5. Android学习笔记⑤——UI组件的学习TextView相关

    TextView是一个强大的视图组件,直接继承了View,同时也派生出了很多子类,TextView其作用说白了就是在布局中显示文本,有点像Swing编程中的JLabel标签,但是他比JLabel强大的 ...

  6. .net core学习笔记，组件篇：服务的注册与发现（Consul）初篇

    1.什么是服务注册中心? 在学习服务注册与发现时,我们要先搞明白到底什么是服务注册与发现. 在这里我举一个生活中非常普遍的例子——网购来简单说明,网购在我们日常生活中已经是非常普遍了,其实网购中的(商 ...

  7. Angular4.0从入门到实战打造在线竞拍网站学习笔记之一--组件

    Angular4.0基础知识之组件 Angular4.0基础知识之路由 Angular4.0依赖注入 Angular4.0数据绑定&管道 最近搞到手了一部Angular4的视频教程,这几天正好 ...

  8. Android学习笔记⑧——UI组件的学习AdapterView相关2

    前面都是用ListView控件来配合Adapter做的一些实例,这次我们来见识一下GridView与Adapter之间的爱恨情仇.... GridView是用于在界面上按行.列分布的方式来显示多个的组 ...

  9. Android学习笔记⑦——UI组件的学习AdapterView相关1

    AdapterView是一个非常重要的组件之一,他非常灵活,所以得好好学...AdapterView本身是一个抽象类,派生出来的子类用法也十分相似,只是界面有一定的区别,因此本节把他们归为一类 Ada ...

随机推荐

  1. 在C#代码中应用Log4Net 中配置文件的解释

    一个完整的配置文件的例子如下所示,这个是”在C#代码中应用Log4Net(二)”中使用的配置文件. <log4net> <!-- 错误日志类--> <logger nam ...

  2. An Introduction to Interactive Programming in Python (Part 1) -- Week 2_2 练习

    #Practice Exercises for Logic and Conditionals # Solve each of the practice exercises below. # 1.Wri ...

  3. JavaScript标记上的defer与async的作用与区别

    当浏览器遇到 script 标签时,文档的解析将停止,并立即下载并执行脚本,脚本执行完毕后将继续解析文档.但是我们可以将脚本标记为 defer,这样就不会停止文档解析,等到文档解析完成才执行脚本,也可 ...

  4. tabbar的自定义

    [self createCustomTabBar]; -(void)createCustomTabBar{    //创建一个UIImageView,作为底图    UIImageView *bgVi ...

  5. Opencv step by step - 加载视频

    刚买了本 "学习Opencv" 这本书,慢慢看起来. 一开始就是加载视频了.当然了,首先你要有个视频 从这里下载了一个: tan@ubuntu:~$ wget http://www ...

  6. C/C++程序从编译到链接的过程

    编译器是一个神奇的东西,它能够将我们所编写的高级语言源代码翻译成机器可识别的语言(二进制代码),并让程序按照我们的意图按步执行.那么,从编写源文件代码到可执行文件,到底分为几步呢?这个过程可以总结为以 ...

  7. redis async client 与自有框架集成

    hiredis的异步接口已经支持ae libuv libev 和 libevent集成,具体头文件可以参见redis/deps/hiredis/adapters,样例参见redis/deps/hire ...

  8. [BZOJ 2456]Mode（神奇的抵销）

    题意:求一串数的众数(保证次数的出现次数超过一半),n<=500000 很简单是不是……快拍一下不就行了吗,不超时呢=W=,不过……尼玛空间只有1M…… 于是此题就成了神题(理解成智商题= =本 ...

  9. [设计模式] javascript 之 代理模式

    代理模式说明 说明:顾名思义就是用一个类来代替另一个类来执行方法功能,这个模式跟装饰模式有点相似,不一样的是,代理模式是代替客户初始化被代理对象类,而装饰模式采用接口或初装饰者参数引用的方式来执行的. ...

  10. jQuery基础之（五）jQuery自定义添加"$"与解决"$"的冲突

    1.自定义添加$ 从上面四篇文章我们看到jQuery的强大,但无论如何,jQuery都不可能满足所有用户的需求,而且有一些需求十分小众,也不适合放到整个jQuery框架中,正是因为这一点,jQuery ...