Bootstrap_2.组件

最新推荐文章于 2024-03-27 08:00:00 发布

Jyan_29

最新推荐文章于 2024-03-27 08:00:00 发布

阅读量228

点赞数

分类专栏： Web前端基础知识 Bootstrap 文章标签： Bootstrap 组件

本文链接：https://blog.csdn.net/qq_33392141/article/details/84952987

版权

Web前端基础知识同时被 2 个专栏收录

49 篇文章 0 订阅

订阅专栏

Bootstrap

3 篇文章 0 订阅

订阅专栏

组件

1 常用组件
2 其它组件

封装功能性的模块，按照boot要求的 层次结构以及类名套用

1 常用组件

下拉菜单

下拉菜单的三级结构：

	<div clss="dropdown">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown"></button>
        <div class="dropdown-menu">
            <a href="#" class="dropdown-item">菜单1</a>
            <a href="#" class="dropdown-item">菜单2</a>
            <a href="#" class="dropdown-item">菜单3</a>
        </div>
    </div>

1.使用一个类名为dropdown的容器包裹整个下拉菜单的元素

  <div class="dropdown"></div>

2.内部菜单按钮
class="dropdown-toggle"作用：向下的小箭头
事件激活自定义属性 data-toggle=“dropdown”

<button class="btn btn-warning
	dropdown-toggle" data-toggle="dropdown">下拉菜单</button>

3.菜单栏 div.dropdown-menu
下拉菜单使用了div/ul，类名为dropdown-menu

	       <div class="dropdown-menu"></div>
	        <ul class="dropdown-menu"></ul>

4.菜单项使用li或者其它标签，必须设置类名dropdown-item

    <a href="#" class="dropdown-item">1111</a>
    <li class="dropdown-item">1111</li>

5.菜单项中几个可选的类名
标题：<li class=“dropdown-header”>
在菜单项之间分割线：<div class=“dropdown-divider”>
禁用：<li class=“dropdown-item disabled”>
激活：<li class=“dropdown-item active”>

提示：data-toggle=“dropdown”,会被bootstrap.min.js选中,添加事件监听；boot为我们提供了按照下拉菜单的方式去切换数据(显示或隐藏)

按钮组

外包裹添加<div class=“btn-group”>分组
按钮工具栏 btn-toolbar
设置按钮大小.btn-group-lg|sm
垂直排列<div class=“btn-group-vertical”>

<div class="btn-group-vertical">
    <button class="btn btn-success btn-group-sm">赞</button>
    <button class="btn btn-danger btn-group-lg">踩</button>
    <button class="btn btn-warning btn-group-xl">评</button>
</div>

信息提示框

1.外包裹class=“alert”
修改颜色alert-danger/warning…
内部x要使用类.class需要在父级添加alert-dismissible
2.内部有文本提示
3.内部有关闭提示框的X
data-dismiss=“alert” class=“close”

<div class="alert alert-danger w-50 alert-dismissible">
    <span class="close" data-dismiss="alert">&times;</span>
    请检查用户信息
</div>

data-dismiss="alert"事件触发，触发了驳回关闭alert的事件；
注意：span想使用close类，外包裹必须有alert-dismissible

Bootstrap提供三种导航
1）水平导航：
ul.class=“nav”;元素变成
li中class=“nav-item”
a.class=“nav-link”
元素ul的类：
nav-justified设置导航项等宽显示(为了让nav-item有样式)
justify-content-*：between/around/center/end；设置导航的对齐方式，flex的主轴对齐，所以使用前需要把.nav-justified删除；
flex-row/column/reverse都可以生效；

2）选项卡导航：
选项卡导航分为两部分——导航部分和显示内容
导航部分：
ul必须有类名：nav nav-tabs
li必须有类名：nav-item
a必须有类名：nav-link
a有自定义属性data-toggle=“tab”，事件触发后以tab的方式切换数据；
a的href属性指向想要显示内容的id
显示内容：
外层div必须有类名tab-content，本身没有样式
内层具体内容类名tab-pane---->display:none
具体内容的元素必须具有id，给a标签href引用
active类，用于默认显示某个元素内容以及对应导航栏

3）胶囊导航
ul的类nav nav-pills
li的类nav nav-item
a的类 nav-link
a的自定义属性 data-toggle=“pill”
a的href指向内容的id
内容部分同选项卡导航

导航栏

外包裹div使用.navbar来创建导航栏(弹性+相对定位)
需要navbar-expand-xl/lg/md/sm来创建响应式导航栏，将ul类默认的主轴变为row
navbar-expand-* 比指定屏幕更大展开横向显示
比指定屏幕小垂直堆叠显示
导航栏内部的导航可以使用ul
ul需要类 navbar-nav，默认弹性，主轴column
li的类 nav-item
a的类 nav-link
注意：可以给导航栏设置bg-*导航栏背景色

折叠

使用a标签折叠内容
a标签data-toggle=“collapse"事件激活时，使用折叠的方式去切换数据，折叠的目标href=”#内容id"；
内容的标签，必须写class=“collapse”，id被a标签的href引用；
使用button标签(行内块)折叠内容
在button中添加data-toggle=“collapse"和折叠目标data-target=”#id"，#id对应折叠内容的id
在折叠内容中定义collapse类
由于button没有href属性，使用自定义属性
data-target="#内容id"，
其它写法与a标签一样

折叠导航栏

外层包裹div class=“navbar navbar-expand-sm bg-dark navbar-dark”
导航栏基础类navbar
响应式导航栏 navbar-expand-sm
背景颜色为深色bg-dark
navbar-dark本身没有样式，作为后代选择器的父选择器，控制后代们的样式(navbar-brand nav-link navbar-toggler-icon navbar-toggler)
不会被折叠的a标签
a class=“navbar-brand”
折叠按钮button.navbar-toggler
.navbar-expand-* .navbar-toggler{设置什么时候显示/隐藏}
btn需要写自定义属性data-toggle=“collapse” data-target="#内容-id"

内容div.collapse .navbar-collapse
.navbar-collapse设置折叠导航打开的位置；
导航的内容：
ul.navbar-nav>li.nav-item>a.nav-link

   <div class="navbar navbar-expand-md bg-dark
    navbar-dark">
        <!-- 不被折叠的导航选项-->
        <a href="#" class="navbar-brand">Boot中文网</a>
        <!-- 小屏幕下最右侧的按钮：上面有三条横线-->
        <button class="navbar-toggler" data-toggle="collapse" data-target="#content">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 导航栏中的菜单，小屏幕隐藏(垂直显示)，大屏幕横向显示-->
        <div class="collapse navbar-collapse" id="content">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" class="nav-link">JQuery</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">JavaScript</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">HTML/CSS</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">BootStrap</a>
                </li>
            </ul>
        </div>
    </div>

卡片

用于文字和图片的展示
外包裹div class=“card”
内部3部分

div class=“card-header”
div class=“card-body”
div class=“card-footer”

在卡片中可以添加超链接，a class=“card-link”

手风琴(卡片和折叠)

最外层div#parent，id是为了做data-parent="#parent"，目的是只允许一个折叠同时打开(需要在折叠元素上添加data-parent="#parent"外层大包裹的ID)
duv.card>div.card-header>a.card-link
a标签中写折叠事件和折叠对象
data-toggle=“collapse” hredf="#p1"
折叠内容
div.collapse#p1>div.card-body>p

注意，.card-body和.collapse不能在同一个div，冲突导致卡顿

<div id="parent">
    <div class="card">
        <div class="card-header">
            <a  class="card-link" href="#p1" data-toggle="collapse">卡片一</a>
        </div>
        <div class="collapse show" id="p1" data-parent="#parent">
            <div class="card-body">
                内容一：我爱学习
            </div>
        </div>
    </div>

媒体对象

使用div class="media"把内容包裹起来，形成对象的显示方式，定义弹性布局；
项目有img，div.media-body，内部元素可以使用弹性布局一切类align-self-center/end/…对齐排列

    <ul class="list-unstyled">
        <li>
            <div class="media border p-3">
                <img src="../bootstrap1/img/1.jpg"
                     class="rounded mr-4 align-self-center"/>
                <div class="media-body bg-light">
                    <h4>多媒体</h4>
                    <p>学的不仅是技术，更是梦想！！！</p>
                </div>
            </div>
        </li>
</ul>

轮播

外包裹
div class=“carousel” data-ride=“carousel”
创建轮播，使用carousel类，让图片动起来data-ride=“carousel”
内部第一层，轮播图片
```
<div class="carousel-inner">
  <div class="carousel-item active">img</div>
  <div class="carousel-item">img</div>
  <div class="carousel-item">img</div>
</div>
```
使用类名div.carousel-inner包裹所有图片，
使用div.carousel-item包裹img,
carousel-item ---->display:none;把所有图片隐藏
.carousel-item.active 会把隐藏的div显示
在carousel-item内部，可以添加div.carousel-caption添加文字和标题
内层第二部分，导航标识符
使用ul class=“carousel-indicators”
.carousel-indicators>li 样式已经写好，并且随着图片轮播，改变表示，还不能通过点击改变图片
li class=“active” 背景变为白色，被激活的li
在li中 data-slide-to=“0” 图片的下标，从0开始
data-target="#最外层包裹.carousel的ID"
重写boot提供的样式，让指示器变为圆点，背景颜色
内部第三部分：左右箭头
a class=" carousel-control-prev"
左箭头<span class="carousel-control-prev-icon">
a class=" carousel-control-next"
右箭头<span class="carousel-control-next-icon">
需要事件，data-slide=“prev/next” data-target="#最外层包裹.carousel的ID"

总结：bootstrap为我们提供了比较多的样式类，如果提供的样式不符合我们的需求，我们可以灵活的取修改样式

模态框

modal模态框是覆盖在父窗体上的子窗体，可以在不离开父窗体的情况下，与用户交互，提交交互信息
1.外包裹div.modal
2.内部div.modal>div.modal.dialog>div.modal-content>modal-header/body/footer

2 其它组件

徽章badge

即添加颜色样式和圆角

<ul class="list-group list-unstyled">
    <li class="list-group-item">赞
        <a href="#" class="badge badge-pill btn-danger">365</a></li>
</ul>

巨幕

巨大边框.jumbotron

分页

外包裹pagination创建分页
使用pagination-lg/sm设置分页条大小
内部li.page-item>a.page-link
使用active和disabled修饰li

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

面包屑导航

常用于有层次关系的导航
ul.breadcrumb>li.breadcrumb-item>a
改变item连接符号：
.breadcrumb-item + .breadcrumb-item::before {content: “/”;}

进度条

外层包裹div.progress(进度条槽)
普通进度条div.progress-bar
条纹进度条div.progress-bar-striped
动画进度条progress-bar-animated添加在条纹进度条的div才能看到效果
w-* 设置进度，bg-* 设置进度条颜色
同一进度条下调整不同区间颜色只需要在同一div.progress写不同宽度的进度条