Bootstrap 使用
bootstrap模板为使IE6、7、8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可。 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
同理为使IE6、7、8版本浏览器兼容css3样式,引入下面代码: <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
【省略细节,纠结细节的话就学不了整个复杂系统,况且现代前端开发不是仅仅就一个Bootstrap】【不学js插件只学样式】【关注使用有问题再深究】
第一步 【全局样式 normalize.css】抹除浏览器差异
…………………………………………………………………………………………………………
【标题】.h1~.h6 类名 和 标签 <h1> 相同效果。
【副标题】 <h1><small>
【强调】.lead
【粗体】<b> | <strong>
【斜体】<i> | <em>
【有颜色的强调】
- .text-muted:提示,使用浅灰色(#999)
- .text-primary:主要,使用蓝色(#428bca)
- .text-success:成功,使用浅绿色(#3c763d)
- .text-info:通知信息,使用浅蓝色(#31708f)
- .text-warning:警告,使用黄色(#8a6d3b)
- .text-danger:危险,使用褐色(#a94442)
【文本对齐】
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {//中文慎用 以及 浏览器解析不一致。
text-align: justify;
}
………………………………………………………………………………
【列表】
去编号 去点 列表
.list-unstyled {
padding-left: 0;
list-style: none;
}
去编号 改内联块级
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
【水平 定义列表】
dl-horizontal 媒体查询 宽度是768px以上奏效。
【代码】
单行 <code>
多行 <pre> + 滚动条 .pre-scrollable
用户键盘输入 <kbd>
【表格】
☑ .table:基础表格
☑ .table-striped:斑马线表格
☑ .table-bordered:带边框的表格
☑ .table-hover:鼠标悬停高亮的表格
☑ .table-condensed:紧凑型表格
☑ .table-responsive:响应式表格
修饰 行
active
info
success
warning
danger
………………………………………………………………………………
【表单】Fucking importance
【常用样式】.form-control
1、宽度变成了100%
2、设置了一个浅灰色(#ccc)的边框
3、具有4px的圆角
4、设置阴影效果,并且【元素得到焦点】之时,阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
【html 5 新增】role="form" 告诉设备这一块扮演的是表单角色。
【对表单 分组】<div class="form-group" 这是惯性做法,为了我们想要方便变换样式,例如基本表单 => 内联表单
【水平表单】form-horizontal 应用这个类会改变form-group样式
【内联表单】form-inline
内联表单的 label 常常设置 sr-only 类名 ,sr 是 屏幕阅读器的缩写,意思是照顾不方便的人士。
【下拉框】<select><option>
【多行模式】<select multiple><option>
【文本区域】<textarea rows="3"> 如果应用.form-control就不用再设置cols属性,因为已经100%显示。
【单选框和复选框在Bootstrap要跟包饺子一样使用】
<div class="checkbox"> <!-- 这里无所谓 checkbox 也可以是 form-group 只要包饺子。 -->
<label>
<input type="checkbox"> 记住密码
</label>
</div>
【水平单选、复选框】label应用.radio-inline类名或者checkbox-inline即可。
【按钮】btn
【有颜色的按钮】btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link
【为保证各大浏览器解析建议使用】<button>和 <a>
【按钮大小】btn-xs btn-sm btn-lg
【块级按钮 占满容器】btn-block
【有状态的按钮】活动状态有三种 :hover :active :focus ,另外就是禁用 添加disabled属性即可。
………………………………………………………………………………………………………………
【表单控件大小控制】Bootstrap 提供了 .input-sm .input-sg 对控件高度进行控制。
要对高度进行控制,使用 网格系统 提供的 .col-xx-<number>。
【表单控件焦点状态】.form-control
【表单控件禁用状态】加属性 disable
【禁用整个表单】<fieldset disable></fieldset>
【特别的fieldset disable管不到灰暗带】<legend><input>,不过把 submit 关掉也是白搭。
【表单控件验证状态】+【表单控件提示】
<div class="form-group has-error has-feedback"> <label class="control-label" for="email">email地址</label> <input type="text" class="form-control" id="email" placeholder="在这里输入你的email地址">
<span class="helpblock">你输入的信息是错误的</span>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
……………………………………………………………………………………………………………………………………………………
【图像】<img src="https://placehold.com/140x140" alt=...
1、img-responsive:响应式图片,主要针对于响应式设计
2、img-rounded:圆角图片
3、img-circle:圆形图片
4、img-thumbnail:缩略图片
【图标】原理是通过@font-face加载字体
使用 http://glyphicons.com/ 搜索
常用 http://www.bootcss.com/p/font-awesome/
…………………………………………………………………………………………………………………………………………………………
【网格系统】 Fucking Importance
响应式的原理 【定义容器大小】+【事先平均分12份 / 24份 / 32份】+ 【调整下内外边距配合媒体查询】
boilerplate code
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-8"></div>
【列组合】调整 float 和 width 百分比可以自由组合出效果。
【列偏移】col-md-offset-xx
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-2 col-md-offset-1">.col-md-2列向右移动1列的间距</div>
<div class="col-md-2 col-md-offset-1">.col-md-2列向右移动1列的间距</div>
<div class="col-md-3 col-md-offset-1">.col-md-3列向右移动1列的间距</div>
</div>
【列排序】向右推 col-md-push-xx ,向左拉 col-md-pull-xx
………………………………………………………………………………………………………………………………………………………………
Bootstrap 使用的更多相关文章
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap(四)
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Bootstrap 模态框(Modal)插件
页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- 利用bootstrap的carousel.js实现轮播图动画
前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...
- 旺财速啃H5框架之Bootstrap(三)
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- 旺财速啃H5框架之Bootstrap(二)
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...
- 旺财速啃H5框架之Bootstrap(一)
接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...
- [BootStrap] 富编辑器,基于wysihtml5
在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...
随机推荐
- Zabbix-proxy安装部署
原文链接:https://www.cnblogs.com/irockcode/p/6754659.html 环境: 因为公司需要监控远程客户机,但server端无法主动连接agent端,客户端可以连接 ...
- thinkphp5 上传服务器后 Access denied
服务器报 Access denied,要么报 No input files,但是在网上查了查说是将 PHP 的cgi.fix_pathinfo 改成 1 即可,但是改成 1 显然是有解析漏洞的,尝试寻 ...
- 编译:ffmpeg,精简ffmpeg.exe
网上下载的各种 ffmpeg.exe ,最少都有11M+ 而我只需要处理 mp4 和 mp3,在网上搜索了一下精简ffmpeg的文章,折腾一天,也没有完全搞定,但多少有些收获,记录一下: 从 www. ...
- linux:awk修改输出分隔符
file1的内容如下: a b c d e f g h 现在想要修改成 a b c:d e f g:h 则需要用到如下命令: awk -F " " '{print $1,$2,$3 ...
- Luogu P4011 孤岛营救问题
题目链接 \(Click\) \(Here\) 注意坑点:一个地方可以有多把钥匙. 被卡了一会,调出来发现忘了取出来实际的数字,直接把二进制位或上去了\(TwT\),其他的就是套路的分层图最短路.不算 ...
- python学习笔记——字典操作
修改 a={'add':"shanghao","name":"zhangdong"} a['name']='zhangsan' 添加 a={ ...
- C#设计模式 —— 依赖注入
在说依赖注入之前,先了解下什么是接口. 接口的相关规则: 1. 接口是一个引用类型,通过接口可以实现多重继承. 2. C#中接口的成员不能有new.public.protected.internal. ...
- TranslateMessage消息翻译和DispatchMessage消息分发
TranslateMessage函数将虚拟键消息转换成字符消息.比如: 消息WM_KEYDOWN和WM_KEYUP组合产生一个WM_CHAR或WM_DEADCHAR消息. 消息WM_SYSKEYDOW ...
- Kafka技术内幕 读书笔记之(四) 新消费者——心跳任务
消费者拉取数据是在拉取器中完成的,发送心跳是在消费者的协调者上完成的,但并不是说拉取器和消费者的协调者就没有关联关系 . “消费者的协调者”的作用是确保客户端的消费者和服务端的协调者之间的正常通信,如 ...
- 当php邂逅windows通用上传缺陷
早上逛乌云发现了PKAV大牛的一篇文章,针对php和windows文件上传的分析,思路很YD,果断转之与大家分享. 虽然此文可能有许多的限制条件,但是如果你认真阅读会发现,其实还是比较实用的. 另外一 ...