Bootstrap4 卡片+下拉菜单+折叠+导航+导航栏

概述Bootstrap4 卡片 <div class="card"> <div class="card-body">卡片</div&g

bootstrap4 卡片

    <div class="card">        ="card-body">卡片</div>    >

 

 

卡片头部，内容，底部

    ="card-header">卡片头部>卡片内容="card-footer">卡片底部>

 

 

多种颜色的卡片，背景bg-，文字颜色text-

    ="card bg-primary text-white">

 

 

卡片的标题、文本和链接 card-Title  card-text   card-link

    >            h4 ="card-Title">卡片标题h4p ="card-text">卡片文字部分pa href="#" class="card-link">卡片链接a>

 

 

图片卡片 card-img-top   card-img-bottom  card-img-overlay

    ="card" style="wIDth:200px;"img src="img/img_avatar.png"="card-img-top"="card-img-bottom">

 

 

    ="card-img-overlay">                >

 

 

bootstrap4 下拉菜单

bootstrap4 下拉菜单依赖于 popper.min.Js。

下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。

    ="dropdown"button ="btn btn-primary dorpdown-toggle" data-toggle>buttonbutton="dropdown-menu"="dropdown-item">item1>item2>item3>

 

 

也可以给a链接添加下拉效果

>  ="btn btn-secondary dropdown-toggle" href role="button" ID="dropdownMenulink"="dropdown" aria-haspopup="true" aria-expanded="false">    Dropdown link  >   ="dropdown-menu" aria-labelledby="dropdownMenulink"="dropdown-item"="#">Action>Another action>Something else here>>

 

 

下拉菜单中的分割线

type="btn btn-primary dropdown-toggle"      Dropdown button    >      >link 1>link 2>link 3="dropdown-divIDer"></>Another link>

 

 

="dropdown-header">dropdown-header>

 

 

下拉菜单的激活项和禁用项

="dropdown-item active"="dropdown-item Disabled">

 

 

下拉菜单右对齐 dropdown-menu-right

="dropdown-menu dropdown-menu-right">

 

 

改变下拉菜单d出方向

<!-- 向右d出 -->="dropdown dropright">

 

 

 

 

="container"br>< 向上d出 -->    ="btn-group dropup"          Dropdown button        >

 

 

我为啥加了这么多换行符呢，因为不加它还是会向下d出

 

="container"="text-align:center;" 向左d出 ="btn-group dropleft">

 

 必须在左边留有空间才能生效

 

在按钮中添加下拉菜单

="btn-group"="btn btn-primary">toggle>item>

 

 

 

bootstrap4 折叠

data-toggle="collapse" data-target="#demo" type>折叠ID="demo"="collapse"    Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incIDIDunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.>

 

 

 <a> 元素上你可以使用 href 属性来代替 data-target 属性:

="collapse" >

 

 

默认是隐藏的，也可以改为默认显示

="collapse show">

 

简单的手风琴效果

="accordion"="#one"="card-link"="one"                Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.            >            ="#two"="two"="#three"="three">

 

 

bootstrap4 导航

简单水平导航

ul ="nav"li ="nav-item"="nav-link"liul>

 

 

设置导航居中或者靠右

="nav justify-content-center">="nav justify-content-end">

 

 

垂直导航

="nav flex-column">

 

 

tab选项卡导航

="nav nav-tabs"="nav-link active">

 

 

胶囊导航

="nav nav-pills">

 

 

导航等宽

="nav nav-justifIEd">

 

 

动态tab选项卡

="nav-link active"="tab"="nav-link"="tab-content"="tab-pane container active"="one"h3>one>          >Lorem ipsum dolor sit amet,sed do eiusmod tempor incIDIDunt ut labore et dolore magna aliqua.="tab-pane container"="two">two="three">three>

 

 

胶囊状态tab选项卡

="pill">

 

 

 

bootstrap4 导航栏

小屏时垂直显示，其余屏幕水平显示

nav ="navbar navbar-expand-sm"="navbar-nav"nav>

 

 

默认就是垂直导航栏

="navbar">

 

 

不同颜色的导航栏

="navbar bg-info navbar-expand-sm navbar-light"="navbar bg-warning navbar-expand-sm navbar-light"="navbar bg-success navbar-expand-sm navbar-light"="navbar bg-danger navbar-expand-sm navbar-light"="navbar bg-dark navbar-expand-sm navbar-light">

 

 

高亮显示品牌/logo

="navbar-brand">logo>

 

 

图片logo

="img/hg.png"="wIDth:30px;"="img/boot.jpg"="wIDth:100px;">

 

 

折叠导航栏

>    ="navbar-toggler"="#mytoggle"span ="navbar-toggler-icon"span="collapse navbar-collapse"="mytoggle">

 

 

 

 

导航栏上可以设置下拉菜单

="nav-item dropdown"="nav-link dropdown-toggle">                    >

 

 

 

 

导航栏的表单与按钮

form action=""="form-inline"input ="text"="form-control" placeholder="请输入产品型号"="submit"="btn btn-warning">搜索form>

 

 

.input-group-addon 类用于在输入框前添加小标签

="input-group-addon">@="请输入邮箱账号">发送>

 

 

导航栏文本（非链接）

>        ="navbar-text">普通文本>

 

 

固定导航

="navbar bg-info navbar-expand-sm navbar-light fixed-top">

 

 

="navbar bg-info navbar-expand-sm navbar-light fixed-bottom">

 

总结

以上是内存溢出为你收集整理的Bootstrap4 卡片+下拉菜单+折叠+导航+导航栏全部内容，希望文章能够帮你解决Bootstrap4 卡片+下拉菜单+折叠+导航+导航栏所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。