bootstrap组件 -- (笔记三)

 添加该 pagination样式来在页面上显示分页

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

分页的项也可以禁用与选中(disabled 与 active, 这两个样式几乎都是通用的)

<ul class="pagination">
  <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>

分页的大小(和按钮组那种类型, 整体调整大小 pagination-lg代表大, pagination-sm代表小)

<ul class="pagination pagination-lg">
	<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><br>
<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><br>
<ul class="pagination pagination-sm">
	<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>

翻页:

比如看小说, 有前一页, 后一页的标识

 使用page样式获得翻页链接

使用previous靠左, 使用next靠右(默认是居中的)

使用disabled禁用链接

<ul class="pager">
  <li class="previous disabled"><a href="#">上一页</a></li>
  <li class="next"><a href="#">下一页</a></li>
</ul>

bootstrap标签:

bootstrap标签指的是label样式, 这里不是指元素

标签可用于计数、提示或页面上其他的标记显示

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

bootstrap徽章:

徽章与标签相似，主要的区别在于徽章的边角更加圆滑

主要用于突出显示新的或未读的项

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

超大屏幕样式:

使用jumbotron样式支持超大屏幕特性

该组件可以增加标题(h1-h6, p标签等)的大小，并为它们添加更多的外边距, 整个内容带灰色背景

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

缩略图:

大多数站点都需要在网格中布局图像、视频、文本

Bootstrap 通过缩略图为此提供了一种简便的方式

创建缩略图需要在外面加上样式 thumbnail

此样式会添加四个像素的内边距（padding）和一个灰色的边框

<div class="row">
    <div class="col-sm-6 col-md-3">
        <div class="thumbnail">
            <img src="/wp-content/uploads/2014/06/kittens.jpg" alt="通用的占位符缩略图">
            <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>
    </div>
</div>

警告:

alert 使用文本居中, alert-*文本背景色

<div class="alert alert-success">成功！很好地完成了提交。</div>
<div class="alert alert-info">信息！请注意这个信息。</div>
<div class="alert alert-warning">警告！请不要提交。</div>
<div class="alert alert-danger">错误！请进行一些更改。</div>

可取消警告的文本(button带有data-dismissable='alert'属性)

<div class="alert alert-success alert-dismissable">
  <button type="button" class="close" data-dismiss="alert">
 	&times;
  </button>
  成功！很好地完成了提交。
</div>

在警告文本中也可以添加链接

<div class="alert alert-success">
  <a href="#" class="alert-link">成功！很好地完成了提交。</a>
</div>

进度条:

先创建一个带progress的div

再里面再创建一个带progress-bar的div, 并设置style的宽度表示当前的进度百分比

<div class="progress">
  <div class="progress-bar" style="width: 40%;"></div>
</div>

进度条的颜色( progress-bar-* )

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 90%;"></div>
</div>

条纹进度条(progress-striped)

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width: 90%;"></div>
</div>

动画进度条(progress-striped和active)

<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" style="width: 40%;"></div>
</div>

多种颜色进度条(把多个进度条放在相同的progress中)

<div class="progress">
	<div class="progress-bar progress-bar-success" style="width: 40%;"></div>
	<div class="progress-bar progress-bar-info" style="width: 30%;"></div>
	<div class="progress-bar progress-bar-warning" style="width: 20%;"></div>
</div>

多媒体对象:

包括图像、视频、音频等

我们可以在组件中使用 图文混排，图像可以左对齐或者右对齐

使用类样式media包裹, 扩展使用 media-left, media-body, media-right, media-heading等样式

在 <div> 元素上添加 .media 类来创建一个多媒体对象。

使用 .media-left 类让多媒体对象(图片)来实现左对齐，同样 .media-right 类实现了右对齐。

文本内容放在 class="media-body" 的 div 中

图片左对齐则放在 class="media-body" 之前，图片右对齐则放在 class="media-body" 之后。

还可以使用 .media-heading 类来设置标题

 <!-- 左对齐 -->
  <div class="media">
    <div class="media-left">
      <img src="http://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:60px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">左对齐</h4>
      <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    </div>
  </div>
  <hr>
  
  <!-- 右对齐 -->
  <div class="media">
    <div class="media-body">
      <h4 class="media-heading">右对齐</h4>
      <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
    </div>
    <div class="media-right">
      <img src="http://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:60px">
    </div>
  </div>
</div>

图文的相对位置

置顶, 居中, 置底(在媒体对象上加media-top, media-middle, media-bottom)

<div class="media">
  <div class="media-left media-top">
    <img src="img_avatar1.png" class="media-object" style="width:60px">
  </div>
  <div class="media-body">
    <h4 class="media-heading">置顶</h4>
    <p>这是一些示例文本...</p>
  </div>
</div>

内嵌多媒体对象

一个多媒体对象里面可以包括其它的多媒体(在media-body中包含media)

<div class="media">
    <div class="media-left">
      <img src="http://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:45px">
    </div>
    <div class="media-body">
      <h4 class="media-heading">RUNOOB-1 <small><i>Posted on February 19, 2016</i></small></h4>
      <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>
      
      <!-- 内嵌多媒体对象 -->
      <div class="media">
        <div class="media-left">
          <img src="http://static.runoob.com/images/mix/img_avatar.png" class="media-object" style="width:45px">
        </div>
        <div class="media-body">
          <h4 class="media-heading">RUNOOB-2 <small><i>Posted on February 19, 2016</i></small></h4>
          <p>这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。这是一些示例文本。</p>

          <!-- 内嵌多媒体对象 -->
          <div class="media">
               ...
          </div>
          
        </div>
      </div>
      
    </div>
  </div>

列表组:

使用list-group创建列表组(也可以不使用)

使用list-group-item创建列表项

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

向列表组添加徽章(徽章会居右)

<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">
        <span class="badge">新</span>
        24*7 支持
    </li>
    <li class="list-group-item">每年更新成本</li>
    <li class="list-group-item">
        <span class="badge">新</span>
        折扣优惠
    </li>
</ul>

向列表组添加链接

通常列表组中的列表项需要一个链接

<a href="#" class="list-group-item active">免费域名注册</a>
<a href="#" class="list-group-item">24*7 支持</a>
<a href="#" class="list-group-item">免费 Window 空间托管</a>
<a href="#" class="list-group-item">图像的数量</a>
<a href="#" class="list-group-item">每年更新成本</a>

在列表项中添加内容

list-group-item-heading向列表项中添加标题

list-group-item-text向列表项中添加内容

<a href="#" class="list-group-item">
  <h4 class="list-group-item-heading"> 免费域名注册 </h4>
  <p class="list-group-item-text"> 您将通过网页进行免费域名注册。</p>
</a>

bootstrap面板:

面板组件用于把 DOM 组件插入到一个盒子中。

创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可

<div class="panel panel-default">
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>

面板标题

使用 .panel-heading class 可以很简单地向面板添加标题容器。

使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题

<div class="panel panel-default">
    <div class="panel-heading"> 不带 title 的面板标题 </div>
    <div class="panel-body"> 面板内容 </div>
</div>
 
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title"> 带有 title 的面板标题 </h3>
    </div>
    <div class="panel-body"> 面板内容 </div>
</div>

面板脚注(用panel-footer样式)

<div class="panel panel-default">
  <div class="panel-body"> 这是一个基本的面板 </div>
  <div class="panel-footer">面板脚注</div>
</div>

给面板添加色彩(将panel-default改为panel-*)

面板色彩样式有: panel-success, panel-info, panel-warning, panel-danger

它与按钮颜色, 背景色等这些些是相似的设计

<div class="panel panel-success">
  <div class="panel-heading">
    <h3 class="panel-title">面板标题</h3>
  </div>
  <div class="panel-body"> 这是一个基本的面板 </div>
</div>

在面板中放置表格

与panel-heading, panel-body并列放置表格

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-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>
</div>

面板中放置列表组

与panel-heading, panel-body并列放置列表组

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

bootstrap well窗口

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

为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可

well-lg, well-sm与well结合使用, 改变well的尺寸大小

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

 创建一个t简单网页:

<body>
<div class="jumbotron text-center " style="margin-bottom:0">
  <h2>我的第一个 Bootstrap 页面</h2>
  <p>重置浏览器窗口大小查看效果！</p> 
</div>

<!-- 导航 -->
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
	  
    <!-- 导航头, 带折叠按钮 -->
    <div class="navbar-header">	
	  <a class="navbar-brand" href="#">网站名</a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
	
    <!-- 导航内容 -->
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">主页</a></li>
        <li><a href="#">页面 2</a></li>
        <li><a href="#">页面 3</a></li>
      </ul>
    </div>
	  
  </div>
</nav>

<!-- 主体 -->
<div class="container">

  <!-- 行 -->
  <div class="row">
	  
    <!-- 占4列 -->
    <div class="col-sm-4">
      <h2>关于我</h2>
      <h5>我的照片:</h5>
      <div class="fakeimg">这边插入图像</div>
      <p>关于我的介绍..</p>
      <h3>链接</h3>
      <p>描述文本。</p>
	
      <!-- 垂直列表 -->
      <ul class="nav nav-pills nav-stacked">
        <li class="active"><a href="#">链接 1</a></li>
        <li><a href="#">链接 2</a></li>
        <li><a href="#">链接 3</a></li>
      </ul>
	
      <hr class="hidden-sm hidden-md hidden-lg">
    </div>
	  
    <!-- 占8列 -->
    <div class="col-sm-8">
      <h2>标题</h2>
      <h5>副标题</h5>
      <div class="fakeimg">图像</div>
      <p>一些文本..</p>
      <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
      <br>
      <h2>标题</h2>
      <h5>副标题</h5>
      <div class="fakeimg">图像</div>
      <p>一些文本..</p>
      <p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>
    </div>
	  
  </div>
</div>

<!-- 底部 -->
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>底部内容</p>
</div>
</body>