这段笔记介绍了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. 手动刷新magento的索引管理方法

    当我们网站商品很多的时候,比如有几千件,我们刷新Magento的索引管理(Index Management)经常会失败.那么后台刷新不了,我们还可以通过命令行来刷新. 使用命令行来刷新索引管理会极大降 ...

  2. ios网络知识

    http://www.cocoachina.com/bbs/read.php?tid-31300.html  启蒙内容 http://blog.csdn.net/nono_love_lilith/ar ...

  3. OpenMP共享内存并行编程详解

    实验平台:win7, VS2010 1. 介绍 平行计算机可以简单分为共享内存和分布式内存,共享内存就是多个核心共享一个内存,目前的PC就是这类(不管是只有一个多核CPU还是可以插多个CPU,它们都有 ...

  4. eclipse界面混乱

    在eclipse最右边点击Java----reset

  5. python中try except执行顺序

    python中try except finally的执行顺序 先执行try中语句 如果try中抛出异常, 执行异常中语句. 如果try 或 except 中没有return语句,执行完try 或者 e ...

  6. idea-生成key的Java代码

    import java.math.BigInteger; import java.util.Date; import java.util.Random; import java.util.Scanne ...

  7. 给UIWebView调整UserAgent字段

    +(void)setWebViewUserAgent:(NSString *)suffix { UIWebView *webView = [[UIWebView alloc] initWithFram ...

  8. SQL Server COM 组件创建实例失败

    SQL Server COM 组件创建实例失败   SQL2008数据库总会出现从 IClassFactory 为 CLSID 为 {17BCA6E8-A95D-497E-B2F9-AF6AA4759 ...

  9. SDWebImage

    SDWebImage 加载图片的流程 入口 setImageWithURL:placeholderImage:options: 会先把 placeholderImage 显示,然后 SDWebImag ...

  10. 为什么有禁用Mac系统的Spotlight的需求:

    一.为什么有禁用Mac系统的Spotlight的需求: 有的网友由于使用的是相对较老的苹果电脑在运行较新的系统:也有可能你是个速度控,受不了偶尔卡卡顿顿的操作,必须将所有导致卡顿的原因全部消除:也有可 ...