这段笔记介绍了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>
  1. 导入chart.js文件
  2. 创建一个canvas画布 <canvas id="canvas"></canvas>
    • 如果想让画布占满整个面板大小,可以直接给canvas标签添加一个class="col-md-12"
  3. 引入曲线图(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="width: 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">加一个classtext-right,这时标题和内容都往右跑了,接着,只要将头像和内容的代码位置换一下就可以实现效果了
  • 媒体对象中的图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。如果可以通过添加class media-middle,media-top或者media-bottom来进行控制。

【巩固】Bootstrap笔记三的更多相关文章

  1. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  2. Bootstrap笔记--快速入门

    首先是Bootstrap的简介: 业余了解:下面这个网址可以查询IP地址的地理位置 下面学习:(具体可以参考Bootstrap中文网) 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流 ...

  3. Oracle学习笔记三 SQL命令

    SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)  

  4. 《CMake实践》笔记三:构建静态库(.a) 与 动态库(.so) 及 如何使用外部共享库和头文件

    <CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...

  5. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  6. Bootstrap <基础三十一>插件概览

    在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...

  7. Bootstrap <基础三十>Well

    Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...

  8. Bootstrap<基础三> 排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...

  9. Mastering Web Application Development with AngularJS 读书笔记(三)

    第一章笔记 (三) 一.Factories factory 方法是创建对象的另一种方式,与service相比更灵活,因为可以注册可任何任意对象创造功能.例如: myMod.factory('notif ...

随机推荐

  1. Cosh.2

    没壳 直接拖 一开始  字符长度不对.   所以  输入都超过5   就没什么问题了 发现下面的跳转都是跳到eorr的 那不跳的条件呢 看来他们必须要相等.单步跟踪就会发现eax指向的是我们的Seri ...

  2. actionscript 截图功能实现

    由于截图访问的是 外部 rtmp直播流 所以调用BitmapData.draw时 控制台报以下错误: SecurityError: Error #2123: 安全沙箱冲突:BitmapData.dra ...

  3. WCF XmlSerializer GetType 反射类型 报错 解决方案

    为图省事,用现有的EF,和web一起使用一个Model类 当进行到 XmlSerializer xmlSerializer = new XmlSerializer(obj.GetType()); 会报 ...

  4. SlickUpload 发布到IIS后报错

    开发时候采用slickupload控件都没问题,项目发布到IIS时发生了错误: Could not contact SlickUpload request progress handler at /S ...

  5. android 打开各种文件(setDataAndType)转:

    android 打开各种文件(setDataAndType) 博客分类: android-->非界面 android 打开各种文件 setDataAndType action动作  转自:htt ...

  6. (转)asp.net中获得客户端的IP地址

    因为要在项目中取到客户端IP,在网上搜了下相关资料,其中有一篇文章总结的比较详细,这里就把一些我用的上总结一下 方便以后查阅. 通常我们都通过下面的代码获得IP:   string ip =Syste ...

  7. Weblogic新增域(可以配置新端口)

    操作系统 :Linux version 2.6.32-504.el6.x86_64 Weblogic Server :11g 一.Weblogic新增域(可以配置新端口) 以weblogic用户登录 ...

  8. int类型究竟占几个字节

    我最近也在看深入理解计算机系统这本书,上面提到了在32位机器和64机器中int类型都占用4个字节.后来,别人查了The C Programming language这本书,里面有一句话是这样的: Ea ...

  9. 《Web全栈工程师的自我修养》读书笔记(转载)

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/5 ...

  10. bx, bp, si, di寄存器的使用规则

    首先,都可以单独使用. 另外,组合使用的情况下: 记住这张图片就行了=_= 意思就是,bx只能和si,di组合.bp只能和si,di组合.