bootstrap4-部分总结-阿里云开发者社区

网格系统

资源库

<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

移动设备优先

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度

initial-scale=1 表示初始的缩放比例

shrink-to-fit=no 自动适应手机屏幕的宽度

容器类

.container 类用于【固定宽度】并支持响应式布局的容器

.container-fluid 类用于【100% 宽度】，占据全部视口（viewport）的容器

均有一定的内外边距

规则

将container 的宽度划分为12等份，内容放在列（.col-*-*）中，列放在行(.row)中

其中第一个星号表示屏幕设备类型，第二个星号是从1到12的数字

偏移列 offset-*-*第二个星号表示1到11的数

.col- 针对所有设备
.col-sm- 平板 - 屏幕宽度等于或大于 576px
.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
图像形状

.rounded【圆角图片】.rounded-circle【椭圆形图片】.img-thumbnail【略缩图】.float-right【图片右对齐】.mx-auto(margin:auto)和 .d-block (display:block)【图片居中对齐】.img-fluid【设置响应式图片】相当于 max-width:100%;height:auto;

轮播

<!--指示符-->
<div id=“” class=”carousel slide” data-ride=”carousel” >
  <ul class=”carousel-indicators”>
    <li data-target=”” data-slide-to=”” class=”active”></li>
  </ul>
<!--图片-->
  <div class=”carousel-inner”>
    <div class=”carousel-item active”>
      <img src=”” >
    </div>
  </div>
<!--左右切换按钮-->
  <a class="carousel-control-prev" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
<div>

.carousel 【创建一个轮播】.slide【切换图片的过渡和动画效果】

data-ride=“carousel” 【触发轮播动作】

.carousel-indicators 【轮播指示符】class=“item active” 【表示轮播一张张图片】

.carousel-inner【添加要切换的图片】 .carousel-item【指定每个图片的内容】

.carousel-control-prev【添加左侧按钮，点击返回上一张】 .carousel-control-next【添加右侧按钮，点击切换到下一张】

.carousel-control-prev-icon,.carousel-control-next-icon（与 .carousel-control-prev 一起使用，设置左侧的按钮）

使用==data-slide-to==来向轮播传递一个原始滑动索引，data-slide-to="2"将把滑块移动到一个特定的索引，索引从 0开始计数

data-toggle指以什么事件类型触发, 一般事件会作用到一个标签对象，如果是其他标签对象，就需要使用data-target指事件的标签目标。所以data-loggle和data-target有时会结合一起使用

扩展

data-ride=“carousel” 属性用于标记轮播在页面加载时就开始动画播放；属性 data-slide接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。

.carousel-inner img {
      width: 100%;
      height: 100%;
  }

滚动监听（scrollspy）

即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。

<body data-spy="scroll" data-target=".navbar" >

data-spy="scroll"监听目标元素

使用 data-spy=“scroll” 的元素需要将其 CSS position 属性设置为 “relative” 才能起作用

data-target属性的值为导航栏的id或class，这样才可以联系上可滚动的区域

小工具

边框

1）添加移除边框

.border【添加】.border【移除四边】.border-left-0 【溢出左边】

2）颜色

例：border-white

3）圆角

rounded

浮动

.float-right【右浮动】.clearfix【清除浮动】

.float-*-left【在不同的屏幕上左浮动】

居中对齐

.mx-auto

宽度

w-*

高度

h-*

进度条

<div class=”progress”>
  <div class=”progress-bar” style=”width:70%”>可以添加文本</div>
</div>

【在第一个大盒子中添加 style=”height:”改变进度条高度】

【第二个盒子 class中添加 bg-* 改变颜色】

.progress-bar-striped【条纹进度条】

.progress-bar-animated 【动画进度条】

【混合色彩】

徽章(badges)

I am a<span class=”badge badge-*”>girl

.badge类加上带有指定意义的颜色类添加到元素上即可，徽章的大小根据父元素大小变化而变化

.badge-pill 【药丸形状徽章】

.spinner-border-【加载中效果，文本颜色类设置不同颜色】.spinner-grow-【闪烁的加载效果】**【创建加载中效果大小（sm）】

下拉菜单

<div class=”dropdown(下拉菜单)”>
  <button type=”button” class=”btn btn-primary dropdown-toggle（切换，开关）” data-toggle=”dropdown”>Dropdown button </button>
  <div class=”dropdown-menu【设置实际下拉菜单】”> .dropdown-menu-right【右对齐
】
    <a class=”dropdown-item” href=”#”>one</a>
    …
    …
  </div>
</div>

使用按钮或链接打开下拉菜单；

.dropdown-divider【水平分割线】

.dropdown-header【下拉菜单中添加标题】

下拉菜单弹出方向设置right/up/bottom/left

<div class=”btn-group dropright”>
  <button type=”button” class=”btn btn-secondary dropdown-toggle” data-toggle=”dropdown” aria-haspopup=”ture” aria-expanded=”false”>
Dropright
</button>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”></a>
…
…
</div>
</div>

.dropdown-item-text【下拉菜单中的文本项】

按钮中的下拉菜单

<div class=”container”>
  <div class=”btn-group”>
    <button type=”button” class=”btn btn-primary”>anjiu</button>
    <button type=”button” class=”btn btn-primary dropdown-toggle dropdown-toggle-split” data-toggle=”dropdown”>
      <span class=”caret(脱字符)”></span>
         </button>
      <div class=”dropdown-menu“>
      <a class=”dropdown-item” href=”#”></a>
      …
      …
      </div>
  </div>
</div>

动态选项卡

<ul class=”nav nav-tabs”>   
  <li class=”nav-item”>
    <a class=”nav-link active” data-toggle=”tab” href=”#home”></a>   data-toggle=”tab”【选项卡动态切换】
  </li>
  <li>…</li>
</ul>

…
…
…
<div class=”tab-content”>  .tab-content
  <div class=”tab-pane active container” id=”home”>…</div>   .tab-pane【】
  <div>…</div>
</div>

选项卡是动态可切换的，在每个链接上添加 data-toggle=“tab” 属性。在每个选项对应的内容的上添加 .tab-pane 类，对应选项卡内容的

元素使用 .tab-content 类。。

如果你希望有淡入效果可以在 .tab-pane 后添加 .fade类

导航栏

<ul class=”navbar-nav”>
    <li class=”nav-item”>
      <a class=”nav-link” href=”#”></a>
    </li>
  </ul>

垂直导航栏即去掉 navbar-expand-sm/md/xl/lg

居中对齐导航栏

.navbar-brand 【高亮显示】.navbar-brand【图片自适应导航栏】

导航栏使用下拉菜单

表单

表单控件(form-control)【input textarea checkbox radio select】

语法

<div class=”form-group”>
  <label for=””>
  <input type=”” class=”form-control” id=””>
</div>

For与id 的值相同

<label for="element_id">l`abel 绑定的元素的 id。聚焦
<div class=”form-check”>
<label class=”form-check-label”>【复选框】
<input type=”checkbox” class=”form-check-input” value=””>
</label>
</div>

.form-check-inline 【复选框显示在同一行】

.radio-inline 【单选框显示在一行】

布局【堆叠表单（垂直方向），内联表单（水平方向）】

堆叠表单：：

<form>
  <div class=”form-group”>
    <label for=””></label>
    <input type=”” class=”form-control” id=””>
  </div>
</form>

内联表单只需在form 元素上添加 .form-inline

输入框组

<form>
  <div class=”input-group【输入框组】”>
    <div class=”input-group-prepend【可以在输入框的前面添加文本信息】”>
      <span class=”input-group-text【设置文本的样式】”></span>
    </div>
  <input type=”text” class=”form-control【表单控件】” placeholder【占位文本】=””>
  </div>
</form>

.input-group-sm输入框大小

自定义表单

复选

<form>
  <div class=”custom-control custom-checkbox”>
    <input type=”checkbox” class=”custom-control-input” id=”customCheck” name=””>
    <label class=”custom-control-label” for=”custom-Check”></lable>
  </div>

如果要自定义一个复选框，可以设置

为父元素

自定义选择菜单

<select name=”” class=”custom-select-sm/” >
  <option></option>
</seletct>
【自定义滑块控件】
<input type=”range” class=”custom-range” >
【自定义文件上传控件】
<form>
<div class=”custom-file”>
<input type=”file” class=”custom-file-input id=”customFile”>
    <label class=”custom-file-label” for=”customFile”><label>
  </div>
</form>

bootstrap4-部分总结