2017-2-28bootstrap学习记录

发表于 |
  1. 常规增加。

  1. 以后我要做手机查看固定资产页面的时候就知道要加这个了……很棒！
  2. 原来container和container-fluid是这样。
  3. 终于对bootstrap的网格系统有更清晰的认识了……如果想要在手机上好看的话，最好就设置为col-xs，因为这样才不会因为手机屏幕小而对页面重新响应缩放，就不好看了……
    • 这4个类对应有4个宽度，一旦小于这个宽度，就会产生响应缩放。

  1. 终于明白了，同时出现两个col注释是什么意思了，原来如此呀！

  2. bootstrap的一些常用元素：

    • 标记，背影色黄色

    • 下划线

    • 左引用

      • .blockquote-reverse类，使用这个类可以用为：右引用

    • ,(
      ).说明性列表。

    • 字体颜色

    • 字体背影颜色

  3. 表格

    表格类型：
    • .table-striped类，条纹状表格
    • .table-bordered类，带边框的表格。
    • .table-hover类，悬停效果，鼠标所历的表格颜色会改变。
    • .table-condensed类，浓缩表，行距会变得紧凑。
    • .table-responsive类，表示在小设备会增加一个滚动条。太好，以后在可以用上！
    表格样式：
    • 上下文类，可以使用不同的类来标记不同的颜色。

  4. 图像：

    • .img-rounded类，圆角图像处理。
    • .img-circle类，自动塑造成一个圆。
    • .img-thumbnail类，会保持图像的比例，优先参考width.
    • .img-responsive类，会在屏幕小于图片的时候，自动把图片缩小以适应屏幕。
    • .embed-responsive-item类，创建响应式视频或幻灯片。
  5. jumbotron ：一个灰色框，里面可以放啥啥都可以。

    • 放在容器

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
         - 放在容器```container```外面，会延伸到屏幕边缘。
      6. ##### 页眉
         - .page-header可以产生一个标题的效果。![](http://bucket1.hongliang.fun/blog/2017-02-28-070607.jpg)
      7. ##### wells
         - .well .well-sm .well-lg三个类，能出一个井的效果。![](http://bucket1.hongliang.fun/blog/2017-02-28-070817.jpg)
      8. ##### 提示条alert
         - .alert
           - .alert-success
           - .alert-warning
           - .alert-danger
           - .alert-info
           以上可以出四种颜色的提示条。![](http://bucket1.hongliang.fun/blog/2017-02-28-071342.jpg)
         - .alert-link类，可以在提醒中插入链接。![](http://bucket1.hongliang.fun/blog/2017-02-28-Snip20170228_41.png)
         - 关闭提醒。增加类：.alert-dismissable  然后增加一个带有class="close"&&data-dismiss="alert"的链接<a>或按钮<button>![](http://bucket1.hongliang.fun/blog/2017-02-28-072859.jpg)
         - 动画关闭效果。在class里增加```fade in``` ![](http://bucket1.hongliang.fun/blog/2017-02-28-073221.jpg)
      9. ##### 按钮样式：
         - .btn-default类，7种样式![](http://bucket1.hongliang.fun/blog/2017-02-28-Snip20170228_47.png)
         - .btn类 可以用在三种元素上：```<a>``` ```<button>``` ```<input>``` ![](http://bucket1.hongliang.fun/blog/2017-02-28-Snip20170228_48.png)
         - .btn-lg类，按钮大小：![](http://bucket1.hongliang.fun/blog/2017-02-28-Snip20170228_1.png)
         - .btn-block类，跨越父级宽度的 块级按钮：![](http://bucket1.hongliang.fun/blog/2017-02-28-082508.jpg)
         - .disabled类，按钮的禁用。.active类，显示为按钮按下时的颜色。![](http://bucket1.hongliang.fun/blog/2017-02-28-082757.jpg)
         - .btn-group类，可以创建成按钮组。
           - 第一种样式：![](http://bucket1.hongliang.fun/blog/2017-02-28-084032.jpg)
           - 第二种样式：![](http://bucket1.hongliang.fun/blog/2017-02-28-Snip20170228_7.png)
           - 第三种样式：![](http://bucket1.hongliang.fun/blog/2017-02-28-084402.jpg)
           - 第四种样式：![](http://bucket1.hongliang.fun/blog/2017-02-28-084626.jpg）
         - ##### 下拉菜单：
           - 普通下拉菜单：

      Sony <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
  <li><a href="#">Tablet</a></li>
  <li><a href="#">Smartphone</a></li>

      1
      2
      3
      4
        ![](http://bucket1.hongliang.fun/blog/2017-02-28-Snip20170228_31.png)
      - 拆分式下拉菜单：

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


      ```

      ps:原理是一样的，只不过是把按钮级里的第二个按钮直接用成了下拉符号了。

      ​