2017-2-28bootstrap学习记录

  1. 常规增加。

  1. 以后我要做手机查看固定资产页面的时候就知道要加这个了……很棒!
  2. 原来container和container-fluid是这样。
  3. 终于对bootstrap的网格系统有更清晰的认识了……

    如果想要在手机上好看的话,最好就设置为col-xs,因为这样才不会因为手机屏幕小而对页面重新响应缩放,就不好看了……

    • 这4个类对应有4个宽度,一旦小于这个宽度,就会产生响应缩放。
  4. 终于明白了,同时出现两个col注释是什么意思了,原来如此呀!

  5. bootstrap的一些常用元素:

  • 标记,背影色黄色

  • 下划线

  • 左引用
    • .blockquote-reverse类,使用这个类可以用为:右引用
  • ,(
    ).说明性列表。
  • 字体颜色

  • 字体背影颜色

  1. 表格

##### 表格类型:

  • .table-striped类,条纹状表格
  • .table-bordered类,带边框的表格。
  • .table-hover类,悬停效果,鼠标所历的表格颜色会改变。
  • .table-condensed类,浓缩表,行距会变得紧凑。
  • .table-responsive类,表示在小设备会增加一个滚动条。太好,以后在可以用上!

##### 表格样式:

  • 上下文类,可以使用不同的类来标记不同的颜色。
  1. #### 图像:
  • .img-rounded类,圆角图像处理。
  • .img-circle类,自动塑造成一个圆。
  • .img-thumbnail类,会保持图像的比例,优先参考width.
  • .img-responsive类,会在屏幕小于图片的时候,自动把图片缩小以适应屏幕。
  • .embed-responsive-item类,创建响应式视频或幻灯片。
  1. ##### jumbotron :一个灰色框,里面可以放啥啥都可以。
  • 放在容器container里,不会延伸到屏幕边缘。
  • 放在容器container外面,会延伸到屏幕边缘。
  1. ##### 页眉
  • .page-header可以产生一个标题的效果。
  1. ##### wells
  • .well .well-sm .well-lg三个类,能出一个井的效果。
  1. ##### 提示条alert
  • .alert

    • .alert-success
    • .alert-warning
    • .alert-danger
    • .alert-info

    以上可以出四种颜色的提示条。

  • .alert-link类,可以在提醒中插入链接。

  • 关闭提醒。增加类:.alert-dismissable 然后增加一个带有class="close"&&data-dismiss="alert"的链接或按钮

  • 动画关闭效果。在class里增加fade in

  1. ##### 按钮样式:
  • .btn-default类,7种样式

  • .btn类 可以用在三种元素上:<a> <button> <input>

  • .btn-lg类,按钮大小:

  • .btn-block类,跨越父级宽度的 块级按钮:

  • .disabled类,按钮的禁用。.active类,显示为按钮按下时的颜色。

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

    • 拆分式下拉菜单:


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

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

comments powered by Disqus