BooStrap4文档摘录 2 Content, Component
Content
Reboot:从新写了主要元素的排列。
本章讲了各种元素及其相关的类。
⚠️ 文档左上角有搜索栏。
Components
- Alert✅
- Badge✅
- Button✅和Button group⚠️概览
- Card✅
- Carousel轮播图⚠️概览,
- Collapse隐藏/显示 功能✅
- Dropdowns✅
- Form🀄️ ✅ 验证和 custom form忽略。
- input group ✅,没有看custom forms
- List group ✅,客制化和javascript没看
- Modal: 用于增加一个弹出的对话框🀄️
- Navs ✅,javascript行为没看
- Navbars ✅
- Paginaton标签页码,有相应的gem 'kaminari'
- Progress 进度条。❌,没有移动进度条的案例。
- Tooltips, ⚠️ 和popover类似 当鼠标移动到某个元素上,弹出一个小提示框。
- Scrollspy 滚动间谍。⚠️简单看了一下。
- Popovers ✅✅一个功能强大的弹出窗口。 ⚠️有大量Js mehtod/Events可选(限制较多用的时候必须参考文档)
基础颜色:
Primary Secondary Success Danger Warning Info Light Dark
Alerts: 灵活的警告信息反馈的类
alert, alert-primary, alert-success, alert-danger, alert-warning, alert-info等。
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
alert-link
可用于<a>内 。其实就是加粗了。
Alert也可以包含其他元素,headings, paragraphs, dividers。
<h3 class="alert-heading">
<hr>,<p>
Dismissing
.alert-dismissible 让警告信息消失
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or positive action.
</div>
.fade
and .show
可以增加一个稍慢消失的效果
JavaScript behavior
(具体见https://getbootstrap.com/docs/4.1/components/alerts/)
$('.alert') .alert("close")
关闭alert会从DOM中移除它。
Badges 徽章 .badge-*
<h1>Example heading <span class="badge badge-success">New</span></h1>
产生一个标签 Primary Secondary Success
.badge-pill:Primary Secondary Success 标签是药丸状的。
在<a>使用就是一个带框的连接Primary Secondary
Button
可以在<a> <button>, <input>中使用。
<button type="button" class="btn">Basic</button><button type="button" class="btn btn-primary">Primary</button>
(按钮用到了::hover选择器。)
btn-outline-*
btn-lg, btn-sm, 以及不加这个类,是三种大小。
btn-block 创建一个块级的按钮,独占一行,和父级元素的宽度一样。
disabled/active
按钮是否能用,如果是disabled,则颜色发淡,让按钮处于不可用的状态。
如果是active,让按钮保持点击下去的状态。都是用到了event.
⚠️按钮有disabled这个属性!
连接标签,只能使用.disabled类
Button Group
一组按钮在一行,通过使用Javascript让它们的功能更强大。
包裹一组按钮用.btn在 .btn-group 中。
<div class="btn-group">
Card
一个灵活的可扩展的container。
可以添加图片,按钮,文字信息,list, link, button等的内容。
外部<div class="card" style="width: 18rem;">
⚠️需要自己定义大小。可以使用bt中的尺寸类 w-25, h-25, w-auto
图片:<img class="card-img-top">, card-img-bottom,
把图片作为背景:card-img-overlay(具体见文档)
Body:<dif class="card-body"> 可以增加文本信息,等等
标题:<h4 class="card-title">
副标题:<h6 class=''card-subtitle">
文本: <p class="card-text">
连接: <a class="card-link">
List groups: 创建一组list
<ul class="list-group">, <li class="list-group-item">
Header: <div class="card-header">也可以使用<h*>
footer: <div class="card-footer text-muted">
⚠️:header和footer的背景色可以使用bg-transparent除去。
Text alignment (点击看文字的排列样式大全)
默认是靠左,也可以在外部用.text-center, .text-left。
做导航板样式Navigation
在header中加上导航:
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active/disabled">
也可以使用pills样式。
card background
在外部使用bg-primary/success等设置背景色。
card border
边框色border-primary 可以配合text-*使用
Card layout
最外层:
<div class="card-group"> 通过使用group来形成一组排列紧密,整齐的列
<div class="card-deck"> 块状的整齐排列,但不紧密。
Card columns 不规则排列
样式:https://masonry.desandro.com/
最外层:
.card-columns
具体使用见文档
可以客制化car-columns在不同的屏幕上每行有几列。如:
.card-columns {
@include media-breakpoint-only(lg){ column-count: 4;}
}
Collapse(原博客消失了💢)
用于显示和隐藏一个content。原理是height:0.
轮播图Carousel
原理也是用css实现。
基本用法
外层:
<div class="dropdown">
开启下拉菜单的按钮或链接:
<button class="dropdown-toggle" data-toggle="dropdown">Dropdown</button>
下拉菜单:
<div class="dropdown-menu">
子项目:
<a class="dropdown-item">
可以使用btn-group来一组下拉按钮:
外层<div class="btn-group">
开启下拉菜单的按钮可以加独立的方向⬇️/➡️按钮 :用法是写两个按钮用到dropdown-toggle-split,具体见文档
内部的子项目可以加一个<div class="dropdown-divider">分割线。
开启下拉菜单的button可以加一个方向箭头⬇️/➡️。具体看文档!
外层<div class="btn-group dropright" >
Menu items
内部子项可以使用button或者link.
可以只创建一个<div class="dropdown-menu">
Active 和 Disabled
可以使用.active, .disabled来设置下拉选项的状态。
Menue 靠左
默认菜单是靠右边框,使用.dropdown-menu-right让菜单靠左边框。
Menu content
菜单可以有多种设计样式:
Headers: 使用<h6 class="dropdown-header">...</h6>
Dividers: 加一条分割线<div class=".dropdown-divider ">
Text: 可以加一些文本信息,具体看文档: class="text-muted"
Form: 甚至可以在下拉菜单中加一个表格,如登陆框。具体案例见文档。
Forms
form control styles, layout options, custom components
- Form control ✅
- Range inputs ✅
- Checkboxes and radios ✅
- Layout ✅
- Helptext ✅
- Disabled forms (没看)
- Validation ⚠️,server side.
- Custom forms(没看)
overview
务必在各类inputs上使用正确的type属性,如email对email address或者number对numerical information,利用好新的input controller,如number selection等。
<form>
<div class="form-group">
<label for="exampleInputEmail">Email address</label>
<input type="email" class="form-control" id="XXX" placeholder="输入邮件地址">
<small id="XXX" class="form-text text-muted">一些提示</small>
</div>
<div class="form-group">
<label for="xxx">Password</label>
<input type= "password" class="form-control" id="XXX" placeholder="提示">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="xxx">
<label class="form-check-label" for="xxx">核实</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
Form controls类
文本的form controls 像<input>, <select>, <textarea>,使用.form-control类会得到:
width:100%并包括一般的外表,焦点状态等等。
<form>
<div class="form-group">
<select class="form-control" id="XXX">
<option selected>1</option>
<option>2</option>
</select>
</div>
...
文件File inputs, 使用.form-control-file类
<input type="file" class="form-control-file" id="xxx">
尺寸:form-control-lg, form-control-sm, 和默认的中等form-control
Range Inputs范围输入 .form-control-range
案例:https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_range_create
<input type="range" class="form-control-range" id="xxx">
⚠️如何和数据存储交互?
input中等readonly
<input readonly>不可更改,外观灰色带框。
如果想要只显示文字,不带框使用:class="form-control-plaintext"
单一行表单 .form-inline
<form class="form-inline"> 一个表的所有元素在同一行显示,它的默认设置略有区别。
⚠️:
- display: flex。不是block
- width: auto,不是100%
- 只有在至少576px宽的屏幕上才有效果。
你可能需要手动修改独立的form controls的宽度和alignment。
最后每个form control必须加上<label>,即使把它隐藏,类class="sr-only"
案例:https://getbootstrap.com/docs/4.1/components/forms/#inline-forms
Checkboxes and radios
.form-check类,既会改进input types的布局也会影响它们的HTML元素的行为。
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="xxx">
<label class="form-check-label" for="defaultCheck1">
默认的checkbox
</label>
</div>
⚠️在input元素上添加disabled属性,就不能选择了。
radios: <input type="radio"...> 具体见案例。有默认选项checked属性
.form-check-inline 显示在一行 ,⚠️需要额外添加。
<div class="form-check form-check-inline">
Layout
Bt使用dsplay: block和width:100%作为大多数form的形式。也可以用别的布局。
Form groups .form-group
最简单form结构的类应用。鼓励使用适当的组织labels, controls, optional help text, 以及form validation信息。默认是使用margin-bottom。在.form-inline例外。
可以使用<div>, <fieldset>等块元素。
Form grid .form-row
更多复杂的form 可以通过使用grid classes来建设。
<form>
<div class="row">
<div class="col">..</div>
<div class='col'>..</div>
</div>
</form>
也可以使用form-row,排列会更紧密。
水平的表格(具体见案例)
label和input框在一行。
1.使用<div class="form-group row">
2.label使用class="col-*-2 col-form-label"
另外可以额外指定label尺寸: .col-form-label-sm/lg/不写,三个尺寸。
col-*
指定列宽。.col-auto是根据实际元素和内容长度指定宽度。
可以根据设备屏幕大小设置。.col-sm-3
⚠️可以客制化 (点击查看文档)没看
Help text .form-text
<smal id="xxx" class="form-text text-muted">...</smal>
.form-text内含block: block,是独占一行的。
如果是用在form-inline中的话,必须去到.form-text。
Disabled forms(不是所有浏览器都支持)
给form增加一个disabled属性,input则不能使用了。
<form>
<fieldset disabled>
...
</fieldset>
</form>
Validation
(rails有服务器端的验证机制)
提供错误提示给你的HTML5 form validation.
推荐使用客制化的信息,通过内建的类和JavaScript.(因为有些浏览器不支持HTML5验证)
推荐使用客户端的验证,也可以使用服务器端的验证。
浏览器的验证不会提供css装饰,你需要自己用Javascript写。
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="vs01">姓名</label>
<input type="text" class="form-control is-valid" id="vs01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="vsUsername">用户昵称</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="igp3">@</span>
</div>
<input type="text" class="form-control is-invalid" id="vsUsername" required>
<div class="invalid-feedback">
请输入一个昵称
</div>
</div>
</div>
</div><div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="ic3" required>
<label class="form-check-label" for="ic3">同意条款</label>
<div class="invalid-feedback">
你必须同意,才能提交。
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">提交</button>
</form>
⚠️?.is-invalid和.is-valid的区别?
is-invalid:当无效时显示提示信息,is-valid:当有效时显示提示信息。
Supported elements(没看懂)
需要用到custom-control等类。
Custom forms
没看rails可能不支持。
使用完全客制化的form元素来取代浏览器默认的。
可以增加text, buttons, button groups 到textual inputs, custom selects, custom file inputs的两边。
最外层: class="input-group"
放在左边的: 用.input-group-prepend; 放在右边的:.input-group-append
text: 用div,span添加.input-group-text
button: 直接使用button
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">With textarea</span>
</div>
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
大小
input-group-sm/lg
可以嵌套checkboxes, radios
放在<div class="input-group-text">中。
多重inputs
在一个块<div class="input-group">中放入两个相邻的input,在视图上会紧紧相邻
Buttons with dropdowns (点击查看案例)
就是把按钮和下拉菜单都放到<div class="input-group-prepend">中,其他没区别
Custom forms
input groups也支持使用custom selects和customfile inputs
List group
灵活强大的组件用于显示一系列content。支持在它内部修改和扩展任何content 。
基本用法
<ul class="list-group">
<li class="list-group-item">
items
给list-group-item增加一个.active类,暗示当前选项。
同样,增加一个.disabled类,则显示不能使用
Links and buttons
使用<a>, <button>,如果加上.list-group-item-action类,会出现hover状态效果。
要使用active 和 disabled 状态,必须同时使用list-group-item-action
其他的视觉显示效果
flush:
外层<div>上增加.list-group-flush类,会去掉边框borders.
背景颜色效果:
内层<li>上增加.list-group-item-success类
同时支持使用hover效果的类 list-group-item-action
<li>内添加badges
https://getbootstrap.com/docs/4.1/components/list-group/#with-badges
- Morbi leo risus1
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
文字信息。。
<span class="badge badge-primary badge-pill">1</span>
</li>
...
.justify-content-between类: 一行的2个元素各在一头,
.align-items-center类:一行的元素在框的中间位置,上下的空间一样高。
custom content没看
JavaScript behavior没看。
Nav
⚠️见⬇️使用flex,根据断点调整排列结构。
基础的.nav,还有active和disabled2种状态。
基础的.nav组件提供一个强大的功能来创建多种类型的导航组件。他包括一些样式覆写override, 一些link padding更大,以方便点击。
.nav, .nav-item, .nav-link, .active , .disabled
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">XXX</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">xxx</a>
</li>
</ul>
类可以用于各处,你的markup可以很灵活, 除了使用<ul>,还可以用<nav>
无需加上nav-item。
<nav class="nav">
<a class="nav-link active" href="#">xxx</a>
...
可用的风格
通过modifiers and utllities, 可以改变.nav 组件的风格。混入和匹配你需要的风格,或者自己写。
水平排列alignment
.nav默认是靠左,可以使用: 在外层使用.justify-content-center/end类调整。
垂直排列
使用.flex-column,根据屏幕大小.flex-sm-column
其他风格
tabs风格: .nav-tabs,
药丸风格: .nav-pills
导航条的每项互相拉开距离, 占满一整行,但每项间距不会完全相同。
<ul class="nav nav-fill">
⚠️如果使用<nav class="nav nav-fill">则<a>需要加上.nav-item
每项间距完全相同, 外层使用.nav-justified
⚠️ 如果使用<nav class="nav nav-justified">则<a>需要加上.nav-item
使用flex utilities来调整导航栏 (重要!)
具体见https://getbootstrap.com/docs/4.1/utilities/flex/
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Disabled</a>
</nav>
解释:
<nav>层 同时使用了flex-column flex-sm-row
因此在最小的断点的以内的情况下,会使用flex-column垂直排列导航栏。超过手机屏幕大小/断点,会用水平一行显示flex-sm-row。
<a>层, 使用了flex-sm-fill text-sm-center
flex-sm-fill强制在超过手机屏幕大小的断点后,兄弟<a>等宽,并占据一整行。
text-center,文本剧中。
⚠️和下节navbar中使用collapse功能差不多,区别就是多一个按钮。
Regarding accessibility 不懂
使用下拉菜单
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">xxx</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" >xx</a>
...
JavsScript behavior没看。
Navbar
支持branding, 导航等等支持collapse插件。
Supported content
- .navbar-brand 左上角的商标,公司名字。
- .navbar-nav 一个等高轻量级导航条,(支持下拉菜单)
- .navbar-toggler 用于使用collapse插件和其他导航toggling行为
- .form-inline 用于表单控件和行为
- .navbar-text 用于增加垂直的中心的文本。
- .collapse.navbar-collapse 专门用在导航条的显示和隐藏子navbar内容
完整的案例:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">商标</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#导航栏的🆔">
<span class="navbar-toggler-icon "></span> #一个按钮,可以选择其他按钮风格,把所有导航栏放入其中。
</button>
#下面是导航栏的主体部分:
<div class="collapse navbar-collapse" id="导航栏的🆔'>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="🆔" role="button" data-toggle="dropdown"> Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
#一个表格:用于搜索。
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search">
<button class="btn btn-outline-success my-2 my-sm-0">Search</button>
</form>
</div>
</nav>
bg-light是背景颜色设置。(点击)
my-2, my-lg-0, mr-sm-0, my-sm-0是spacing utility classes空间功能类。 (点击查看)
案例的分解:
最外层<nav>中,.navbar和.navbar-expand-sm/md/lg/xl用于响应屏幕collapsing,和color scheme类。
Brand: .navbar-brand
商标一般使用<img src="..." width="" height="" class="d-inline-block align-top" alt="">
用于在小屏幕显示导航条的button按钮:
使用.navbar-toggler类来使用collapse插件功能。
需要collapse的导航条,需要使用<div>来包裹
其class="collapse navbar-collapse",同时使用id="导航栏的🆔"来响应,<button data-target="导航栏的🆔">
<ul class="navbar-nav">
这里使用了navbar-nav代替了.nav, 证明它是导航栏中的nav。
li没啥区别:<li class="nav-item"><a class="nav-link">...</li>
用<div>代替<ul>也可以,能节省代码输入,不用输入<li>了。
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
</div>
</div>
Forms
也可以使用input group,目的就是建立一个搜索框。
.nav-text是直接在导航条写一段纯文本
Color schemes
颜色主题:navbar-light和bg-*可以一起使用,或者直接使用background-color自定义背景色
containers
在<div class="container">..</div> 中使用<na>
导航条居中显示,两边有margin
Placement
导航条的放置方式:
- 默认是可以滚动出屏幕
- 固定在屏幕顶端 <nav class="navbar fixed-top navbar-light bg-light">
- 固定在屏幕底部 fixed-bottom
- stick方式,w3schools网站使用了这个功能。.sticky-top
案例:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_position_sticky
.sticky-top类使用了css#position: sticky
当<nav>代码处于屏幕中间位置,他的上面还有代码块如<div>。当滚动到<nav>,<nav>会处于屏幕顶端不动。
Responsive behaviors
Navbars可以利用.navbar-toggler, .navbar-collapse, .navbar-expand-sm/md/lg/xl类来建立一个按钮,这个button会代替navbar上的内容。当点击按钮后会垂直显示navbar上的内容。
collapse<button>和商标<a>在代码的位置关系,决定了collpase,按钮和商标的位置。
External content 点击查案例
可以通过collapse插件来激发page上任意位置隐藏的内容 。 因为插件是根据🆔和data-target属性来进行匹配的。
<div class="pos-f-t">
<div class="collpase" id="🆔">
<h5 class="text-white h4">标题</h5>
<span class="text-muted">xxxxxxxxxx</span>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="🆔">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
使用<nav>和<ul>
Popovers
一种Bootstrap弹出框,类似IOS中的弹出框。
overview
- Popper.js库必须安装。需要tooltip plugin。需要util.js
- 必须自己初始化popovers。选择指定元素并调用popover()方法
如何使用
给一个元素增加data-toggle="popover"属性。
title属性和data-content属性是指定标题和内容
JavaScript函数:让popovers 在哪都能用
一种方法,初始化所有弹出框在一个page上,选择它们通过它们的 data-toggle属性:
<script>
案例: (点击看实例)
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="xxxxxx" >Click to toggle popover</button>
<a href="#" data-toggle="popover" title="Popover title" data-content="xxxxxx">Click to toggle popover</a>
使用container选项 没看懂
4个窗口弹出方向:top, right, left, bottom
data-placement="top"
给用户提示:这是不能用的按钮(element)
disabled属性让元素无法使用(用户不能点击,悬停来激活一个提示popover/tooltip)
有一个变通方法, 把元素包裹进<div>或<span>中,并在这个disabled element上使用pointer-events样式。
例子:
<span class="d-line-block" data-toggle="popover" data-content="disabled popover">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>不能用</button>
</span>
本质上是<span>上使用了popover方法。
pointer-events:hover也可以使用。
任何地方的点击都可以关闭之前打开的popover (点击看文档案例)
使用focus trigger可以做到。
- 可以在元素中明确声明data-trigger='"focus"可以实现这个功能。
- 也可以使用Javascritp函数:
trigger有click/hover/focus几个选项,默认是click,可以不明确声明。
❌⚠️这个功能的限制:
因为跨浏览器的原因,必须使用<a>来代替<button>,并且需要加上属性tabindex=0
Javascript功能的使用
$('#example').popover({options})
Options(具体见文档)
在元素中使用data-{option name}="value"
在js中,用hash形式{opt1:"value", ...}
Methods/Events见文档
Tooltips
基本用法和popovers一样。
小型的pop-up box 当鼠标移动到元素上面时显示信息。
添加data-toggle="tooltip" 属性到一个元素上。
使用title属性指定文本信息。
一般用于一大段文章,中的需要标记的关键字。
jQuery函数:让popovers 在哪都能用
<script>
或者通过🆔指定元素:$('#myTooltip').tooltip();
案例: 同样可以使用placement属性。
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="XXXX">你好</button>
可以使用data-html="true"来客制化提示信息。
title="<em>Tooltip</em><u>with</u><b>HTML</b>"
使用方法:
$("#example").tooltip({options})
其他的options, Mehtods, Events基本类似popovers
创建一个进度条 Progress bars
原生纯css和javascript的案例:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_progressbar_label_js
文档没由讲解如何使用js移动进度条。
使用bootstrap客制化进度条功能,支持stacked bars, animated backgrounds,和文本标签
如何工作:
Progress组件由2个HTML元素,一些CSS设置width, 和一些属性创建。
没有使用HTML5的<progress>元素,这样可以确保stacked bars,动态背景,文本标签生效。
- .progress作为一个wrapper来暗示进度条的最大值
- 内部的.progress-bar
- .progress-bar需要an inline style, utility class或客制css来设置它的宽度。
- 也需要role, aria属性来让它们可accessible.
案例:
<div class="progress" style="height: 10px;">
<div class="progress-bar w-0" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
</div>
Scrollspy
https://www.w3schools.com/bootstrap4/bootstrap_scrollspy.asp
自动更新导航条或list group组件的active项,基于滚动位置,表示在viewport中,哪个连接是当前活跃的。
如何工作:
- 需要util.js
- 必须用nav或者list group
- Scrollspy需要position: relative属性在你所监视的元素上,通常是<body>
- 当监视的元素不是<body>时,需要height设置,overflow-y: scroll设置
- scroll元素的🆔必须匹配navbar中的list item中的link( <div id="session1"> 必须匹配 <a href="#session1">)
Usage:
通过data attributes
需要配置body的css
body{
position: relative;
}
<body data-syp="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
Modal
点击按钮或连接增加一个对话框给你的网页,
如何工作:
- 点击modal周边的背景,会自动关闭modal
- Bootstrap每一次只支持打开一个modal窗口
- 把modal放在一个top-level position避免潜在的和其他元素的冲突。
- 由于使用position: fixed,在移动端会产生⚠️信息。
案例:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开窗口</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<div>
</div>
</div>
<div>
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
分析:
fade类是添加一个动画显示效果
modal可以和tooltips, popovers一起使用。
modal也可以使用grid, form-group
可以插入视频。