H5框架之Bootstrap(二)
H5框架之Bootstrap(二)
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋。。。。继续
上一篇的已经把bootstrap了解个大概了,接下来我们就开始学习一下它里面的东西。
浏览器支持
旧的浏览器可能无法很好的支持
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
例如:
<span class="glyphicon glyphicon-refresh"></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) {
…
}
….


意思我就不说了,相信你能看懂
其它的好像没什么了,后面在讲实例的时候我们再回头去分析与之对应的
-转载
H5框架之Bootstrap(二)的更多相关文章
- 旺财速啃H5框架之Bootstrap(五)
在上一篇<<旺财速啃H5框架之Bootstrap(四)>>做了基本的框架,<<旺财速啃H5框架之Bootstrap(二)>>篇里也大体认识了bootst ...
- 旺财速啃H5框架之Bootstrap(三)
好多天没有写了,继续走起 在上一篇<<旺财速啃H5框架之Bootstrap(二)>>中已经把CSS引入到页面中,接下来开始写页面. 首先有些问题要先处理了,问什么你要学boot ...
- 旺财速啃H5框架之Bootstrap(四)
上一篇<<旺财速啃H5框架之Bootstrap(三)>>已经把导航做了,接下来搭建内容框架.... 对于不规整的网页,要做成自适应就有点玩大了.... 例如下面这种版式的页面. ...
- H5框架之Bootstrap(一)
H5框架之Bootstrap(一) 接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了 ...
- 旺财速啃H5框架之Bootstrap(二)
突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接 ...
- 旺财速啃H5框架之Bootstrap(一)
接下来的时间里,我将和大家一起对当前非常流行的前端框架Bootstrap进行速度的学习,以案例的形式.对刚开始想学习Bootstrap的同学而找不着边的就很有帮助了.如果你想详细的学习Bootstra ...
- 旺财速啃H5框架之Bootstrap(六)
年后太忙,一直没有更新 好,这篇结束,速啃嘛,就应该拿重点,实用点.继续之前的内容,接着来讲讲网页中常用的布局组件与插件,我喜欢用简单的直接的话或案例来说明,就是针对那些想快速能做出点东西的人而准备的 ...
- 关于H5框架之Bootstrap的小知识
浏览器支持 旧的浏览器可能无法很好的支持 Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器 CSS源码研究 我们不是在head里面引入了下面这些文件么 &l ...
- 前端(三大框架、Bootstrap,jQuery,自整理)
前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...
随机推荐
- (HDU 5558) 2015ACM/ICPC亚洲区合肥站---Alice's Classified Message(后缀数组)
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=5558 Problem Description Alice wants to send a classi ...
- Idea开发环境中搭建Maven并且使用Maven打包部署程序
1.配置Maven的环境变量 a.首先我们去maven官网下载Maven程序,解压到安装目录,如图所示: b.配置M2_HOME的环境变量,然后将该变量添加到Path中 备注:必须要有JAVA_HOM ...
- 西南大学校园GIS平台
系统架构是B/S,开发语言是C#.silverlight,开发平台是.NET,数据库为sqlserver,这是我读研究生时候自己做的作品,以自己的母校为地图,进行GIS相关的功能分析,核心的模块有:空 ...
- UITableView优化
作为iOS开发,UITableView可能是平时我们打交道最多的UI控件之一,其重要性不言而喻. 关于TableView,我想最核心的就是UITableViewCell的重用机制了. 简单来说呢就是当 ...
- iOS UITableView的使用 (选自oschina)
1.新手篇创建tableView http://my.oschina.net/joanfen/blog/203041 2.进阶篇列表中行的操作 http://my.oschina.net/jo ...
- Android自定义ViewGroup,实现自动换行
学习<Android开发艺术探索>中自定义ViewGroup章节 自定义ViewGroup总结的知识点 一.自定义ViewGroup中,onMeasure理解 onMeasure(int ...
- 【代码笔记】iOS-圆角矩形
代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. se ...
- [原创]python之简单计算器(超详解,只有基本功能+-*/,还有括号处理)
不想看过程的话,直接看文章最后的正式源码 作业需求及分析: 流程图 https://www.processon.com/diagraming/580c5276e4b03c844a5a9716 初期感 ...
- (四)新建Maven项目
我们以简单的helloworld来作为入门的实例,有些人说掌握了helloworld你就掌握了这门技术的一半了,对于maven来说,你掌握helloworld,你可能还稀里糊涂的. 1.从maven模 ...
- SE(homework3)_敏捷模型
今天老师上课主要和我们讲解了软件开发模型类型.既然是敏捷模型,那么什么是非敏捷模型呢?了解这里点,会更清楚什么是敏捷模想.我们所知道的非敏捷模型有瀑布模型,我们知道这是早期软件开发的经典模型,流程主要 ...