Bootstrap(218)

发表于   |   分类于

bootstrap语法太丰富了，完全可以把很多js代码去掉。所以记录下来

http://v3.bootcss.com/components/
http://getbootstrap.com/javascript/#modals-examples

ui-bootstrap

bootstrap的TPLS版本里面有所有组件的html代码.angular最好用这个.
然后对于angular使用的是ui-boostrap，这个只是定义了控件，还是要去bootstrap官网去下载bootstrap的源码来。

语法

它主要是自己的data语法太多了:

  • data-dismiss="modal" 如果在modal弹窗加上，那么点击则会关闭弹窗

  • data-toggle="modal" data-target=".bs-example-modal-lg" 这样点击按钮就会弹出modal窗口，由于data-target具有css的选择器功能(#id也可以)，所以选择的是class为bs-exampl-modal-lg的元素。

    如：<div class="modal fade bs-example-modal-sm" tabindex="-1"> 加上fade类有淡入淡出的特效

  • data-whatever="" 当一堆按钮要使用同一个模态框时，用这个来传入分别的数据。然而对angular来说完全没必要，毕竟数据绑定了。

  • data-toggle="dropdown" angular感觉用处不大没细看

  • data-spy="scroll" data-target="#navbar-example" 滚动时顺便修改选项

  • data-toggle="tab" 

    1
    2
    3
    4
    <a href="#ejb" tabindex="-1" data-toggle="tab">//tab项
    </a>
    <div class="tab-pane fade" id="ios">...</div>//tab内容

  • data-toggle="tooltip" data-placement="right" title="Tooltip on right" //表示右边显示tooltip，可以左上下

  • data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." 点击弹出带指定箭头的属性窗口，点击再消失； 多个title=”…”的话弹出窗口会多个标题显示。

  • data-loading-text="Loading..." 这个我没写全，它展示的效果是点击后显示加载，鼠标禁止，加载完再恢复。

  • data-dismiss="alert" 这个用于页内嵌入提示框，由于提供各种可使用的格式 alert-warning alert-success。

1
2
3
4
<div id="myAlert" class="alert alert-success">
	<a href="#" class="close" data-dismiss="alert">&times;</a>
	<strong>成功！</strong>结果是成功的。
</div>

点关闭也确实能(不能也可以加个ng-hide)，但是动画效果不知道咋实现

  • data-loading-text好是好就是没法配合angular使用，只能自己写.

  • data-toggle="collapse" 折叠显示内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      Link with href
    </a>
    <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
      Button with data-target
    </button>
    <div class="collapse" id="collapseExample">
      <div class="well">
        ...
      </div>
    </div>

由于这俩个button链接的是一个折叠内容，点击展开，再点折叠。 里么href和data-target达到了相同效果，我想angular估计只能用data-target

一般 aria-*是识别属性，但是这里aria-expanded="true"会默认展开内容

  • data-ride="carousel"这是个轮播控件来达到相册的效果，.carousel-caption添加标题显示

响应式

12网格式
.col-xs-* Extra small devices (<768px) `.col-sm-*`="" small="" devices="" tabllets(="">=768px)
.col-md-* Medium devices(>=922px)
.col-lg-* Large devices(>=1200px)

*-offset-*表示偏移

强制换行用<div class="row"> 这样即使内部元素也会强制换行

// //