zoukankan      html  css  js  c++  java
  • 响应式布局 Bootstrap

    github介绍
                  (1)简单灵活可用于架构流行的 用户界面和交互接口 的html、css、javascript工具集
                  (2)基于html5、css3的bootstrap,具有大量的诱人特征:
                                        友好的学习曲线、卓越的兼容性、响应式设计、12列格网、样式向导文档
                  (3)自定义jQuery插件,完整的类库,基于Less
    下载

    b2 支持更广泛的浏览器 但 有兼容性等历史包袱,代码不够简洁,
    b3放弃了ie7 ff3.2,ie8虽然支持 但是对css3支持有限

    Bootstrap中的JS插件依赖于jQuery,因此jQuery要在Bootstrap之前引用

    1.基本模板(Basic template)
    样式表 放在 head里 而 最先加载完毕,而js在body 的 最后面。
    <!DOCTYPE html>
    <html lang="zh-cn">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>你好,世界!</h1>
    
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>
    bootstrap不支持 ie 兼容模式,运用 以下 在ie 中运行 最新 渲染模式
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    
    初始化 移动浏览显示,
    "width=device-width":宽度=设备 宽度;
    "initial-scale"设置 初始缩放比例,值 1 表示 不缩放。
    让视口的宽度等于物理设备上真实的分辨率,初始缩放比例为1表示不做任何缩放。(加上以下代码 可 适配 移动浏览器):
    <meta name="viewport" content="width=device-width, initial-scale=1">
    为IE6、7、8(IE9以下版本) 添加 媒体查询(兼容css3样式)、HTML5标签 的支持  
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->


    全局 CSS 样式

    Bootstrap 不再 一味 追求 归零, 更注重 重置可能产生问题 的样式(如,body,form的margin等),保留和坚持部分浏览器的基础样式,解决部分潜在的问题,如下:

      • 移除body的margin声明
      • 设置body的背景色为白色
      • 为排版设置了基本的字体、字号和行高
      • 设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式
  • 相关阅读:
    【软件构造】Lab1基本流程指导及重难点分析
    【软件构造】关于java中List和Set数据结构不同实现方式和不同遍历方式时间效率的探讨与分析
    程序人生-Hello’s P2P
    WinterCamp2017吃饭睡觉记
    bzoj 3144 [Hnoi2013]切糕
    bzoj 1565 [NOI2009]植物大战僵尸
    bzoj 1061 [Noi2008]志愿者招募
    序列
    Philosopher
    时机成熟之时
  • 原文地址:https://www.cnblogs.com/Sisiflying/p/6110879.html
Copyright © 2011-2022 走看看