T-Bootstrap-day04-组件、boot的定制、scss基础语法和函数

奋斗胖

已于 2022-03-24 23:53:09 修改

阅读量254

点赞数

分类专栏： + CSS 文章标签： bootstrap

于 2020-04-19 23:40:35 首次发布

本文链接：https://blog.csdn.net/Mr_JinChang/article/details/105625213

版权

+ CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

一.常用组件
二.其他组件
boot的定制
一.SCSS，动态的样式语言（nodejs 8.11以上）
二.scss基础语法
三.scss的函数
四.指令(if-else)

一.常用组件

卡片
div .card 弹性，y轴，背景，边框
div .card-header
div .card-body
div .card-footer
使用场合，把纵向排列的内容，放到卡片中使用

<h4>卡片</h4>
<div class="card">
    <div class="card-header">
        <h4>天地银行开发部</h4>
    </div>
    <div class="card-body">
        <h2>小明</h2>
    </div>
    <div class="card-footer">
        <p>110-119-120</p>
    </div>
</div>

手风琴效果（卡片+折叠）

结构
div#parent
div .card
div .card-header
a
div .collapse
div .card-body

事件
a data-toggle="collapse" href="#折叠div的id"
div.collapse data-parent="#最外层div的id"

<h4>手风琴</h4>
<!-- 用paient的目的：是为了让子div只能有一个是打开的状态,在在折叠div设置data-parent="#parent"与之配合 -->
<div id="parent">
    <div class="card">
        <div class="card-header">
            <a data-toggle="collapse" href="#d1" class="bnt btn-link">按键1</a>
        </div>
        <!-- 注意：此处把card-body放在collapse中，是因为写在一起有冲突，折叠文字会出现卡顿，并且如果先写card-body在写collapse，会出现折叠隐藏，但位置空出来 -->
        <div id="d1" class="collapse" data-parent="#parent">
            <div class="card-body">
                拉宽
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <a data-toggle="collapse" href="#d2" class="bnt btn-link">按键2</a>
        </div>
        <div id="d2" class="collapse" data-parent="#parent">
            <div class="card-body">
                拉宽
            </div>
        </div>
</div>

媒体对象
div .media 弹性，x轴
img
div .media-body

<h4>媒体对象</h4>
<div class="media borde p-3r">
    <img src="img/1.jpg" alt="">
    <div class="media-body ml-3">
        <h4>风景</h4>
        <p>花的图片</p>
    </div>
</div>

二.其他组件

徽章----小按钮
badge 基本类
badge-danger/warning...
胶囊徽章 badge-pill

<h4>徽章</h4>
<ul class="list-group">
    <li class="list-group-item">
        赞<a href="#" class="badge badge-success">10</a>
    </li>
    <li class="list-group-item">
        踩<a href="#" class="badge badge-danger">11</a>
    </li>
    <li class="list-group-item">
        <!-- 胶囊徽章badge-pill -->
        关注<a href="#" class="badge badge-warning badge-pill">12</a>
    </li>
</ul>

巨幕
jumbotron 巨大的内边距，边框，圆角，背景色

<h4>巨幕</h4>
<div class="jumbotron">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam unde aspernatur impedit voluptatibus at placeat temporibus autem numquam. Eligendi eaque aliquam fugiat earum consequuntur aperiam odio debitis odit officiis voluptas.
</div>

分页
ul .pagination 弹性，x轴，去除左内边距和点，添加圆角
li .page-item 让第一个li和最后一个li中的a标签，添加左右圆角
a .page-link 块级，内边距，左外边距，文本样式
li设置.active 让内部a标签显示选中状态
li设置.disabled 让内部a标签显示禁用状态

<h5>分页</h5>
<ul class="pagination">
    <li class="page-item disabled">
        <a href="" class="page-link">上一页</a>
    </li>
    <li class="page-item active">
        <a href="" class="page-link">1</a>
    </li>
    <li class="page-item">
        <a href="" class="page-link">2</a>
    </li>
    <li class="page-item">
        <a href="" class="page-link">3</a>
    </li>
    <li class="page-item">
        <a href="" class="page-link">4</a>
    </li>
    <li class="page-item">
        <a href="" class="page-link">5</a>
    </li>
    <li class="page-item">
        <a href="" class="page-link">下一页</a>
    </li>
</ul>

面包屑导航
ul .breadcrumb 弹性，x轴，可换行，背景色，圆角
li .breadcrumb-item
默认每个li的连接符号是"/",可以重写每个li的连接符号
.breadcrumb-item + .breadcrumb-item::before{ content:">"; }

<h4>面包屑导航</h4>
<ul class="breadcrumb">
    <li class="breadcrumb-item">
        <a href="">首页</a>
    </li>
    <li class="breadcrumb-item">
        <a href="">学习用品</a>
    </li>
    <li class="breadcrumb-item">
        <a href="">笔记本电脑</a>
    </li>
    <li class="breadcrumb-item">
        <a href="">MacBookPro</a>
    </li>
</ul>

5.进度条
div .progress 进度条的槽
div .progressbar 进度条的条要设置宽度，背景颜色
.progress-bar-striped 带条纹的滚动条
.progress-bar-animated 带动画的滚动条
特点：一个槽中有多个条，需要把所有条的宽度相加，在看某一个条的占比（使用场合：密码强度的显示）

<h4>进度条</h4>
<div class="progress">
    <div class="progress-bar progress-bar-animated progress-bar-striped w-95"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-animated progress-bar-striped w-95 bg-danger"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-animated progress-bar-striped w-95 bg-warning"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-animated progress-bar-striped w-95 bg-success"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-animated progress-bar-striped w-95 bg-info"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-animated progress-bar-striped w-95 bg-primary"></div>
</div>

boot的定制

Bootstrap重点手写响应式+栅格布局+scss

一.SCSS，动态的样式语言（nodejs 8.11以上）

动态样式语言，有变量，有if-else，有继承，有函数，有导入，嵌套等高级功能。提高了代码复用，提高代码的可维护性

css有几个缺点
语法不够强大，没有变量等等一系列的代码重用机制，导致难以维护
常用的动态css语言
1. scss/sass(scss是sass的升级版，但是输入的命令还是用sass，升级之后，语法更接近css语法)
2. stylus
3. Less(boot3使用less完成)
scss是什么(boot4使用scss)
scss加入了多代码复用机制
让css代码更加的强大且优雅
使用scss转换成css
scss运行在服务器端
把转换好的css文件，传送给浏览器
注意路径问题
1. 单文件转换
  node-sass 具体scss文件路径具体css文件路径
  例：node-sass scss/01.scss css/01.css
2. 多文件转换，一次转一个文件夹的scss
  node-sass scss文件夹路径 -o css文件夹路径
  例：node-sass scss -o css
3. 单文件监听
  node-sass -w 具体scss文件路径具体css文件路径
  例：node-sass -w scss/01.scss css/01.css
4. 多文件监听
  node-sass -w scss文件夹路径 -o css文件夹路径
  例：node-sass -w scss -o css

二.scss基础语法

变量
使用 $声明，变量名称可以包含- _,命名规则基本与css选择器一致颜色，具体数值，样式属性，字符串，其他变量 `$ jd-red: #00f;$my-width: 36px;`
变量的作用域，只在最近的一对大括号内有效

嵌套

结构嵌套
可以在选择器中嵌套其他的选择器，生成后代结构关系

// 结构嵌套
#content{
    color: #111;
    div{
        color:#222;
        p{
            color:#444;
        }
        a{color:#555;}
    }
    p{
        color:#333;
        a{color:#666;}
        span{color:#777;}
    }
}

生成了：

#content {
  color: #111; }
  #content div {
    color: #222; }
    #content div p {
      color: #444; }
    #content div a {
      color: #555; }
  #content p {
    color: #333; }
    #content p a {
      color: #666; }
    #content p span {
      color: #777; }

群组嵌套

// 群组嵌套
div,h2,p{
    a{color:#333;}
}

生成了：

div a, h2 a, p a {
  color: #333; }

属性嵌套

// 属性嵌套
div{
    border: {style:solid;color:#fff;width:1px;};
}

生成：

div {
  border-style: solid;
  border-color: #fff;
  border-width: 1px; }

我们要求css能简写，就不要分开写，所以属性嵌套比较鸡肋

导入（项目经理喜欢使用scss的原因）
scss文件有两种
1. 以_开头，叫做局部scss文件，不会被生成css文件
2. 不以_开头，叫做全局scss文件，会被生成css文件
  全局文件中，把多个局部导入，然后生成一个css文件
  全局scss导入局部scss
  @import “不要头，不要尾的scss文件名称”
  例如导入_a.scss：@import "a";

混合器
把多个选择器都会使用的样式，封装进一个混合器，
在需要使用的地方调用这个混合器
封装混合器 @mixin 混合器名称{
各种样式；
}
例：

// 混合器
@mixin my_border{
    boder: 1px solid #ff0;
    backgroud: #000;
    border-radius: .25rem;
    box-shadow: 1px 1px 1px 1px #fff;
}

调用混合器 @include 混合器名称；

#d1{
    @include my_border;
}

混合器使用最多的场合，css hack
例：

 // 混合器
@mixin my_bg{
    backgroud: -webkit-linear-gradient(bottom,#111,#222);
    backgroud: -o-linear-gradient(bottom,#111,#222);
    backgroud: -ms-linear-gradient(bottom,#111,#222);
    backgroud: -moz-linear-gradient(bottom,#111,#222);
}
#d1{
    @include my_bg;
}

带参数混合器

// 带参数的混合器
@mixin my_bg($d,$c1,$c2){
    backgroud: -webkit-linear-gradient($d,$c1,$c2);
    backgroud: -o-linear-gradient($d,$c1,$c2);
    backgroud: -ms-linear-gradient($d,$c1,$c2);
    backgroud: -moz-linear-gradient($d,$c1,$c2);
}
div{
    @include my_bg(bottom,#333,#444);
}

继承
一个选择器可以继承另外一个选择器所有的样式
通过关键字@extend #d1;继承

// 继承
#d1{
    border:2px solid #f00;
    box-shadow:1px 1px;
}
#d2{
    color:#222;
    @extend #d1;
}

最后使用群组选择器方式展现

#d1, #d2 {
  border: 2px solid #f00;
  box-shadow: 1px 1px; }
#d2 {
  color: #222; }

运算加减乘除模
1. 加，字符串拼接
  带"“的字符串去拼接不带”“的，结果带”"
  不带"“的付出去拼接带”“的，结果不带”"
2. 减法
  由于scss变量可以使用-
  系统分辨不出-到底是减法运算还是变量的一部分
  所以写减法的时候，减号前后添加空格，做区分
3. 除法
  在scss中 / 会被认为是分隔符
  在以下情况下，被认为是除法
  1. 当除号两边有变量的时候，被认为是除法
  2. 除法计算式，被括号包裹，被认为是除法
  3. 除法计算式，是其他计算式的一部分，我们认为是除法
    例：
```
// 除法
p{
    font:10px/5px;
    $width:100px;
    width:$width/2;
    height:(200px/2);
    height-line:(200px/2px);
    margin:5px+8px/2;
}
```
  结果：
```
p {
  font: 10px/5px;
  width: 50px;
  height: 100px;
  height-line: 100;
  margin: 9px; }
```
4. 插值操作
  使用#{}做插值
```
// 插值操作
p::after{
    content:"小明身高#{100+80}cm";
}
```
5. 颜色的运算
  颜色需要分段运算，红+红绿+绿蓝+蓝
  分段运算之后，结果超过255，就取值255
```
// 颜色的运算
p{
    color:#112233+#112233;
    backgroud:rgb(1,2,3)+rgb(1,2,3);
}
span{
    color:rgb(255,100,1)+rgb(1,200,1);
}
```
  结果：
```
p {
  color: #224466;
  backgroud: #020406; }

span {
  color: #ffff02; }
```
  特殊：rgba的运算，要求alpha值相同才可以计算

三.scss的函数

scss预定义的函数

数学函数
round($val) 四舍五入
ceil($val); 向上取整
floor($val); 向下取整
min($v1,$v2,$v3.....)取最小值
max($v1,$v2,$v3....) 取最大值
random() 随机数
字符串函数
unquote("111") 去掉双引号
quote(); 添加双引号
to_upper_case("abc") 转换成大写
to_lower_case("ABC") 转换成小写
自定义函数
```
@function add$a,$b){
    @return $a+$b;
}
```
关键字之前添加@符号，变量之前添加$

四.指令(if-else)

@if(){
}@else if(){
}@else{}

奋斗胖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
T-Bootstrap-day04-组件、boot的定制、scss基础语法和函数

文章目录一.常用组件二.其他组件boot的定制一.SCSS，动态的样式语言（nodejs 8.11以上）二.scss基础语法三.scss的函数四.指令(if-else)一.常用组件卡片div .card 弹性，y轴，背景，边框div .card-headerdiv .card-bodydiv .card-footer使用场合，把纵向排列的内容，放到卡片中使用<h4>...
复制链接

扫一扫