Bootstrap教程

最新推荐文章于 2023-06-03 18:00:00 发布

WEXIA666

最新推荐文章于 2023-06-03 18:00:00 发布

阅读量423

点赞数

分类专栏：前端文章标签： bootstrap javascript css

本文链接：https://blog.csdn.net/WEXIA666/article/details/118565441

版权

前端专栏收录该内容

32 篇文章 2 订阅

订阅专栏

Bootstrap教程

容器：

1、流体容器 class=“container-fluid”

2、固定容器 class=“container”

阈值 width

大于等于1200（lg 大屏pc） 1170（1140+槽宽）

大于等于992小于1200（md 中屏pc） 970（940+槽宽）

大于等于768小于992（sm 平板） 750（720+槽宽）

小于768 （xs 移动手机） auto(相当于流体容器)

3、栅格系统 class=“row”

一行十二块，要合理拆分

4、源码分析

1. 栅格 grid.less 所有变量存储在 variables.less

        margin-right: auto;
        margin-left: auto;
        padding-left:  floor((@gutter / 2));  // 向下取整
        padding-right: ceil((@gutter / 2));   // 向上取整

2. 固定容器特定样式必须从小到大排，一次次覆盖顺序不可变

        @media (min-width: @screen-sm-min) {
          width: @container-sm;
        }
        @media (min-width: @screen-md-min) {
          width: @container-md;
        }
        @media (min-width: @screen-lg-min) {
          width: @container-lg;

3. 行

        margin-left:  ceil((@gutter / -2));  //-15px
        margin-right: floor((@gutter / -2));  //-15px

4. 列

运用less的递归：自己调用自己，变量数一样移动端最小的优先，如果定义里面有lg，md等，页面变小的话，lg不适用的话，会变成md适用，自动改成适用的。

    列的第一个混合：  
	.make-grid-columns() {
            .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;   // 用来列排序，后面改变了left和right
              min-height: 1px;
              padding-left: 15px;
              padding-right: 15px;
        }
        
    列第二步：
    .make-grid(@class) {
   				 //2.1
 		 .float-grid-columns(@class);
                 * .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{
             	 *     float: left;
        
            //2.2
          .loop-grid-columns(@grid-columns, @class, width);
            	 * .col-xs-12{
                 *     width:12/12;
                 * }
                 * .col-xs-11{
                 *     width:11/12;
                 * }
                 * ...
                 * .col-xs-1{
                 *     width:1/12;
                 * } 
        
        //2.2（width） 2.3（pull push） 2.4（offset）的入口
          .loop-grid-columns(@index, @class, @type) when (@index >= 0) {
             .calc-grid-column(@index, @class, @type);
             .loop-grid-columns((@index - 1), @class, @type);
           }
                     
                     
            //2.3(列排序)
          .loop-grid-columns(@grid-columns, @class, pull);
          .loop-grid-columns(@grid-columns, @class, push);
                 /*push                  pull:
                 * .col-xs-push-12{         .col-xs-pull-12{
                 *     left:12/12;              right:12/12;
                 * }                        }
                 * .col-xs-push-11{
                 *     left:11/12;
                 * }
                 * ...                      ...
                 * .col-xs-push-1{
                 *     left:1/12;
                 * }
                 * .col-xs-push-0{           .col-xs-pull-0{
                 *     left:auto;               right:auto;
                 * }                         }
                 * */    
                     
                     
                     
            //2.4(列偏移)
          .loop-grid-columns(@grid-columns, @class, offset);
        }
                 * .col-xs-offset-12{
                 *     margin-left:12/12;
                 * }
                 * .col-xs-offset-11{
                 *     margin-left:11/12;
                 * }
                 * ...
                 * .col-xs-offset-1{
                 *     margin-left:1/12;
                 * }
                 * .col-xs-offset-0{
                 *     margin-left:0;
                 * }
                 * */

5、栅格实例

响应式布局：一套代码布局，适用三个端，pc，平板，手机端

        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

	<div class="col-lg-3 col-lg-push-3 col-md-4 col-md-pull-0  col-sm-6 col-sm-pull-6">

每个行列顺序都要有，pull-0 都要留

        .clearfix {
          .clearfix();
        }

6、栅格盒模型设计的精妙之处

容器上两边具有15px的padding ：为了适应行开始设置的-15px的padding，-15px会比原来的大

行两边具有-15px的margin ：为了防止出现列里面再套行时所产生的槽宽不等现象

列两边具有15px的padding ：为了维护槽宽的规则，列两边必须有15px 的padding

7、Bootstrap实例

1.复制 bootstrap里面的入门的基本模板，构建初始页面

2.复制粘贴

3.有全局css样式、组件、还有 JavaScript插件，JavaScript插件里面有些可以单独设置参数

5. a 标签引用JavaScript

标签的 href 属性用于指定超链接目标的 URL，href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。

a中调用js函数的方法总结

- a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" onclick="js_method()"
- a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method()"
- a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" onclick="js_method();return false;" 
- a href="javascript:js_method();" rel="external nofollow" rel="external nofollow"

8、less 的补充复习

1.less的继承

#test{

&:extend(.father)

} 或者

#test:extend(.father){

} 建议用第一种

继承实质上将.father选择器和#test组合成一个选择器，声明块使用.father的

all:继承所有和.father相关的声明块

切记父类不能定义成混合（继承不灵活性能搞混合灵活性能低）

2. less 的避免编译：

~“不会被编译的内容”

变量在less中属于块级作用域，延迟加载

3.bootstrap栅格系统&源码分析

流体容器： width：auto auto跟100%的区别，如果加了padding会有点区别

固定容器：阈值 xs，sm，md，lg

行：两侧-15px margin

列：公共样式两侧有15px的padding 相对定位

：float width：1~12 left right ：0~12 0：auto

9、bootstrap定制化

办公自动化（Office Automation，简称OA）OA系统

to b to business to c to customer

B/S（browser/server） C/S(client/server)

不改源码，更改参数方法：

新建一个less文件，最后编译成css之后，引用该css文件

			@import  “../less/bootstrap.less”  // 引入源码文件
			@grid-gutter-width:200px    // 要修改的参数以及对应的值

jQuery四大特征： //1.链式调用 2.读写二合一 3.隐式迭代 4.编码函数化

WEXIA666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap教程

Bootstrap教程容器：1、流体容器 class=“container-fluid”2、固定容器 class=“container” 阈值 width 大于等于1200（lg 大屏pc） 1170（1140+槽宽）大于等于992小于1200（md 中屏pc） 970（940+槽宽）大于等于768小于992（sm 平板） 750（720+槽宽）小
复制链接

扫一扫