zoukankan      html  css  js  c++  java
  • 【分享】bootstrap学习笔记

    一、基础知识

    1.整体架构
    以响应式设计为理念,css组件、js插件+jquery、基础布局组件和12栅格系统搭建。
    1.1响应式设计:结合media query查询,适应更多设备,自动适应用户的设备环境,不必为每个终端做一个特定的版本。
    2.css12栅格系统
    将容器平分12份,行(row)必须包含在.container中,只有列(column)可作为行的直接子元素。ps:如果要充满屏幕100%显示,那就不能用container样式了,因为该样式针对4种不同的屏幕大小固定了尺寸,可自己定义一个样式,注意修复container的-15px的外边距。
    3.基本用法
    3.1列组合:使用数字来合并,有点类似colspan,col-md-4,其中col指的是列,md指的是中型屏幕,4指的是12列中占4列的宽度,实现方式为左浮动加宽度百分比
    3.2列偏移:使用offset来定义,具体样式如:.col-md-offset-*,实现原理是利用1/12的margin-left
    3.3列排序:通过push(推)和pull(拉)来改变左右浮动,以左为基准
    4.响应式栅格
    4.1跨设备组合定义:md-中屏,超小-xs,小型-sm,大屏-lg。向大兼容,不支持向小兼容。
    4.2清除浮动:在定义支持多个设备的样式时,比如:col-xs-6 col-sm-3,在超小屏有可能会发生错位,需要用clearfix来清除,比如:<div class="clearfix visible-xs"></div>,visible-xs是指当能够在超小屏幕上显示
    5.css组件
    原理:附加和覆盖的原则,后边的样式覆盖掉前面的样式
    5.1颜色样式:默认为很多组件提供了5种颜色,分别是primary(重点蓝)、success(成功绿)、info(信息蓝)、warning(警告橙)、danger(危险红)
    5.2尺寸样式:一般组件都有4种尺寸:超小(xs)、小型(sm)、普通(default也可以不写,默认)、大型(lg)。
    同一个组件的不同类型的样式可以组合到一起使用,比如颜色样式btn-success和尺寸样式btn-lg,示例:btn btn-success btn-lg
  • 相关阅读:
    解决Servlet无法换行
    Servlet页面解析中文乱码问题
    IDEA2020版创建Servlet(Web项目)完整教程
    SPFA算法
    最短路算法Dijkstra
    搜索与图论总结
    Kruskal算法
    第10章 嵌入式Linux 的调试技术
    第9章 硬件抽象层:HAL
    第八章 让开发板发出声音:蜂鸣器驱动
  • 原文地址:https://www.cnblogs.com/zinan/p/5809585.html
Copyright © 2011-2022 走看看