【巩固】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">×</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="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">
加一个class
为text-right
,这时标题和内容都往右跑了,接着,只要将头像和内容的代码位置换一下就可以实现效果了 - 媒体对象中的图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。如果可以通过添加
class
media-middle,media-top或者media-bottom
来进行控制。
【巩固】Bootstrap笔记三的更多相关文章
- angular学习笔记(三十)-指令(10)-require和controller
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...
- Bootstrap笔记--快速入门
首先是Bootstrap的简介: 业余了解:下面这个网址可以查询IP地址的地理位置 下面学习:(具体可以参考Bootstrap中文网) 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流 ...
- Oracle学习笔记三 SQL命令
SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)
- 《CMake实践》笔记三:构建静态库(.a) 与 动态库(.so) 及 如何使用外部共享库和头文件
<CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...
- Bootstrap <基础三十二>模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Bootstrap <基础三十一>插件概览
在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...
- Bootstrap <基础三十>Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...
- Bootstrap<基础三> 排版
Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...
- Mastering Web Application Development with AngularJS 读书笔记(三)
第一章笔记 (三) 一.Factories factory 方法是创建对象的另一种方式,与service相比更灵活,因为可以注册可任何任意对象创造功能.例如: myMod.factory('notif ...
随机推荐
- 手动刷新magento的索引管理方法
当我们网站商品很多的时候,比如有几千件,我们刷新Magento的索引管理(Index Management)经常会失败.那么后台刷新不了,我们还可以通过命令行来刷新. 使用命令行来刷新索引管理会极大降 ...
- ios网络知识
http://www.cocoachina.com/bbs/read.php?tid-31300.html 启蒙内容 http://blog.csdn.net/nono_love_lilith/ar ...
- OpenMP共享内存并行编程详解
实验平台:win7, VS2010 1. 介绍 平行计算机可以简单分为共享内存和分布式内存,共享内存就是多个核心共享一个内存,目前的PC就是这类(不管是只有一个多核CPU还是可以插多个CPU,它们都有 ...
- eclipse界面混乱
在eclipse最右边点击Java----reset
- python中try except执行顺序
python中try except finally的执行顺序 先执行try中语句 如果try中抛出异常, 执行异常中语句. 如果try 或 except 中没有return语句,执行完try 或者 e ...
- idea-生成key的Java代码
import java.math.BigInteger; import java.util.Date; import java.util.Random; import java.util.Scanne ...
- 给UIWebView调整UserAgent字段
+(void)setWebViewUserAgent:(NSString *)suffix { UIWebView *webView = [[UIWebView alloc] initWithFram ...
- SQL Server COM 组件创建实例失败
SQL Server COM 组件创建实例失败 SQL2008数据库总会出现从 IClassFactory 为 CLSID 为 {17BCA6E8-A95D-497E-B2F9-AF6AA4759 ...
- SDWebImage
SDWebImage 加载图片的流程 入口 setImageWithURL:placeholderImage:options: 会先把 placeholderImage 显示,然后 SDWebImag ...
- 为什么有禁用Mac系统的Spotlight的需求:
一.为什么有禁用Mac系统的Spotlight的需求: 有的网友由于使用的是相对较老的苹果电脑在运行较新的系统:也有可能你是个速度控,受不了偶尔卡卡顿顿的操作,必须将所有导致卡顿的原因全部消除:也有可 ...