Bootstrap笔记

写在开始: 由于我对AngulaJS的学习只是一个最浅显的过程,所以看完后你大概只能学会如何简单的使用AngularJs,所以我对我的标题党行为道歉啦,嘿嘿

知识点扫盲

padding 在 width:auto 与 width:100%中的状况:

  • 在width: auto;中加padding会在width的 里面加 (在盒子里面)
  • 在width: 100%;中加padding会在width的 外面加 最后有可能超出外部容器

容器

  1. 液体容器

    1. // clearfix清除浮动
      width: auto;
      box-sizing: border-box;
      padding-left: 15px;
      padding-right: 15px;
      margin-left: auto;
      margin-right: auto;

      Less源代码

      //  让液体容器清除浮动
      .container-fluid:before,
      .container-fluid:after{
      content: " ";
      display: table;
      }
      .container:after{
      clear: both;
      } // 液体容器总代码
      .container-fluid{
      margin-right: auto;
      margin-left: auto;
      padding-left: 15px;
      padding-right: 15px;
      }
  2. 固定容器

    1. 阈值

      1. 当大于1200px时,设置页面宽度为1170px

        // 此处为clearfix清除浮动的样式
        // 此处为容器公共样式
        box-sizing: border-box;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: auto;
        margin-right: auto; //当小于768时,设置页面宽度为auto
        @media (max-width:768px){
        width : auto;
        } //当大于768px 小于992时,设置页面宽度为750px
        @media (min-width:768px){
        width : 750px;
        } //当大于992px 小于1200时,设置页面宽度为970px
        @media (min-width:992px){
        width : 970px;
        } //当大于1200px,设置页面宽度为1170px
        @media (min-width:1200px){
        width : 1170px;
        }
      2. Less源代码

        //  让固定容器清除浮动
        .container:before,
        .container:after{
        content: " ";
        display: table;
        }
        .container:after{
        clear: both;
        } // 固定容器总代码
        .container {
        margin-right: auto;
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px; // 用于媒体查询(响应式)的阈值 移动设备优先 顺序不能打乱! //max-width: @screen-sm-min ==> max-width: 768px ==> 手机移动端
        // 手机移动端
        @media (max-width: 768px){
        width: auto;
        }
        //平板
        @media (min-width: 768px) {
        width: 750px; //width: 720px+槽宽(30px)
        }
        //普通显示器
        @media (min-width: 992px) {
        width: 970px; //width: 940px+槽宽(30px)
        }
        //大屏显示器
        @media (min-width: 1200px) {
        width: 1170px; //width: 1140px+槽宽(30px)
        }
        }

    栅格系统

    1. 代码示例 ======> 使用栅格的方式

      <!-- 外部有容器包裹 -->
      <!-- 可以是液体容器也可以是固定容器 -->
      <div class="container">
      <!-- 容器里面先定义行 -->
      <div class="row">
      <!-- 12列占满固定容器 -->
      <!-- 默认为12列 -->
      <div class="col-lg-10">col-lg-10</div>
      <div class="col-lg-2">col-lg-2</div>
      </div>
      </div>

    源码分析部分

    外部容器
    1. 流体容器最后总样式

      // clearfix清除浮动
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
      padding-left: 15px;
      padding-right: 15px;
    2. 固定容器最后总样式

          // clearfix清除浮动
      width: auto;
      box-sizing: border-box;
      padding-left: 15px;
      padding-right: 15px;
      margin-left: auto;
      margin-right: auto; //当小于768时,设置页面宽度为auto
      @media (max-width:768px){
      width : auto;
      } //当大于768px 小于992时,设置页面宽度为750px
      @media (min-width:768px){
      width : 750px;
      } //当大于992px 小于1200时,设置页面宽度为970px
      @media (min-width:992px){
      width : 970px;
      } //当大于1200px,设置页面宽度为1170px
      @media (min-width:1200px){
      width : 1170px;
      }
      ```
    3. margin-left: -15px;
      margin-right: -15px;

      less源代码

      .row {
      .make-row();
      } .make-row(@gutter: @grid-gutter-width) {
      margin-left: ceil((@gutter / -2));
      margin-right: floor((@gutter / -2));
      }
      1. 第一步:所做工作:

        .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
        .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
        ...
        .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{
        position: relative;
        min-height: 1px;
        padding-left: 15px;
        padding-right: 15px;
        }

        less源代码

        // 所有尺寸的网格列(宽度1至12)的通用样式
        .make-grid-columns() {
        .col(@index) { // 初始化
        @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
        .col((@index + 1), @item);
        } //递归函数
        .col(@index, @list) when (@index =< @grid-columns) {
        @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
        .col((@index + 1), ~"@{list}, @{item}");
        } .col(@index, @list) when (@index > @grid-columns) {
        @{list} {
        position: relative;
        // 防止列在空时塌陷(至少保持有1px的高度)
        min-height: 1px;
        // 给予内边距用于排版
        padding-left: 15px;
        padding-right: 15px;
        }
        }
        .col(1); // 启动程序(递归)
        }

        上述代码的js实现

         var gc = 12;
        var item = [];
        //执行一个函数
        mgc(); function mgc(){
        //这个函数里面 调用一个函数
        col(1); //启动递归整体 function col(index){
        //里面的函数 再次调用一个函数
        var str = 'col-xs-' + index;
        item.push(str);
        index++; col2(index,item); function col2(index, item){ //当index > gc时,结束递归输出item结果
        if (index > gc){
        console.log(item);
        } //当index <= gc时, 递归调用 再次调用这个函数
        if (index <= gc){
        var str = 'col-xs-' + index;
        item.push(str);
        index++;
        col2(index,item); //递归调用
        }
        }
        }
        }
      2. 第2.1步:所做工作:

        .col-xs-1,
        .col-xs-2,
        .col-xs-3,
        ...
        .col-xs-12{
        float: left;
        }

        less源代码

        .make-grid(@class) {
        
            .float-grid-columns(@class) {
        .col(@index) {
        @item: ~".col-@{class}-@{index}";
        .col((@index + 1), @item);
        } .col(@index, @list) when (@index =< 12) {
        @item: ~".col-@{class}-@{index}";
        .col((@index + 1), ~"@{list}, @{item}");
        } .col(@index, @list) when (@index > 12) {
        @{list} {
        float: left;
        }
        }
        .col(1); // 启动递归
        } }

        第2.2步:所做工作:

        //指定  不同类型  下  列不同大小 栅格的宽度
        .col-xs-12{
        width: 12/12 %;
        }
        .col-xs-11{
        width: 11/12 %;
        }
        .col-xs-10{
        width: 10/12 %;
        }
        ...
        .col-xs-1{
        width: 1/12 %;
        }

        less源代码

        .make-grid(@class) {
        // LESS中的基本循环
        .loop-grid-columns(@index, @class, @type) when (@index >= 0){ //当@index>=0时 .calc-grid-column(@index, @class, @type); //执行width混合
        //下一次递归迭代
        .loop-grid-columns((@index - 1), @class, @type);
        } // width时候执行这个混合
        .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
        .col-@{class}-@{index} {
        width: percentage((@index / @grid-columns));
        }
        }
        }

        第2.3步:所做工作:

        // 栅格 列排序
        
        // push
        .col-xs-push-12{
        left: 12/12 %;
        }
        .col-xs-push-11{
        left: 11/12 %;
        }
        .col-xs-push-10{
        left: 10/12 %;
        }
        ...
        .col-xs-push-1{
        left: 1/12 %;
        }
        .col-xs-push-0{
        left: auto;
        } // pull
        .col-xs-pull-12{
        right: 12/12 %;
        }
        .col-xs-pull-11{
        right: 11/12 %;
        }
        .col-xs-pull-10{
        right: 10/12 %;
        }
        ...
        .col-xs-pull-1{
        right: 1/12 %;
        }
        .col-xs-pull-0{
        right: auto;
        }

        less源代码

        .make-grid(@class) {
        .loop-grid-columns(@grid-columns, @class, push);
        .loop-grid-columns(@grid-columns, @class, pull); // LESS中的基本循环
        .loop-grid-columns(@index, @class, @type) when (@index >= 0){ //当@index>=0时 .calc-grid-column(@index, @class, @type); //执行混合
        //下一次递归迭代
        .loop-grid-columns((@index - 1), @class, @type);
        } //=============这些都是混合的定义,用于供上面的 .loop-grid-columns 调用 // push时候执行这个混合
        .calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
        .col-@{class}-push-@{index} {
        left: percentage((@index / @grid-columns));
        }
        }
        .calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
        .col-@{class}-push-0 {
        left: auto;
        }
        } // pull时候执行这个混合
        .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
        .col-@{class}-pull-@{index} {
        right: percentage((@index / @grid-columns));
        }
        }
        .calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
        .col-@{class}-pull-0 {
        right: auto;
        }
        }
        }

        第2.4步:所做工作:

        // 栅格 列偏移(offset)
        // offset
        .col-xs-offset-12{
        margin-left: 12/12 %;
        }
        .col-xs-offset-11{
        margin-left: 11/12 %;
        }
        .col-xs-offset-10{
        margin-left: 10/12 %;
        }
        ...
        .col-xs-offset-1{
        margin-left: 1/12 %;
        }
        .col-xs-offset-0{
        margin-left: 0;
        }

        less源代码

        .make-grid(@class) {
        .loop-grid-columns(@grid-columns, @class, offset); // LESS中的基本循环
        .loop-grid-columns(@index, @class, @type) when (@index >= 0){ //当@index>=0时 .calc-grid-column(@index, @class, @type); //执行混合
        //下一次递归迭代
        .loop-grid-columns((@index - 1), @class, @type);
        } // offset时候执行这个混合
        .calc-grid-column(@index, @class, @type) when (@type = offset) {
        .col-@{class}-offset-@{index} {
        margin-left: percentage((@index / @grid-columns);
        }
        }
        }
      3. 栅格系统最终样式总结

      // ================    栅格容器  =====================
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
      padding-left: 15px;
      padding-right: 15px; // ================ 栅格行 =====================
      margin-left: -15px;
      margin-right: -15px; // ================ 栅格格子 =====================
      // 这是所有格子都有的样式
      position: relative;
      min-height: 1px; //限制最小高度
      padding-left: 15px; //用于文字的排版美观性
      padding-right: 15px; //用于文字的排版美观性 //格子的宽度
      <!-- 例子:xs下一个占12列的格子 列的默认总宽度为12
      12/12*100%
      width: 100%
      --> // 不同种类下不同格子的宽度
      width: 格子占列的大小/列的总大小*100% //width的值根据格子占列的大小 //如果格子需要右移 使用push
      left: auto //left的值根据格子占列的大小 0的时候为auto //如果格子需要左移 使用pull
      right: auto //right的值根据格子占列的大小 0的时候为auto //如果格子需要做偏移(这会影响其他格子的排列) 使用offset
      margin-left: 100% //auto的值根据格子占列的大小

栅格系统(盒模型)设计的精妙之处

  1. 外部容器(液体容器、固定容器)两边具有padding: 15px
  2. 行 两边具有margin: -15px
  3. 列 两边具有padding: 15px

  1. 为了美观而必须有槽宽

    • 列两边就必须具有padding: 15px
  2. 为了里面能继续嵌套行
    • 行两边就必须有margin: -15px来抵消列自身的槽宽

看完我的笔记不懂也会懂----bootstrap的更多相关文章

  1. 看完我的笔记不懂也会懂----AngulaJS

    目录 Angular.js学习笔记 ng-app(指令) ng-model ng-init angular之表达式 双向数据绑定 数据流向的总结 作用域对象 控制器对象 依赖对象与依赖注入 命令式与声 ...

  2. 看完我的笔记不懂也会懂----git

    Git学习笔记 - 什么是Git - 首次使用Git - DOS常用命令 - Git常用命令 - 关于HEAD - 版本回退 - 工作区.暂存区与版本库 - git追踪的是修改而非文件本身 - 撤销修 ...

  3. 看完我的笔记不懂也会懂----Node.js

    Node.js 学习 - 命令行窗口 - 进程与线程 - ECMAScript的缺点 - Node模块化 - Node中的全局对象 - 包 package - NPM包管理器 (Node Packag ...

  4. 看完我的笔记不懂也会懂----javascript模块化

    JavaScript模块化 模块化引子 模块化的历史进化 模块化规范 CommonJS规范 Node.js(服务器端) 下项目的结构分析 browerify(浏览器端) 下项目的结构分析 AMD规范 ...

  5. 看完我的笔记不懂也会懂----less

    目录 Less学习 语法篇 注释 变量 映射(Maps) @规则嵌套和冒泡 less中的嵌套规则 less中的混合 less的运算 extend延伸/继承 less忽略编译(转义) 导入(Import ...

  6. 看完我的笔记不懂也会懂----MongoDB

    MongoDb数据库学习 - 数据库的分类 - 数据库基本概念 - MongoDB常用指令 - MongoDB的CURD - sort({key:*[1,-1]}).limit(num).skip(n ...

  7. 看完我的笔记不懂也会懂----MarkDown使用指南

    目录 语法 [TOC] 自动生成目录 1. 标题 2. 文本强调 3. 列表 4. 图片 5. 超链接 6. 文本引用 7. 分割线 8. 代码 9. 任务列表 (MPE专属) 10. 表格 11. ...

  8. 看完我的笔记不懂也会懂----ECMAscript 567

    目录 ECMAscript 567 严格模式 字符串扩展 数值的扩展 Object对象方法扩展 数组的扩展 数组方法的扩展 bind.call.apply用法详解 let const 变量的解构赋值 ...

  9. 看完我的笔记不懂也会懂----Ajax

    Ajax(Asynchronous JavaScript And XML) - 本次学习所用到的插件 - XML - JSON - 关于AJAX - HTTP协议 - AJAX重点之XMLHttpRe ...

随机推荐

  1. [SCOI2009] [BZOJ1026] windy数

    windy定义了一种windy数.不含前导零且相邻两个数字之差至少为2的正整数被称为windy数. windy想知道, 在A和B之间,包括A和B,总共有多少个windy数?\(1 \le A \le ...

  2. 2019牛客暑期多校训练营(第五场)H.subsequence 2(拓扑)

    题意:给你一个字符串的长度n 现在询问了m*(m-1)/2次 每次都可以询问两个字符 然后 会告诉你只留下这两个字符后 字符串的样子 现在问你能不能还原字符串 如果能就输出字符串 否则输出-1 思路: ...

  3. 【noi 2.2_7891】一元三次方程求解(二分枚举+输出程序运行时间)

    对于noi上的题有2种解法: 1.数据很小(N=100),可以直接打for循环枚举和判断. 2.不会"三分",便用二分.利用"两根相差>=1"和 f(x1 ...

  4. Codeforces Round #648 (Div. 2) F. Swaps Again

    题目链接:F.Swaps Again 题意: 有两个长度为n的数组a和数组b,可以选择k(1<=k<=n/2)交换某一个数组的前缀k和后缀k,可以交换任意次数,看最后是否能使两个数组相等 ...

  5. Unmanaged Exports not creating a .lib file

    别用VS2017!别用VS2017!别用VS2017!去吧.

  6. [Golang]-3 函数、多返回值、变参、闭包、递归

    // test01 project main.go package main import ( "fmt" ) // 单返回值的函数 func plus(a int, b int) ...

  7. windows hook + pyhook3 + python win32api hook + C 键盘hook

    安装pyhook3见:https://www.cnblogs.com/lqerio/p/12096710.html 使用见:https://www.cnblogs.com/lqerio/p/12106 ...

  8. python 表达式

    运算符 参考 https://www.runoob.com/python3/python3-basic-operators.html & https://www.runoob.com/pyth ...

  9. Bootstrap巨幕

    这是一个轻量.灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容. jumbotron修饰 <div class="jumbotron"> <h1> ...

  10. Android 神奇的SpannableStringBuilder

    一 无图言屌 先看看神奇的效果 仅用一个TextView实现 二 SpannableStringBuilder Google官方介绍 This is the class for text whose ...