less与bootstrap

zLe
300 阅读3分钟

1.less的定义

  1. Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
  2. 建议less样式在vscode中less文件夹中新建.less

2.less语法的使用

1.嵌套关系的语法使用

1.根据HTML的标签骨架进行编写less语法，HTML语法骨架如下

<body>
    <div>
      <ul>
          <li>
              <a href="#">
                  <span>
                      <i></i>
                  </span>
              </a>
          </li>
      </ul>
    </div>
</body>

2.根据HTML嵌套关系编写less，如下

div {
	
    ul {

        li {

            a {
                span {

                    i {
                        
                    }
                    
                }
            }
        }
    }
}

3.注意到是如果是嵌套关系，那么子元素样式会逐层递减下去，兄弟关系便会并列排放。

2.less的定量语法

1.首先在less中定义一个变量，变量名建议和变量值相关联，如下，

2.定义变量后，可以直接引用变量替代修饰值。

@color:pink;


div {
    background-color: @color;
}

3.less的运算语法

1.less的运算有加减乘除。

2.要注意的是除法运算时需要括号包着。

如下运算


div {
    width: 200 - 100px;
    height: 100 * 2px;

}

p {
	height：(300px/3)
}

4.less的混合使用

1.需要先定义一个混合 固定语法（混合在less出现一般有公共部分样式时使用）

.混合名 ( @变量1，@变量2 )  {

​ 共同的样式表达式

​ }

2.样式引用混合即可

//定义一个混合 语法固定 
.item(@x1,@y1) {
    background-image: url(.1png);
    background-repeat: no-repeat;
    background-size: 100%;

    background-position: @x1 @y1;
}


//在元素中使用混合即可
div {
    .item(-300px,-30px);

}

a {
    .item(-200px,-20px);
}

p {
    .item(-100px,-40px );
}

2.媒体查询

1.定义

1.根据不同的设备的变化，网页的样式也会变化。

2.媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

1648035991975.png

2.常用的媒体特性写法

1.max-width

2.min-width

//当屏幕宽度为300px时 背景颜色为红色
@media screen and （width：300px）{
	body {
		background-color：red；
	}
}

3.宽度变化时的差异化

1.媒体特性主要是用来说描述媒体类型的具体特征，如当前屏幕的宽高，分辨率，横屏或竖屏。

1648036181077.png

4.通过外联引入媒体查询的css样式

1648036303673.png

3.Bootstrap响应式

1.含义

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定

HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网: www.bootcss.com/

2.引用Bootstrap的样式

1.官网： www.bootcss.com/

2.首页 → BootStrap3中文文档 → 下载BootStrap

3.下载生产环境的Bootstrap

1648036522779.png

3.在vscode中引用

1.引入Bootstrap提供的css代码（tietle标签下面书写）

<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">

2.引用bootstrap中的jquery.js和bootstrap.js如下在body标签下

<script src="./lib/bootstrap完整版/jquery.js"></script>
<script src="./lib/bootstrap完整版/js/bootstrap.js"></script>

4.bootstrap的栅格系统

1.含义

1.栅格化是指将整个网页的宽度分成若干等份 ，bootstrap3默认分为12等份。

1648036938691.png

2.栅格系统的.container类

1.含义

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。

.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。

分别使用.row类名和 .col类名定义栅格布局的行和列。

2.注意的是.container类自带间距15px，row类自带-15px

5.全局样式

1.bootstrap中有很多css样式可以引用。

2.寻找路径是

网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类

`

avatar
文章
阅读
粉丝