【巩固】Bootstrap笔记三

这段笔记介绍了bootstrp中以下几点应用点：

警告框的使用
面板功能
运用chart.js制作图表
进度条的制作
媒体对象的制作

有一个元素如果有属性alert-dismissible"，给它下面的给某个button或者span添加一个属性data-dismiss="alert"，这样可以在点击后让整个元素消失，其实是删除了这个DOM。
另外，为了让警告框在关闭时表现出动画效果，请确保为其添加了 .fade 和 .in 类。

<div class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>   <!--这个x点击后，会让整个div消失-->
    <h4>网站程序有漏洞，急需修复！</h4>
    <p>当前版本程序(V1.22)存在严重安全问题，容易造成攻击，请即可修复！</p>
    <p>
        <button type="button" class="btn btn-danger">立即修复</button>
        <button type="button" class="btn btn-default"  data-dismiss="alert">稍后处理</button>   <!--这个按钮点击后，会让整个div消失-->
      </p>
</div>

擅于运用bootstrap的面板功能，尤其是需要一块块内容的时候，可以通过组件中找到面板样式

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Panel title</h3> <!--这里写面板标题-->
    </div>
    <div class="panel-body">
        Panel content <!--这里写面板内容-->
    </div>
</div>

运用chart.js制作图表，制作折线图之类的统计表时可以使用chart.js这个插件。http://www.chartjs.org/，这个插件的使用说明文档可以看这里：http://www.chartjs.org/docs/

导入chart.js文件
创建一个canvas画布 <canvas id="canvas"></canvas>
- 如果想让画布占满整个面板大小，可以直接给canvas标签添加一个class="col-md-12"
引入曲线图(Line chart)js格式代码，这段代码如下，需要再手动调整一下

var lineChartData = {
    //X坐标数据
    labels : ["周一","周二","周三","周四","周五","周六","周末"],
    datasets : [
        {
            //统计表的背景颜色
            fillColor : "rgba(0,0,255,0.5)",
            //统计表画笔颜色
            strokeColor : "#f60",
            //点的颜色
            pointColor : "#000;",
            //点边框的颜色
            pointStrokeColor : "red",
            //鼠标触发时点的颜色
            pointHighlightFill : "red",
            //鼠标触发时点边框的颜色
            pointHighlightStroke : "#000",
            //Y坐标数据
            data : [300,555,655,714,899,905,1000]
        },{
            fillColor : "rgba(0,255,0,0.5)",
            strokeColor : "rgba(92, 184, 92, 1)",
            pointColor : "rgba(23, 126, 23, 1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [314,455,755,814,999,905,1000]
        }
        ,{
            fillColor : "rgba(255,0,0,0.5)",
            strokeColor : "blue",
            pointColor : "rgba(23, 126, 23, 1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(151,187,205,1)",
            data : [114,255,455,414,599,605,500]
        }
    ]

}

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
    });
}

进度条的制作，也是通过组件中的进度条找到代码修改。

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style=" 60%;">
        <span class="sr-only">60% Complete</span>
    </div>
</div>

媒体对象的制作，也是通过组件中的媒体对象找到代码修改。这个有点类似于留言内容的制作，有个头像图标，边上有个留言标题，以及留言内容

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="..."><!--修改头像图标-->
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4><!--留言标题-->
    ...<!--这里写留言内容-->
  </div>
</div>

运用媒体对象时，给<div class="media">标签的class加一个well，就可以将每条留言区分开来，可以写成<div class="media well">
如果将头像和留言位置放到右边呢？其实很简单，先把<div class="media-left">中的left改成right，这时头像就有一个往右的趋势，同时再给下面的留言标题以及内容的父级<div class="media-body">加一个class为text-right，这时标题和内容都往右跑了，接着，只要将头像和内容的代码位置换一下就可以实现效果了
媒体对象中的图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。如果可以通过添加class media-middle,media-top或者media-bottom来进行控制。