BooStrap4文档摘录 Utilities

• border：可以用原生css实现效果。❌没看
• clearfix， float,  ✅
• close icon ✅
• colors ✅
• display✅  各种显示的格式。
• embed ✅ <iframe>等元素插入video, 视频，视频，视频
• flex ✅
• image replacement ❌，没看明白。
• Position ⚠️就是css的position的简写。
• Screenreaders✅
• shadows ✅
• sizing  ✅
• spacing  ✅
• visibility ✅

---

 

Clearfix   .可以用于按钮button 

在一个container内，快速的清除浮动内容 。

<div class=" clearfix ">

  <button type="button" class=" float-left" >Button floated left</button>

  <button type="button" class=" float-right ">Button floated right</button>

</div>

...后面的元素。。 

解释：因为button使用了.float-left/right类，后面的会环绕着这个按钮。如果不像加这个效果需要用到 .clearfix。

本质: 使用了 clear: both; 

 

---

 

 

Float 

使用响应式float utility, 在任意元素上激活floats效果，跨任何breakpoint。

基于css#float特性。

 

float-left/right/none 

 

响应式： float-{sm/md/lg/xl}-right 

比sm断点大的屏幕width会激活效果。 sm 也是小平板的宽度。

 

---

 

Screenreaders 

 

使用这个utilities来隐藏所有设备上的元素，除了screen readers 

.sr-only

.sr-only-focusable :当元素处于焦点时，显示这个元素。

 

<a class="sr-only">...</a> 

---

 

Close icon

 

一个通用的关闭按钮，用于如alerts和modals.

<button type="button" class="close" aria-label="Close">

  <span aria-hidden="true">&times;</span>

</button> 

解释：

使用.close。X是"&times;"。

aria-lable用于screen readers。 

 

 

---

 

 

Colors 

文本tex，背景色background，

text-*:  text-muted用于不可用的颜色状态。

bg-*,  如bg-primary,

还有secondary, success, danger, warning, info, light, dark, white, transparent。

 

---

---

display 

 

用响应式display utility classes来改变css的display特性的值 

 

Display utility classes可以使用所有breakpoints (xs/sm/md/lg/xl),其中xs是默认配置。

 

.d-{value} 默认是xs

.d-{breakpoint}-{value} 用于sm, md, lg, xl。

 

value:

none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex 

 

none: 元素被完全移除。 

 

inline类似于<span>。

block类似<p>,从新开始一行并独占这行。 

inline-block,类似一个inline元素，但可以设置height,width values。

 

talbe: 让元素类似<table>

table-row: 让元素类似<tr> 

table-cell: 让元素类似<td>

 

flex: 显示一个元素作为一个块级的flex container

inline-flex: 显示一个元素作为一个inline级的 flex container

 

---

Examples

 

d-inline

 

d-inline

 

<div> 

  <div class="d-inline p-2 bg-primary text-white">d-inline</div>
  <div class="d-inline p-2 bg-dark text-white">d-inline</div>

</div>

 

 

---

 

Hiding elements 

 

为了更快的 移动友好的开发，使用响应式display类来显示和隐藏元素。

避免创建完全不同版本的相同site

 

.d-none

.d-{sm, md, lg, xl}-none

 

如果希望一个元素只在特定的大小的屏幕上显示使用： .d-*-none类,和.d-*-*  (点击查看)

比如：只在sm上看到这个元素, .d-none .d-sm-block .d-md-none 

 

例子：

只能看比lg小的 

<div class="d-lg-none">你hide on screens wider than lg</div>

只能看比lg大的 

<div class="d-none d-lg-block">我hide on screens smaller than lg</div>

 

---

 

 

Display in print

猜测是和文件打印有关

.d-print-{value} 

 

 

---

---

 

Embeds

创建响应式video或者slideshow的插入，基于父元素的宽度， 

 

可以使用<iframe>， ,<embed>,<video><object>元素。

 

<div class="embed-responsive embed-rsponsive-16by9">

  <iframe class="embed-responsive-item" src="完全的url" ></iframe>

</div> 

 

解释：

把<ifram>元素放入一个父元素中，父元素有.embed-responsive类和一个aspect ratio比率。如：.embed-responsive-{16by9|21by9|4by3|1by1}

<ifram>元素的类.embed-responsive-item，是证明<ifram>是一个子项，非必须但推荐。 

 

 

---

---

 

Flex 

 

用响应式flexbox utilities快速管理布局，alignment直线排列，和grid column网格列的大小，导航， 组件等等.

更复杂的功能，需要客制化css.

 

---

和display utilities一起使用: 

 

d-flex, d-inline-flex ：

区别是inline-flex 的width由内部元素的总宽度决定

 

创建一个flexbox容器，里面的子元素根据flexbox 的display方式显示。

 

下面例子，因为父元素使用flex功能，<p>,<h1>,<div>都在一行排列： 

<div class= "d-inline-flex p-2 bd-highlight bg-warning">

  <p>dsfa</p>

  <h1>title</h1>

  <div>d</div>

</div>

 

---

水平管理Alignment

 

.flex-row(默认，可不写)，

.flex-row-reverse(靠右水平排列,但子项目反转排列，从123，变为321) 

.flex-column,排成一列

 

它们可以使用响应式.flex-{xm/sm/md/lg/xg}-* 

 

---

Justify content 文本对齐 

点击查看效果图 

justify-content-{sm|...}-{start|end|center|between|around}

 

例子：

<div class="d-flex justify-content-end"> 

 

⚠️和mr-auot, ml-auto的区别。

 

• justify-content-*, 经过尝试发现只能用在最外层的<div>，用在嵌套内的<div>是无效果的。
• ml-auto，正好相反，需要用在内层的<div>
• 2者不能一起使用。

 

  div class=" collapse navbar-collapse 这里可以使用justify-content-* " 

    div class="navbar-nav 这里可以用ml-auto"

      a class="nav-item nav-link" href="#" Home

 

---

 

Fill 

子元素类.flex-fill，用于让所有子元素等宽, 填满整个flexbox。 也可以使用响应式

 

<div class="d-flex  bg-primary">

  <div class="flex-fill">Flex item 1</div>

  <div class="flex-fill">Flex item 2</div>

  <div class="flex-fill">Flex item 3</div>

</div> 

 

---

 

Align items 和Align content

 

align-items-{sm|..}-* 

align-content-{}-* 

都可以使用：start/end/center/baseline/stretch 

 

⚠️：align-content的使用?：（点击看案例） 

只用在多行的情况下： 

就是如果有多行子元素，即使用flex-wrap后，才能可以使用align-content进行各种排列。

 

这是浏览器默认：

<div class="d-flex align-items-stretch">...</div> 

<div class="d-flex align-content-start">...</div> 




<div class="d-flex align-items-center bg-light" style="height:150px">

<div class="p-2 border">Flex item 1</div>

<div class="p-2 border">Flex item 2</div>

<div class="p-2 border">Flex item 3</div>

</div>

---

 

 

 

 Wrap

 

 

专门针对的是flex-row的默认情况，如果有大量子元素，控制它们如何在flexbox中排列。

默认flex-nowrap是一行，自动加上滚动条。

加上flex-wrap ,每行占满屏幕宽度后自动换下一行 

可以使用响应式。 

 

---

 

 Grow  (点击看案例)

改变子元素padding-right，起到点击一个按钮，按钮在一个横条框内变宽的效果。

flex-grow-1让一个子元素自身占满整行可用空白，其他子元素只占必要的宽度。

flex-grow-0 恢复默认。 

<div class="d-flex bd-highlight">

  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>

  <div class="p-2 bd-highlight">Flex item</div>

  <div class="p-2 bd-highlight">Third flex item</div>

</div>

 

---

shrink没清楚的案例看不懂。 

---

 

Auto margins  (点击看案例)

增加一个子元素css样式的margin-{right|left}， 起到按键在一个横条中滑动的效果

.mr-auto 代表css#margin-right

.ml-auto 代表css#margin-left

  

⚠️不能和justify-content, align-self一起使用, 否则justify-content, align-self会失效。解决办法

1. 只使用ml-auto 

  <div class="d-flex  bg-secondary">

    <div class="bg-info">Flex item 1</div>

    <div class="bg-warning">Flex item 2</div>

    <div class=" ml-auto bg-primary">Flex item 3</div>

  </div>

2. 创建一个<div style="visibility:hidden; flex-grow:1;">。flex-grow-1的作用是让元素的padding-right占满全行。同时，<div>又是隐藏的，自然会把其他元素挤压到边上。⚠️，flex-grow-1用在<div>上的。

 

---

 

 order-*（数字）

 

子元素上添加类.order-1可以改变子元素的排列顺序。

 

---

---

 

Position:

 

 position: fixed; 根据视图固定住位置。<nav class="navbar fixd-top">使用了这个css特性

 

 position: relative;配合top, right, bottom, left特性确定一个相对位置。

 

 position:absolute; （点击查看案例）

根据这个元素的父元素（最近的一个祖先）的position定的位置，设置位置。如果没有父元素（及其祖先）没有设置position，则使用<body>。

如果元素之间发生overlap，可以使用z-index 。 

 

 position：sticky;  

当随滚动条移动到屏幕顶部时，就不再移动了。 <nav class="navbar sticky-top">，也可以设定top(距离顶部多远)

⚠️:Safari的值是-webkit-sticky； 

 

用图片做背景色：再看position:absolute（案例）

图片可以使用opacity:0.3特性进行淡化处理。 

 

 

---

 

 

shadows 

shadow-{sm|...} 

一般白底效果明显。 

 

 

---

 

 

Border Radius 

类:

rounder :圆角的框

rounder-circle ，纯圆的框。

---

 

 Sizing:

width:25% 简写 w-25

height: 50% 简写 h-50 

 

 

---

 

 

简写的margin和padding

 

  {property}{sides}-{breakpoint}-{size} 

 

 property:

• m - for classes that set margin
• p - for classes that set padding

sides:

• t - for classes that set margin-top or padding-top
• b - for classes that set margin-bottom or padding-bottom
• l - for classes that set margin-left or padding-left
• r - for classes that set margin-right or padding-right

size:

0-5

 

---

 

 

visibility 

 

.visible {visibility: visible;} 

.invisible {visibility; hidden;} 

 

转载于:https://www.cnblogs.com/chentianwei/p/9219886.html