HTML5技术

旺财速啃H5框架之Bootstrap(二) - 天堂路上

字号+ 作者:H5之家 来源:H5之家 2016-12-23 16:01 我要评论( )

突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋。。。。继续 上一篇的已经把bootstrap了解个大概了,接下来我们就开始学习一下它里面的东西。 浏览器支持 旧的浏览器可能

突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋。。。。继续

上一篇的已经把bootstrap了解个大概了,接下来我们就开始学习一下它里面的东西。

浏览器支持

旧的浏览器可能无法很好的支持

Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器

CSS源码研究

我们不是在head里面引入了下面这些文件么

OK,看核心的,这里从bootstrap.min.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

更多字体图标,看这个:

例如:

<span></span>

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

273行到885行全是关于字体相关的css属性

第五个

@media

这个就做自适应就显得重要了,先看它是什么鬼。

字体上就是媒体的意思,其实原理就是规定不同媒体(设备)应用不同的样式而已

 

@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~~~

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信js框架第二篇(创建完整界面布局) - L-H

    微信js框架第二篇(创建完整界面布局) - L-H

    2016-12-22 15:05

  • 记一次和阿里某总监对话引发的思考:说说你框架的设计思路和优点亮点! - 路过秋天

    记一次和阿里某总监对话引发的思考:说说你框架的设计思路和优点亮点

    2016-12-20 11:00

  • MVC系列——MVC源码学习:打造自己的MVC框架(三:自定义路由规则) - 懒得安分

    MVC系列——MVC源码学习:打造自己的MVC框架(三:自定义路由规则)

    2016-11-03 18:00

  • MVC系列——MVC源码学习:打造自己的MVC框架(二:附源码) - 懒得安分

    MVC系列——MVC源码学习:打造自己的MVC框架(二:附源码) - 懒得安

    2016-10-31 15:00

网友点评
d