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插件只学样式】【关注使用有问题再深究】

Refs

第一步 【全局样式 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 使用的更多相关文章

  1. 旺财速啃H5框架之Bootstrap(五)

    在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...

  2. 旺财速啃H5框架之Bootstrap(四)

    上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...

  3. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  4. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  5. Bootstrap 模态框(Modal)插件

    页面效果: html+js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. 旺财速啃H5框架之Bootstrap(三)

    好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...

  8. 旺财速啃H5框架之Bootstrap(二)

    突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...

  9. 旺财速啃H5框架之Bootstrap(一)

    接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...

  10. [BootStrap] 富编辑器,基于wysihtml5

    在我的周围,已经有很多人在使用BootStrap,但对于任何一个带留言.评论.提问.文章编辑功的网站,编辑器永远是重中之重,显然,早期的编辑器完全没考虑过BootStrap的出现,或皮肤跟网站不匹配, ...

随机推荐

  1. [TJOI2012]桥(最短路+线段树)

    有n个岛屿, m座桥,每座桥连通两座岛屿,桥上会有一些敌人,玩家只有消灭了桥上的敌人才能通过,与此同时桥上的敌人会对玩家造成一定伤害.而且会有一个大Boss镇守一座桥,以玩家目前的能力,是不可能通过的 ...

  2. Jupyter Notebook 编辑器美化

    汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai 2018-10-10新增Linux样式路径: Logo: ~/anaconda3/lib ...

  3. 清流,获取点击的img路径

    清流: <div style="clear:both"></div> 获取img的路径到TextBox3内: //获取展示的头像的集合var _heads ...

  4. 洛谷P3185 分裂游戏

    解:这个毒瘤...... 我们首先发现每一堆的个数对操作不产生影响,每个操作都是针对单个石子的. 所以等价于每个石子都是一个独立的游戏.把它们异或起来作为sg函数值即可. 单个石子的sg值,直接暴力计 ...

  5. js数组歌

    判断是不是数组,isArray最靠谱. 按照条件来判断,every/some给答案 是否包含此元素,includes最快速. find/findIndex很相似,按条件给第一个值. indexOf/l ...

  6. 基于LVM卷的MYSQL快照恢复

    在mysql数据库环境中,如果数据库数据很重要,可以使用LVM卷管理的方式,通过对数据卷进行快照,得到快速备份的目的, 首先回顾一下LVM卷管理的几个概念: 物理磁盘PD,physical disk, ...

  7. Altium Designer 18 ------ 原理图和PCB元器件互相查找

    方法一:单击选中原理图中元器件,然后单击tools>Seclect PCBcomponents,即可在PCB中看到该器件的高亮显示: 方法二:单击Tools>Cross Select Mo ...

  8. 微信小程序:多张图片上传

    最近在写小程序的相册,需要多张图片的上传.因为小程序不支持数组的多张图片同时上传,然后根据自己的需求+借鉴网上各位大神的案例,总算搞定.分享下,不足之处,多多指教哦 页面wxml: <form ...

  9. qml: 模块定义与使用

    1. 模块的定义qmldir Module   MyModule MyTest  1.0  MyTest.qml MyTest  1.3  MyTest.qml 2. 导入: 使用qrc: RESOU ...

  10. 2017-12-15python全栈9期第二天第三节之使用while循环输出0到10不包含7

    #!/user/bin/python# -*- coding:utf-8 -*-count = 0while count < 10: count += 1 if count == 7 : con ...