zoukankan      html  css  js  c++  java

  • 关于H5框架之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- 768px){ //>=768的设备 }
@media (min- 992px){ //>=992的设备 }
@media (min- 1200){ //>=1200的设备 }
注意下顺序，如果你把@media (min- 768px)写在了下面那么很悲剧，
@media (min- 1200){ //>=1200的设备 }
@media (min- 992px){ //>=992的设备 }
@media (min- 768px){ //>=768的设备 }
因为如果是1440,由于1440>768那么你的1200就会失效。
所以我们用min-width时，小的放上面大的在下面，同理如果是用max-width那么就是大的在上面，小的在下面
@media (max- 1199){ //<=1199的设备 }
@media (max- 991px){ //<=991的设备 }
@media (max- 767px){ //<=768的设备 }
    复制代码
    复制代码
    复制代码
    复制代码
    复制代码

    再次声明：如果是min-width设置的，小的在上面，大的在下面，max-width设置的，大的在上面，小的在下面

    知道了这个，那么我们想是不是可以混合使用了呢。指定某个区间，看下面：

    复制代码
    复制代码
    复制代码
    复制代码
    复制代码
    @media screen and (min- 960px) and (max- 1199px) { 
…
}
@media screen and (min- 768px) and (max- 959px) {
…
}
….
    复制代码
    复制代码
    复制代码
    复制代码
    复制代码

    意思我就不说了，相信你能看懂

    其它的好像没什么了，后面在讲实例的时候我们再回头去分析与之对应的

    -转载
  • 相关阅读:
    JDK5后的特性整理
    正向代理与反向代理的区别与异同
    我所用过的nginx的功能
    网页端消息推送之推与拉
    在一个py脚本中调用另外一个py脚本中的类或函数
    import与from ... import ...的区别
    python 读取文件
    shell中的特殊变量IFS
    shell 重定向以及文件描述符
    shell下读取文件数据
  • 原文地址：https://www.cnblogs.com/alinaxia/p/6227602.html
Copyright © 2011-2022 走看看