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的出现,或皮肤跟网站不匹配, ...
随机推荐
- [TJOI2012]桥(最短路+线段树)
有n个岛屿, m座桥,每座桥连通两座岛屿,桥上会有一些敌人,玩家只有消灭了桥上的敌人才能通过,与此同时桥上的敌人会对玩家造成一定伤害.而且会有一个大Boss镇守一座桥,以玩家目前的能力,是不可能通过的 ...
- Jupyter Notebook 编辑器美化
汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai 2018-10-10新增Linux样式路径: Logo: ~/anaconda3/lib ...
- 清流,获取点击的img路径
清流: <div style="clear:both"></div> 获取img的路径到TextBox3内: //获取展示的头像的集合var _heads ...
- 洛谷P3185 分裂游戏
解:这个毒瘤...... 我们首先发现每一堆的个数对操作不产生影响,每个操作都是针对单个石子的. 所以等价于每个石子都是一个独立的游戏.把它们异或起来作为sg函数值即可. 单个石子的sg值,直接暴力计 ...
- js数组歌
判断是不是数组,isArray最靠谱. 按照条件来判断,every/some给答案 是否包含此元素,includes最快速. find/findIndex很相似,按条件给第一个值. indexOf/l ...
- 基于LVM卷的MYSQL快照恢复
在mysql数据库环境中,如果数据库数据很重要,可以使用LVM卷管理的方式,通过对数据卷进行快照,得到快速备份的目的, 首先回顾一下LVM卷管理的几个概念: 物理磁盘PD,physical disk, ...
- Altium Designer 18 ------ 原理图和PCB元器件互相查找
方法一:单击选中原理图中元器件,然后单击tools>Seclect PCBcomponents,即可在PCB中看到该器件的高亮显示: 方法二:单击Tools>Cross Select Mo ...
- 微信小程序:多张图片上传
最近在写小程序的相册,需要多张图片的上传.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求+借鉴网上各位大神的案例,总算搞定.分享下,不足之处,多多指教哦 页面wxml: <form ...
- qml: 模块定义与使用
1. 模块的定义qmldir Module MyModule MyTest 1.0 MyTest.qml MyTest 1.3 MyTest.qml 2. 导入: 使用qrc: RESOU ...
- 2017-12-15python全栈9期第二天第三节之使用while循环输出0到10不包含7
#!/user/bin/python# -*- coding:utf-8 -*-count = 0while count < 10: count += 1 if count == 7 : con ...