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。

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.

<button type="button" class="btn btn-primary active">Active Primary</button>

⚠️按钮有disabled这个属性！

<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>

连接标签，只能使用.disabled类

<a href="#" class="btn btn-primary disabled">Disabled Link</a>

Button Group

一组按钮在一行，通过使用Javascript让它们的功能更强大。

包裹一组按钮用.btn在 .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

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中加上导航：

也可以使用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实现。

Dropdowns

基本用法

外层：

开启下拉菜单的按钮或链接：

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

下拉菜单：

子项目：

可以使用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>

<label for="exampleInputEmail">Email address</label>

</div>

<label for="xxx">Password</label>

</div>

</div>

</form>

Form controls类

文本的form controls 像<input>, <select>, <textarea>,使用.form-control类会得到:

width:100%并包括一般的外表，焦点状态等等。

<form>

</select>

</div>

...

文件File inputs, 使用.form-control-file类

尺寸：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中等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元素的行为。

默认的checkbox

</label>

</div>

⚠️在input元素上添加disabled属性，就不能选择了。

radios: <input type="radio"...> 具体见案例。有默认选项checked属性

.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>

</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

.form-text内含block: block，是独占一行的。

如果是用在form-inline中的话，必须去到.form-text。

Disabled forms(不是所有浏览器都支持)

给form增加一个disabled属性，input则不能使用了。

<form>

...

</fieldset>

</form>

Validation

(rails有服务器端的验证机制)

提供错误提示给你的HTML5 form validation.

推荐使用客制化的信息，通过内建的类和JavaScript.(因为有些浏览器不支持HTML5验证)

推荐使用客户端的验证，也可以使用服务器端的验证。

浏览器的验证不会提供css装饰，你需要自己用Javascript写。

<form>

Looks good!

</div>

</div>

请输入一个昵称

</div>

你必须同意，才能提交。

</div>

</form>

⚠️？.is-invalid和.is-valid的区别？

is-invalid：当无效时显示提示信息，is-valid：当有效时显示提示信息。

Supported elements（没看懂）

需要用到custom-control等类。

Custom forms

没看rails可能不支持。

使用完全客制化的form元素来取代浏览器默认的。

Input group

可以增加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 。

基本用法

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

文字信息。。

</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。

...

可用的风格

通过modifiers and utllities, 可以改变.nav 组件的风格。混入和匹配你需要的风格，或者自己写。

水平排列alignment

.nav默认是靠左，可以使用: 在外层使用.justify-content-center／end类调整。

垂直排列

使用.flex-column，根据屏幕大小.flex-sm-column

其他风格

tabs风格： .nav-tabs，

药丸风格： .nav-pills

导航条的每项互相拉开距离，占满一整行，但每项间距不会完全相同。

⚠️如果使用<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 不懂

使用下拉菜单

...

JavsScript behavior没看。

Navbar

支持branding, 导航等等支持collapse插件。

Supported content

.navbar-brand 左上角的商标，公司名字。
.navbar-nav 一个等高轻量级导航条，（支持下拉菜单）
.navbar-toggler 用于使用collapse插件和其他导航toggling行为
.form-inline 用于表单控件和行为
.navbar-text 用于增加垂直的中心的文本。
.collapse.navbar-collapse 专门用在导航条的显示和隐藏子navbar内容

完整的案例：

<span class="navbar-toggler-icon "></span> #一个按钮,可以选择其他按钮风格，把所有导航栏放入其中。

</button>

#下面是导航栏的主体部分：

<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>

</li>

<a class="nav-link dropdown-toggle" href="#" id="🆔" role="button" data-toggle="dropdown"> Dropdown</a>

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

<a class="dropdown-item" href="#">Another action</a>

<a class="dropdown-item" href="#">Something else here</a>

</div>

</li>

<a class="nav-link disabled" href="#">Disabled</a>

</li>

</ul>

#一个表格：用于搜索。

<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="导航栏的🆔">

这里使用了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

解释stick功能：

案例：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属性来进行匹配的。

<span class="text-muted">xxxxxxxxxx</span>

</div>

</button>

</nav>

</div>

Pagination

使用<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属性：

$(document).ready(function(){

$('[data-toggle="popover"]').popover();

});

</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>

本质上是<span>上使用了popover方法。

pointer-events:hover也可以使用。

任何地方的点击都可以关闭之前打开的popover （点击看文档案例）

使用focus trigger可以做到。

可以在元素中明确声明data-trigger='"focus"可以实现这个功能。
也可以使用Javascritp函数:

$(document).ready(function(){

$('[data-toggle="popover"]').popover(

{trigger: 'focus'}

);

});

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 在哪都能用

$(document).ready(function(){

$('[data-toggle="tooltip"]').popover();

});

</script>

或者通过🆔指定元素：$('#myTooltip').tooltip();

案例：同样可以使用placement属性。

可以使用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>

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;

}

...

...

</ul>

</div>

...

</body>

Modal

点击按钮或连接增加一个对话框给你的网页，

如何工作：

点击modal周边的背景，会自动关闭modal
Bootstrap每一次只支持打开一个modal窗口
把modal放在一个top-level position避免潜在的和其他元素的冲突。
由于使用position: fixed，在移动端会产生⚠️信息。

案例：

<h4 class="modal-title">Modal Heading</h4>

</div>

Modal body..

</div>

<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

<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">&times;</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

可以插入视频。

具体各类设置：见文档

posted @ 2018-06-21 21:16 Mr-chen 阅读(616) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部