zoukankan      html  css  js  c++  java
  • bootstrap常见class汇总及其他笔记

    一.container 最外部容器

    作用:对不同屏幕规定不同大小样式宽度,并且设置15像素左右内边距,居中

    二.网格相关

    row 行 使用行在水平方向创建一组列,设置左右15px外边距,抵消外部容器container在两侧的15px留白。

    col-*-*: 列 (第一个*可以为xs[超小]/sm[小型]/md[中型]/lg[大型]第二个*必须为12以内的[列数])

    col-*-offset-* :列偏移(第一个*和上面一样,第二个*范围是1到11,表示把该列的左外边距(margin)增加*列)

    col-*-*-*:列排序(第一个*和上面一样,第二个*可以为push[向右]/pull[向左],第三个*范围是1到11[列数])

    三.概述

    1.使用Html5

    2.移动先行之meta标签<meta name='viewport' content='width=device-width initial-scale=1.0'>,通过添加user-scalable=no,禁用收放功能,用户只能滚动屏幕。

    即 <meta name='viewport' content='width=device-width initial-scale=1.0,maximum-scale=1.0,user-scalable=no'>

    3.响应式图片           为img元素添加class:img-responsive

    4.排版链接相关,body的margin设为0,背景白色,默认字体Helvetica Neue、 Helvetica、 Arial 和 sans-serif,大小14px.line-height,1.4(20/14).

    四.基础排版

    1.重新调整了标题h1到h6,大小以14px为系数

    h1到h3,系数分别为2.6,2.15,1.7,上外边距20px,下外边距20px

    h4到h6,系数分别为1.25,1,0.85,上外边距10px,下外边距10px

    其余待续

    2.表格

    able:基本样式(只有横向分隔线)

    table-*:表格样式(*可以为striped[添加条纹]/bordered[添加边框]/hover[启用悬停]/condensed[更加紧凑])

    tr/th/td 有active/success/info/warning/danger来改变背景颜色

    将任意的table放在class为table-responsive的元素内,实现响应式表格

        

  • 相关阅读:
    Javascript入门(三)函数
    Javascript入门(二)变量、获取元素、操作元素
    Javascript入门(一)弹出方框
    Linux常用命令(二)查找当前ip地址
    python笔记(一)获取当前目录路径和文件
    Linux常用命令(一)查看日志
    产品对话 | 愿云原生不再只有Kubernete
    在线公开课 | 5G时代的视频云服务关键技术与实践
    IT培训行业变革大会,7月11日启程!
    业内首发 | 区块链数据服务
  • 原文地址:https://www.cnblogs.com/cumting/p/6751949.html
Copyright © 2011-2022 走看看