Bootstrap学习笔记--图片,jumbotron,page-header,well,警告,按钮,Glyphicon组件,徽章,标签

图片：

图片属性加上这些就有不同效果
class=”img-rounded”
class=”img-circle”
class=”img-thumbnail”
这里写图片描述

注意如果是circle圆的话四个角的东西会直接被隐藏而不是缩小

还可以添加响应式图片：

 <img src="11.png" class="img-responsive"  width="700" height="200">

意思就是窗体大于700px宽高200px的时候图片显示宽700px 高200px
窗体小于700px宽高200px的时候图片会随着窗体一起变小
因为：
.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上
但是窗体不能无限小小到一定程度就无法再缩小了

jumbotron

jumbotron表示一个大盒子
显示为带圆角的灰色框。它还会放大其中文本的字体大小

<div>在类中使用元素.jumbotron来创建一个jumbotron

有两种选择一是放在

<div class="container">里面  不延伸到屏幕的边缘

栗子：

<div class="container">
  <div class="jumbotron">
    <h1>Bootstrap Tutorial</h1>      
    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
  </div>
  <p>This is some text.</p>      
  <p>This is another text.</p>      
</div>

效果图：
这里写图片描述

二是放在

<div class="container">外面  延伸到屏幕的边缘

栗子：

<div class="jumbotron">
  <h1>Bootstrap Tutorial</h1>      
  <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
</div>

<div class="container">
  <p>This is some text.</p>      
  <p>This is another text.</p>      
</div>

效果图：
这里写图片描述

总结：

<div class="jumbotron">
在<div class="container">外面 左右不会留白
在<div class="container">里面 左右留白
但是都是响应式的  当屏幕大小小于内容时，内容自适应

增加眉页意思就是
添加一个水平行的标题下（+并将该元素周围的一些额外的空间）

<div class="container">
  <div class="page-header">
    <h1>Example Page Header</h1>      
  </div>
  <p>This is some text.</p>      
  <p>This is another text.</p>      
</div>

效果图：标题下面多了一条横线不过不是很明显
这里写图片描述

well类：
添加圆形边界周围以灰色背景颜色和一些填充的元素

<div class="container">
    <div class="well">
    <p>haha</p> 
    </div>
</div>

效果图：
这里写图片描述

还可以添加.well-sm 或者.well-lg 来改变well的大小

<div class="container">
    <div class="well well-sm">Small Well</div>
    <div class="well well-lg">Large Well</div>
</div>

效果图：
这里写图片描述

警报：.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>

alert-success之类的表示不同颜色的警告
效果图：
这里写图片描述

这个警报还可以通过关闭来取消：

<div class="container">
<div class="alert 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>
信息！请注意这个信息。</div>
</div>

效果图：左边点击X按钮即取消
这里写图片描述

与之前基础的警告不同的是：

1.向上面的 <div> class 添加可选的 .alert-dismissable。
2.添加一个关闭按钮。
3.请确保使用带有 data-dismiss="alert" data 属性的 <button> 元素

警告不仅可以取消还可以往里面添加链接
.alert-link：

<div class="alert alert-info">
    <a href="#" class="alert-link">信息！请注意这个信息。</a>
</div>

.alert-link 实体类来快速提供带有匹配颜色的链接
这样子这个信息！请注意这个信息。就是一个链接形式了

按钮：

<div class="container">
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</div>

效果图：
这里写图片描述

btn-block：
添加类.btn-block以创建块级按钮

<button type="button" class="btn btn-primary btn-block">Button 1</button>

效果图：
这里写图片描述

活动/禁用按钮：
该类.active使按钮显示为按下，并且该类 .disabled 使按钮不可点击：

<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

效果图：
这里写图片描述

单击active后一直都是按下状态而 disabled按钮显示无法点击

按钮还可以分组：

<div>在类中使用元素.btn-group来创建按钮组

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

效果图：
这里写图片描述

还可以添加：
btn-group-lg类放大按钮：

<div class="btn-group btn-group-lg">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

效果图：
这里写图片描述

上面的都是横行分布的那么可以竖着吗？
答案是可以的：
btn-group-vertical：类

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

效果图：
这里写图片描述

类.btn-group-justified
要跨越屏幕的整个宽度：针对<a>的

<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary">Apple</a>
  <a href="#" class="btn btn-primary">Samsung</a>
  <a href="#" class="btn btn-primary">Sony</a>
</div>

效果图：
这里写图片描述

注意：对于<button>元素，您必须将每个按钮包装在一个.btn-group类

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Samsung</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Sony</button>
  </div>
</div>

嵌套按钮组创建下拉菜单
data-toggle=”dropdown”

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Sony <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">Tablet</a></li>
      <li><a href="#">Smartphone</a></li>
    </ul>
  </div>
</div>

第三个按钮点击出现下拉框
这里写图片描述

注意：

<span class="caret"></span>是第三个三角形的图案
 <ul class="dropdown-menu" >下拉菜单得包含这个类

拆分按钮下拉菜单

<div class="btn-group">
  <button type="button" class="btn btn-primary">Sony</button>
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Tablet</a></li>
    <li><a href="#">Smartphone</a></li>
  </ul>
</div>

效果图：
这里写图片描述

Glyphicon组件

参考：
https://www.quanzhanketang.com/bootstrap/bootstrap_ref_comp_glyphs.html
http://glyphicons.com/

class=”badge” 徽章：
还可以嵌入到button按钮中

 <a href="#">News <span class="badge">5</span></a><br>
  <a href="#">Comments <span class="badge">10</span></a><br>
  <a href="#">Updates <span class="badge">2</span></a><br>
  <button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>

效果图：
这里写图片描述

标签：
.label-default，.label-primary，.label-success， .label-info，.label-warning或.label-danger
对应：
默认标签主标签成功标签信息标签警告标签危险标签

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>

效果图：
这里写图片描述