• css框架


    CSS框架

    960Grid

    即960布局,现基本不再使用

    Bootstrap

    需将页面设置为HTML5文档类型

    1. 引入外部CSS文件

    使用<link>引入,一般只引入核心文件,主题文件不引入

    2. 移动设备优先

    <head>标签中添加viewport元数据标签

    <meta name="viewport" content="width=device-width,inital-scale=1">
    可视区的宽度,值为device-width
    intial-scale:页面首次被显示时可视区域的缩放级别,取值为1.0则页面按实际尺寸显示,无任何缩放
    

    3. 布局容器

    Bootstrap需为页面内容和栅格系统包裹一个.container容器:

    .container类用于固定宽度并支持响应式布局的容器
    .container-fluid类用于100%宽度
    

    栅格系统

    通过行(row)和列(column)的组合创建页面布局

    1. 工作原理

    1..row必须包含在.container.container-fluid
    2.通过.row在水平方向上创建一组列.col
    3.内容应该在.col中,且只有.col可作为.row的直接子元素
    4..col的范围为1~12

    2. 栅格参数

    .col-xs-(xs是extra small的缩写) <768px 
    .col-sm-(sm是small的缩写)       >=768px
    .col-md-(xs是middle的缩写)      >=992px
    .col-lg-(xs是large的缩写)       >=1200px
    

    xs总是水平排列,sm、md、lg开始始堆叠在一起,超过这些值后水平排列

     

  • 相关阅读:
    网站压力测试工具----webbench
    skin.xml
    krpano和react的结合展示
    swiper的相关用法
    js的hover实现方法。
    js的slice和split和splice和substring和substr的区别
    使用JSSDK分享页面
    微信jssdk分享功能开发
    点击复制
    JS的document.all函数使用 示例
  • 原文地址:https://www.cnblogs.com/justsilky/p/6833400.html
Copyright © 2020-2023  润新知