bootstrp_组件

2024-02-21 08:44:46

3.组件

网页中有一些复杂的特殊效果，之前必须使用 js，dom，jq

boot为我们封装好了很多常见的组件，我门可以之间使用

方便快捷，但是如果需要个性化处理，比较繁琐

boot中，大量使用元素的自定义属性来调用方法

1.下拉菜单

基本结构

<button class="dropdown-toggle"

data-toggle="dropdown"></button>

</div>

<h2>下拉菜单</h2>
  <div class="dropdown">
   <!-- boot中通过自定义事件 data-toggle 来激活事件-->
  <botton class="btn btn-primary dropdown-toggle" data-toggle="dropdown">下拉菜单</botton>
  <ul class="dropdown-menu text-center">
    <li><a href="#">青椒</a></li>
    <li><a href="#">泡椒</a></li>
    <li><a href="#">红椒</a></li>
    <li><a href="#">甜椒</a></li>
    <li><a href="#">灯笼椒</a></li>
  </ul>
  </div>

div .dropdown 父级，相对定位

button .dropdown-toggle 画下拉三角

ul .dropdown-menu 隐藏display:none

data-toggle=”dropdown” 自定义属性的作用

1.当button被点击时，激活事件

2.自定义属性的值绝对激活哪一个事件

2.按钮组

h2>按钮组</h2>
  <div class="btn-group btn-group-lg">
  <a href="#" class="btn btn-dark">冬瓜</a>
  <a href="#" class="btn btn-danger">南瓜</a>
  <a href="#" class="btn btn-primary">西瓜</a>
  <a href="#" class="btn btn-secondary">北瓜</a>
  <a href="#" class="btn btn-warning">丝瓜</a>
  </div>
  <hr/>

外层div中class有如下值

.btn-group横向按钮组
btn-group-vertical纵向按钮组
可以添加btn-group-sm/lg调整按钮大小

3.信息提示框

</span>

提示信息
</div>

<h2>信息提示框</h2>
<div class="alert alert-warning alert-dismissible">
    请检查钱包里面是否有钱<span class="close" data-dismiss="alert"><b>×</b></span>
</div>
<h2>水平导航</h2>
<ul class="nav justify-content-around nav-justified">
    <li class="nav-item"><a href="#" class="nav-link btn btn-danger">酸菜</a></li>
    <li class="nav-item"><a href="#" class="nav-link btn btn-primary">甜菜</a></li>
    <li class="nav-item"><a href="#" class="nav-link btn btn-
</ul>

alert基本类

alert-danger/warning/… 提示框颜色

alert-dismissible为了修饰内部span.close

.colse 右浮动

data-dismisss=”aleert” 自定义属性
事件使用alert的方式运行

4.导航

①水平导航

基本结构: ul.nav>li.nav-item>a.nav-linlk

<u>l class="nav justify-content-around nav-justified">

</li>

</ul>

ul.nav定义了弹性布局，主轴x

之前学的所有的弹性布局的样式都可以使用

.nav-justify>.nav-item同时设置，让元素等宽显示

a.nav-link块级元素，设置了hover，focus等样式

②选项卡导航

基本结构

上层是选项卡

ul.nav.nav-tabs>li.nav-item>a.nav-link

</li>

ul.nav变成选项卡添加类nav-tab

.nav-tabs设置自己孩子nav.item nav.link

a标签添加自定义属性data-toggle=”tab”

以tab的方式激活事件

绑定目标元素a的href属性指向下面的内容的id值

下层内容

div.tab-content>div.tab-pane

div.tab-content>div.tab-pane 配合使用

让div.tab-pane都是display:none\

然后div.tab-pane要写id，让a标签绑定

<h2>选项卡导航</h2>
    <!-- 选项-->
    <ul class="nav nav-tabs">
  <li class="nav-item"><a href="#pane1" class="nav-link" data-toggle="tab">麻将云集</a></li>
  <li class="nav-item"><a href="#pane2" class="nav-link" data-toggle="tab">万子</a></li>
  <li class="nav-item"><a href="#pane3" class="nav-link" data-toggle="tab">条子</a></li>
  <li class="nav-item"><a href="#pane4" class="nav-link" data-toggle="tab">筒子</a></li>
    </ul>
    <!-- 内容-->
    <div class="tab-content">
  <div id="pane1"   class="tab-pane">成都麻将，广东麻将，香港麻将，重庆麻将</div>
  <div id="pane2"   class="tab-pane">一万,二万，三万，四万，五万，六万，七万，八万，九万</div>
  <div id="pane3"   class="tab-pane">一条，二条，三条，四条，五条，六条，七条，八条，九条</div>
  <div id="pane4"   class="tab-pane">一筒，二筒，三筒，四筒，五筒，六筒，七筒，八筒，九筒</div>
    </div>

③胶囊导航

导航部分

ul.nav.nav-pills>li.nav-item>a.nav-link data-toggle=”pill”

内容部分

div.tab-content>div.tab-pane

与选项卡一致修改参数nav-tab位tab-pills

<h2>胶囊导航</h2>
    <ul class="nav nav-pills">
  <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#d1">电脑</a></li>
  <li class="nav-item"><a class="nav-link" data-toggle="pill" href="#d2">手机</a></li>
    </ul>
    <div class="tab-content">
  <div id="d1" class="tab-pane" >mac 电脑联想电脑,华硕电脑,戴尔电脑,惠普电脑 </div>
  <div id="d2" class="tab-pane">iPhone，huawei，mi，Honor</div>
  </div>

***事件激活三部曲

一个事件激活，关注几件事
1.激活这个事件的元素（data-toggle="collapse）

2.这个事件以什么方式激活 data-toggle"=" collapse "

3.这个事件激活后，改变的目标元素是谁（data-target="#motai"）

5.导航栏

div.navbar.navbar-expand-sl/lg/md/sm>ul.navbar-nav>li.nav-item>a.nav-link

<h2>导航栏</h2>
  <div class="navbar navbar-expand-md">
  <ul class="navbar-nav ">
    <li class="nav-item"><a class="nav-link" href="#">小了白了兔了白</a></li>
    <li class="nav-item"><a class="nav-link" href="#">小了白了兔了白</a></li>
    <li class="nav-item"><a class="nav-link" href="#">爱了吃了萝了卜</a></li>
    <li class="nav-item"><a class="nav-link" href="#">爱了吃了萝了卜</a></li>
  </ul>
  </div>

.navbar-expend-sl/lg/md/sm:作用，作为子元素ul.navbar-nav的选择器条件，让ul.navbar-nav在主轴方向从y轴变成x轴

div.navbar-expend-*配合ul.navbar-nav可以让导航栏在不同屏幕下横向或纵向显示

响应式导航栏:

lg: 大屏超大屏，li横向显示，中小屏纵向显示

6.折叠效果

折叠</button>

折叠，需要折叠内容添加 .collapsee （display：none）

折叠事件data-toggle=”collapse”

折叠目标：如果是a标签，使用href=”#” ；

如果是button使用data-target=”#”

<h2>折叠效果</h2>
  <button class="btn btn-secondary" data-toggle="collapse" data-target="#bt_zd">显示折叠</button>
  <div class="collapse " id="bt_zd">show
  Lorem ipsum dolor sit amet, </div>

7.卡片

</div>

8.手风琴(卡片+折叠)

</div>

</div>

1. .collapse不能和.card-body在同一个标签上，

不然会发生折叠/显示的卡顿

解决方案div.collapse>div.card-body

2.几个折叠部分，可以同时打开，而不能开启一个，其它的都关闭

解决方案，在最外层div（card外部）上写id="parent"

在所有div.collapse中添加事件的绑定data-parent="#parent"

这样就可以保证在最外层div中，只有一个折叠区域可以打开了

<h2>手风琴（卡片+折叠）</h2>
  <div id="father">
  <div class="card">
  <div class="card-header">
    <a href="#d5" class="card-link" data-toggle="collapse">早餐</a>
  </div>
  <!-- 折叠隐藏部分-->
  <div data-parent="#father" class="collapse" id="d5">
    <div class="card-body">面条，包子，稀饭</div>
  </div>
 </div>
  <div class="card">
    <div class="card-header">
      <a href="#d6" class="card-link" data-toggle="collapse">中餐</a>
    </div>
    <div data-parent="#father" class="collapse" id="d6">
      <div class="card-body">青椒肉丝，鱼香肉丝，土豆肉丝</div>
    </div>
   </div>
  </div>

9.折叠导航栏

1.div.navbar-expend-sm和.navbar-toggler的关系

.navbar-toggler显示按钮

祖先有.div.navbar-expend-sm的时候，.navbar-toggler这个按钮显示，

<h2>折叠导航栏</h2>
<div class="navbar navbar-expand-md bg-light navbar-light">

<a class="navbar-brand d-md-none d-lg-block " href="#">Bootstrap中文网</a>

<button class="navbar-toggler" data-toggle="collapse" data-target="#content">
    <span class="navbar-toggler-icon"></span>   
</button>

<div id="content" class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="">Bootstrap3中文文档</a>
      </li>
     <li class="nav-item mx-2">
        <a class="nav-link " href="">网站示例</a>
      </li>
    </ul>
</div>

2.在外层div中navbar-dark/light的作用：

这个类对本地div没有任何修饰，

修饰的是后代元素的字体颜色

3.navbar-collapse的作用

.navbar-expend-sm .,avbar-collapse配合，

让ul在sm/ms/lg/xl下显示，在xs下，

ul的父级div执行.collapse的样式，隐藏

4..navbar-expend-sm决定了以下事情

①决定了sm以上显示，sm以下隐藏

②决定了ul在sm以上横向显示，在sm以下垂直显示

③决定了折叠div在sm以上显示，在sm以下隐藏

10.媒体对象

boot提供了很对类来处理媒体相关的对象（图片，影音）

<img>

</div>

<button class="btn btn-warning " data-toggle="modal" data-target="#motai">打开模态框</button>
  <div id="motai" class="modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3>填写美食</h3>
        <button data-dismiss="modal" class="close">&times;</button> 
</div>
      <div class="modal-body">
        <input class="form-control" type="text"/>  </div>
      <div class="modal-footer">
        <button class="btn btn-success" data-dismiss="modal">ok</button>
      </div>  </div></div> </div>

11.焦点轮播图

轮播图结构

div.carousel .data-ride=”carousel” #demo 相对定位

>div.carousel-inner w100溢出隐藏

>div.carousel-item display：none

>img

给最外层div添加事件，data-ride=”carousel”

<h2>焦点轮播图</h2>
  <div class="carousel" data-ride="carousel" id="lunbotu">
  <!-- 轮播图片-->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="w-100" src="../img/banner3.png" alt=""/>
    </div>
    <div class="carousel-item">
      <img class="w-100" src="../img/banner2.png" alt=""/>
    </div>
  </div>
  <!-- 左右箭头-->
  <a href="#lunbotu" class="carousel-control-prev bg-dark " data-slide="prev" >
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a href="#lunbotu" class="carousel-control-next bg-danger" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
  <!-- 轮播指示器-->
  <ul class="carousel-indicators">
    <li data-slide-to="0" data-target="#lunbotu" class="active"></li>
    <li data-slide-to="1" data-target="#lunbotu"></li>
  </ul>
  </div>
/*重写箭头样式*/
.carousel-control-prev,.carousel-control-next {
  width: 4%;height: 20%;
  background: #aaa;
  border-radius: 0.25rem;
  top:40%;
}
 /*重写指示器样式*/
  .carousel-indicators li{
  width: 1rem; height: 1rem;;
  background: #fff;
  border-radius: 50%; mragin:0 5px;
}
.carousel-indicators li:hover{
  cursor:pointer ;
}
.carousel-indicators .active {
  background-color: #0AA1ED;
}

左右箭头

</a>

</a>

重写箭头样式

.carousel-control-prev,.carousel-control-next {

width: 4%;

height: 20%;

background: #aaa;

border-radius: 0.25rem;

top:40%;

}

a标签要添加自定义属性data-slide=”prev/next”

事件目标是最外层div#lunbotu href=”#lunbotu”

指示器

ul.carousel-indicators 决定定位，横向弹性

>li 宽高，背景色，外边距，需要重写li样式

如果让li有被选中的样式，需重写.active样式

/*重写指示器样式*/

.carousel-indicators li{

width: 1rem;

height: 1rem;;

background: #fff;

border-radius: 50%;

mragin:0 5px;

}

.carousel-indicators .active {

background-color: #0AA1ED;

}

点击li激活事件 data-slide-to=”图片下标” 下标从0开始

事件改变的目标 .data-target=”#demo” 整个轮播图最外层的div#id

12.模态框

覆盖在父窗体上的一个子窗体目的：用于与用户做一些互动

div #motai .modal

>.modal-dialog

>div.modal-content
>div.modal-header+div.modal.body+div.modal-footer

关闭事件： button.close data-dismis=”modal”

13.其它组件

1.徽章

badge 基本类跟小按钮十分相似

颜色badge-danger/success/…..

徽章的样式 badge-pill 胶囊

2.巨幕

巨大的内边距，有背景颜色和圆角

div.jumbotron”

3.分页

ul.pagination>li.page-item>a.page-link

li的修饰类 .active激活

.disabled禁用

<h2>分页</h2>
 <ul class="pagination">
  <li class="page-item mr-1 disabled"><a class="page-link mx-1" href="">上一页</a></li>
  <li class="page-item mx-1 active"><a class="page-link  " href="">1</a></li>
  <li class="page-item mx-1"><a class="page-link " href="">2</a></li>
  <li class="page-item mx-1"><a class="page-link " href="">3</a></li>
  <li class="page-item ml-1"><a class="page-link " href="">下一页</a></li>
 </ul>

4.面包屑导航

常用于有路径关系的导航

ul.breadcrumb>li.breadcrumb-item

中间的连接符号需要自己重写样式

<h2>面包屑导航</h2>
<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="">P30</a></li>
</ul>
/*修改 面包屑的样式   > */
    .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
}

5.进度条

①普通进度条

div.progress>div.progress-bar.w-50.bg-dark

父div是进度条的槽，

子div进度条，子div的宽度是进度条的进度

<h2>进度条</h2>
<div class="progress"> <!-- 进度条的槽-->
  <div class="progress-bar w-50 bg-danger"> <!-- 进度条-->
  </div>
</div>

②条纹进度条

在子div中加类  .progress-bar-striped

③带动画条纹进度条

在子div中加类  .progress-bar-animated

4.js插件

5. sass 定制

BOOT定制：scss/sass

bootstrap最重要：响应式 + 栅格布局 + scss/sass

CSS有很多缺点

语法不够强大，没有变量，没有合理的样式复用机制，导致难以维护。

我们要使用动态样式语言，赋予css新的特性，提高样式羽凡的可维护性。

常用的动态样式语言：

1.SCSS/SASS (scss兼容sass，scss更接近 )

1.SCSS详解

①什么是scss

scss是一款强化css的辅助工具，它和css语法很像。

它在css的语法基础上，添加了变量，嵌套，混合，导入，函数等高级功能，这些拓展命令使css更加强大与优雅

浏览器不能直接解析scss文件，需要在项目中吧scss转义成css文件，让浏览器解析。

scss可以让css开发更高效

②scss的安装与使用

scss在服务器端使用，必须安装nodejs，而且版本在v8.11以上

在线安装：npm install –g node-sass

离线安装：找到nodejs安装路径，将安装包文件放到nodejs文件夹下

验证安装成功：cmd > node-sass –v 验证版本

③SCSS文件转换从CSS文件

1.单文件转换

创建scss文件， cmd> node-sass scss/*.scss css/*.css

scss/*.scss : 要转换的scss的文件路径和文件名

css/*.css ：转换后的css的文件路径和文件名

2.多文件转换

cmd> node-sass scss(文件夹名称) –o css(文件夹名称)

3.单文件监听

cmd> node-sass –w scss/*.scss css/*.css

开启，系统会盯着*.scss，当*.scss内容发生改变保存的时候，自动转换位*.css

4.多文件监听

cmd> node-sass –w scss -o css

④SCSS基础语法

1.变量

使用$声明变量，变量名包含 - , _ ;

命名规则基于与css选择器相同，尽量做到见名知意

总结：

1.变量声明在{ }外，整个scss文件都可以使用；

变量声明在{ }之内，只有当前{ }内可以使用。

2.!default规则，如果此变量在之前已经声明辅赋值了，俺么使用之前的值，

如果之前没有声明赋值，使用现在的值

2.嵌套

*.html

<div#content>

<div.top>

<p>

<h1>

</div>

<div.buttom>

*.scss

#content{
div.top{ color:red;
 p{color:yellow;}
 h1{ color:blue;  } }
  div.bottom{ background-color:#0ff; }
}

*.css

#content div.top {
color: red; }
#content div.top p {
color: yellow; }
#content div.top h1 {
color: blue; }
#content div.bottom {
background-color: #00ff22;
}

伪类的嵌套

需要在伪类选择器之前添加&，如果不添加，会生成一个空格，导致伪类失败

a{color:#000;
  &:hover{color:#ff0;}
}

属性嵌套
    div{
  border:{style:solid;width:2rem;color:#f00;}
}

群组选择器嵌套
p,h1,div{color: red}

3.导入(@import)

在scss语法中，如果一个scss文件以下划线(_)开头，那么这个scss文件就是一个局部scss文件

scss文件转换成css文件的时候，不会把局部scss文件进行转换，只转换不以下划线开头的文件（局部scss文件）

导入语法： @import “ name”; 导入的时候，不写下划线，不写后缀，

局部文件被导入后，局部文件中的样式，会在全局文件转换的css中生成

同时，局部文件中声明的变量，可以在全局文件中使用

4.混合器 (@mixin-@include)

把多个选择器都会使用的样式封装进一个混合器，需要使用这些样式选择器，可以调用这个混合器，实现代码重用

关键字声明混合器 @mixin 混合器名称($参数1，$参数2){ 样式}

调用混合器 @include 混合器名称($参数1，$参数2);

混合器的使用场合：

CSS Hack

5.继承( @extend)

一个选择器可以使用另外一个选择器的所有样式

关键字 @extend 转换之后，继承的表现方式是群组选择器

.my1{width: 100px;height: 100px}
.my2{
  background: #f00;
  @extend .my1;
}

⑤运算

加减乘除余 + - / % 如果必要，会在不同单位之间转换，（前提是scss能转）

1. 加法

+ 除了做加法，还做字符串拼接，

字符串拼接的时候，如果有引号的字符串去拼接无引号的，结果有引号；

如果无引号的字符串去拼接有引号的，结果是无引号的

2. 减法

- 由于变量声明的时候可以使用（–），

系统分不清楚（–）是不是变量名称，所以我们写减号的时候要在减号（-）前后加上空格

3. 除法

在scss中（/）的作用是分割符

以下情况判断为除法：

  1. 运算式的两边有变量或者函数的返回值，是除法：width:$width/2;
2. 运算式被（）包裹的时候，是除法   height:(500px/2); 
3. 运算式是其它算术运算式的一部分的时候，是除法  margin-left:5px+8px/2px;

4. 字符串的插值操作

  使用#{} 在字符串中做插值    content:"a #{50+30}c"

5. 颜色运算

#rrggbb和 rgb(r,g,b)  都是分段计算r+r,g+g,b+b    #112233+#445566=#557799
rgba( r,g,b,alpha)相加，要求透明度a的值相同，才能计算

⑥函数

1.scss预定义了很多函数，有有些函数直接可以在css中使用

rgba(r,g,b,alpha)

hsl(h,s,l)

h:hue色调取值0~360，3个色段，120一个

s：saturation 饱和度 0.0%~100.0%

l：lightness 亮度 0.0%~100.0%

2.数学函数

round($val) 四舍五入

ceil($val) 向上取整

floor($val) 向下取整

min($v1,$v2.....)

max($v1,$v2.....)

random 随机数

3.字符串函数

unquote($str) 去掉$str的双引号

quote($str) 给$str添加双引号

to_upper_case($str); $str变大写

to_lower_case($str); $str变小写

4.自定义函数

@function get-width($n,$m){

@return $n - $m;

}

⑦指令

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

注意：bool值的小括号可以去掉,加个空格

码农公寓

3.组件

***事件激活三部曲

4.js插件

5. sass 定制

1.SCSS详解

相关文章