• 响应式布局 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”状态时才会显示下划线样式
  • 相关阅读:
    Springboot集成Junit
    springboot集成mybatis
    使用Spring Initializr快速创建Springboot工程
    Tungsten Replicator学习总结
    Java代理模式汇总
    Java定时任务的常用实现
    Java对象序列化剖析
    最适合作为Java基础面试题之Singleton模式
    MyCat源码分析系列之——结果合并
    MyCat源码分析系列之——SQL下发
  • 原文地址:https://www.cnblogs.com/Sisiflying/p/6110879.html
Copyright © 2020-2023  润新知