沸腾财速啃H5框架的Bootstrap(二)

忽然感觉不知底写什么,脑子里没回了,可能是盖今晚要出来浪,哈哈~~~提前提醒大家平安夜而回家啊,圣诞节生00000000000这么多蛋。。。。继续

上一篇的已经拿bootstrap了解个大概了,接下去我们就起上一下她其中的东西。

浏览器支持

原有的浏览器可能无法充分好的支撑

图片 1

Bootstrap 支持 Internet Explorer 8 及重新胜似版本的 IE 浏览器

CSS源码研究

俺们不是在head里面引入了下面这些文件也

<!-- 新 Bootstrap 核心 CSS 文件 --> 
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

OK,看核心之,这里打bootstrap.min.css开始,这是减掉了的,看之言语最好好看没有抽的本:http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.css

本身谈的就算是按不减少版本的CSS来运动之

266实施之前多都是签格式化、初始化的有的东西,为了让某些同学又好理解,我将一部分独特的大致提一下。

第一个

input[type="number"]

CSS属性选择器,可能对新家的话,或无写过之小盆友就未熟识了,这个特性就是针对性<input
type=”number”/>标签进行体制渲染,知识
这个,我怀念你不怕知其他的怎么去写了

第二个

display: block;   

此你恐怕会见说:“这个自家掌握,转换元素特性呀~~~”,哈哈,没错,但你明白具体转了见面怎么,或为什么要改,与的对应之同时是什么啊?

好,我大致说一下(会的爱侣就甭看了),在HTML里面有”块元素”与”行内元素”之说,它们各自的默认主要特点:

块元素:独占一行,能安装富有、高度,默认宽度是父容器的100%

行内元素:不把一行,不可知装富有、高度

喻者后,那么受元素加以一个display: block;
就是拿元素转换成块元素,让要素得以装富有、高度。OK,现在清楚是的用法了吧

第三个

color: #000 !important;

此嘛,前面有肯定懂得,后面!important是啊鬼??? 
优化级,也就是说,当其企图及某某一个素上时常,只要是支持她的浏览器还见面预先为color:#000;,而无随便后面来同之习性让掩盖(当然覆盖的属于性值没有加!important的情)。

第四个

@font-face

267行,这个特性是CSS3里面的,主要成效就是拿自定义之web字体嵌入到您的网页中,这样即便即你的网页不示有转移独计算机上从不底字了。用别个的说话说,这让字体图标,字体图标很多系都来,不是bootstrap才有的啊,好处就能管图标像字一样采取,像啊改观颜色,设置约什么的。好吧,那该怎么用吧?

哄,其实不用无,已经做好了之~~~看下面

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')
 …
}

关押,CSS引入了几乎独文本,在上面目录的fonts文件中,自己打开去探视,不就是就几只呢,当然你不用失去随便它了,知道怎么回事就OK

再也多书图标,看这个:http://noob.d8jd.com/noob/5/117.html

例如:

一个刷新的字体图标就出去了

273实践到885实践都是关于字体相关的css属性

第五个

@media

本条就召开打适应就显重要了,先押它们是啊不良。

字上即是传媒之意,其实原理就是规定不同媒体(设备)应用不同之体制而都

 图片 2

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧,
@media (min-width: 1200){ //>=1200的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }

再宣称:若是是min-width设置的,小的以方,大之以下面,max-width设置的,大的在面,小之于脚

接头了这,那么我们想是勿是得混使用了为。指定某个区间,看下面:

@media screen and (min-width: 960px) and (max-width: 1199px) { 
…
}
@media screen and (min-width: 768px) and (max-width: 959px) {
…
}
….

意思我就是不说了,相信您可知看明白

其它的近乎没什么了,后面在讲实例的时段咱们重新回头去分析和的相应的

~过节了,真心想耍,今天over~

相关文章