一、边框
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>边框</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
<style>
span{
background-color: #444;
color: #fff;
width: 70px;
height: 70px;
display: block;
}
</style>
</head>
<body style="background-color: #000">
<div class="container">
<div class="row mb-5 mt-5">
<div class="col-1">
<span class="border">全边框</span>
</div>
<div class="col-1">
<span class="border-top">上</span>
</div>
<div class="col-1">
<span class="border-right">右</span>
</div>
<div class="col-1">
<span class="border-bottom">下</span>
</div>
<div class="col-1">
<span class="border-left">左</span>
</div>
<div class="col-1">
<span class="border border-0">无边框</span>
</div>
<div class="col-1">
<span class="border border-top-0">右下左</span>
</div>
<div class="col-1">
<span class="border border-right-0">上下左</span>
</div>
<div class="col-1">
<span class="border border-bottom-0">上右左</span>
</div>
<div class="col-1">
<span class="border border-left-0">上右下</span>
</div>
<div class="col-1">
<span class="border border-left-0 border-right-0">上下</span>
</div>
<div class="col-1">
<span class="border-left border-right">左右</span>
</div>
</div>
<div class="row mb-5">
<div class="col-1">
<span class="border border-primary">重要色</span>
</div>
<div class="col-1">
<span class="border border-secondary">次要色</span>
</div>
<div class="col-1">
<span class="border border-success">成功色</span>
</div>
<div class="col-1">
<span class="border border-danger">危险色</span>
</div>
<div class="col-1">
<span class="border border-warning">警告色</span>
</div>
<div class="col-1">
<span class="border border-info">信息色</span>
</div>
<div class="col-1">
<span class="border border-light">亮色</span>
</div>
<div class="col-1">
<span class="border border-dark">暗色</span>
</div>
<div class="col-1">
<span class="border border-white">白色</span>
</div>
</div>
<div class="row mb-5">
<div class="col-1">
<span class="border rounded">四角圆(默认半径)</span>
</div>
<div class="col-1">
<span class="border rounded-top">上角圆(默认半径)</span>
</div>
<div class="col-1">
<span class="border rounded-right">右角圆(默认半径)</span>
</div>
<div class="col-1">
<span class="border rounded-bottom">下角圆(默认半径)</span>
</div>
<div class="col-1">
<span class="border rounded-left">左角圆(默认半径)</span>
</div>
<div class="col-1">
<span class="border rounded-circle">圆(半径50%)</span>
</div>
<div class="col-2">
<span class="border rounded-circle" style="width: 170px;">椭圆(半径50%)</span>
</div>
<div class="col-2">
<span class="border rounded-pill" style="width: 170px;">胶囊(半径为长宽较短者的一半)</span>
</div>
<div class="col-1">
<span class="border rounded-sm">小半径</span>
</div>
<div class="col-1">
<span class="border rounded-lg">大半径</span>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
二、清除浮动
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>清除浮动</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="row">
<div class="col-4">
<div class="bg-info">
<button type="button" class="btn btn-secondary">子元素没有浮动</button>
</div>
</div>
<div class="col-4">
<div class="bg-info">
<button type="button" class="btn btn-secondary float-right">子元素添加浮动</button>
</div>
</div>
<div class="col-4">
<div class="bg-info clearfix">
<button type="button" class="btn btn-secondary float-right">清除父元素的浮动</button>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
三、颜色
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>颜色</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="row">
<div class="col">
<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
</div>
<div class="col">
<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>
</div>
<div class="col">
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
四、Display显示属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Display显示属性</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<table class="table">
<thead>
<th>屏幕规格</th>
<th>引用样式</th>
</thead>
<tbody>
<tr>
<td>所有屏幕下隐藏</td>
<td>.d-none</td>
</tr>
<tr>
<td>只在xs屏幕上隐藏(即仅在手机屏幕上隐藏-其它规格屏幕正常显示)</td>
<td>.d-none .d-sm-block</td>
</tr>
<tr>
<td>只在sm屏幕上隐藏(其它屏幕规格均显示)</td>
<td>.d-sm-none .d-md-block</td>
</tr>
<tr>
<td>只在md屏幕时隐藏(其它屏幕规格均显示)</td>
<td>.d-md-none .d-lg-block</td>
</tr>
<tr>
<td>只在lg屏幕时隐藏(其它屏幕规格均显示)</td>
<td>.d-lg-none .d-xl-block</td>
</tr>
<tr>
<td>只在xl屏幕时隐藏(其它屏幕规格均显示)</td>
<td>.d-xl-none</td>
</tr>
<tr>
<td>全部可见</td>
<td>.d-block</td>
</tr>
<tr>
<td>仅在xs屏幕时可见</td>
<td>.d-block .d-sm-none</td>
</tr>
<tr>
<td>仅在sm屏幕时可见</td>
<td>.d-none .d-sm-block .d-md-none</td>
</tr>
<tr>
<td>仅在md屏幕时可见</td>
<td>.d-none .d-md-block .d-lg-none</td>
</tr>
<tr>
<td>仅在lg屏幕时可见</td>
<td>.d-none .d-lg-block .d-xl-none</td>
</tr>
<tr>
<td>仅在xl屏幕时可见</td>
<td>.d-none .d-xl-block</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-1">
<div class="d-inline bg-primary text-white">d-inline</div><br>
</div>
<div class="col-2">
<span class="d-block bg-dark text-white">d-block</span>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
五、嵌入
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>嵌入</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="row">
<div class="col-6">
<h4>21:9</h4>
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.csdn.net" allowfullscreen></iframe>
</div>
</div>
<div class="col-6">
<h4>16:9</h4>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.csdn.net" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<h4>4:3</h4>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.csdn.net" allowfullscreen></iframe>
</div>
</div>
<div class="col-6">
<h4>1:1</h4>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.csdn.net" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
六、Flex弹性布局
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Flex弹性布局</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
<style>
.col>div{
background-color: #ddd;
}
.col>div>div{
background-color: #aaa;
}
</style>
</head>
<body>
<div class="container" style="max-width: 90%;"><br>
<div class="row">
<div class="col">
<div class="d-flex p-2">.d-flex .p-2</div>
<hr>
<div class="d-inline-flex p-2">.d-inline-flex .p-2</div>
<hr>
<div class="d-flex flex-row">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex flex-row-reverse">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex flex-column">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex flex-column-reverse">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex">
<div class="p-2 mr-auto">.p-左</div>
<div class="p-2">.p-中</div>
<div class="p-2">.p-右</div>
</div>
<hr>
<div class="d-flex">
<div class="p-2">.p-左</div>
<div class="p-2">.p-中</div>
<div class="p-2 ml-auto">.p-右</div>
</div>
<hr>
<div class="d-flex">
<div class="p-2 mr-auto">.p-左</div>
<div class="p-2">.p-中</div>
<div class="p-2 ml-auto">.p-右</div>
</div>
<div class="row" style="background: none;">
<div class="col" style="background: none;">
<hr>
<div class="d-flex align-items-start flex-column" style="height: 150px;">
<div class="mb-auto p-1">上</div>
<div class="p-1">中</div>
<div class="p-1">下</div>
</div>
</div>
<div class="col" style="background: none;">
<hr>
<div class="d-flex align-items-end flex-column" style="height: 150px;">
<div class="p-1">上</div>
<div class="p-1">中</div>
<div class="mt-auto p-1">下</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="d-flex justify-content-start">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex justify-content-end">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex justify-content-center">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex justify-content-between">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex justify-content-around">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex align-items-start">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex align-items-end">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex align-items-center">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex align-items-baseline">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
<hr>
<div class="d-flex align-items-stretch">
<div class="p-1">.p-1</div>
<div class="p-2">.p-2</div>
</div>
</div>
<div class="col">
<div class="d-flex flex-row">
<div class="p-2">p-2</div>
<div class="align-self-start">.align-self-start</div>
<div class="p-2">p-2</div>
</div>
<hr>
<div class="d-flex flex-row">
<div class="p-2">p-2</div>
<div class="align-self-end">.align-self-end</div>
<div class="p-2">p-2</div>
</div>
<hr>
<div class="d-flex flex-row">
<div class="p-2">p-2</div>
<div class="align-self-center">.align-self-center</div>
<div class="p-2">p-2</div>
</div>
<hr>
<div class="d-flex flex-row">
<div class="p-2">p-2</div>
<div class="align-self-baseline">.align-self-baseline</div>
<div class="p-2">p-2</div>
</div>
<hr>
<div class="d-flex flex-row">
<div class="p-2">p-2</div>
<div class="align-self-stretch">.align-self-stretch</div>
<div class="p-2">p-2</div>
</div>
<hr>
<div class="d-flex">
<div class="p-2 flex-fill text-center">1/5</div>|
<div class="p-2 flex-fill text-center">2/5</div>|
<div class="p-2 flex-fill text-center">3/5</div>|
<div class="p-2 flex-fill text-center">4/5</div>|
<div class="p-2 flex-fill text-center">5/5</div>
</div>
<hr>
<div class="d-flex">
<div class="p-2">宽度合适</div>|
<div class="p-2">宽度合适</div>|
<div class="p-2 flex-grow-1">分配剩余宽度</div>
</div>
<hr>
<div class="d-flex">
<div class="p-2 w-100">尽量拓宽</div>|
<div class="p-2">尽量换行</div>
</div>
<hr>
<div class="d-flex flex-nowrap">
<div class="p-2">111-11</div>
<div class="p-2">222-22</div>
<div class="p-2">333-33</div>
<div class="p-2">444-44</div>
<div class="p-2">555-55</div>
<div class="p-2">666-66</div>
</div>
<hr>
<div class="d-flex flex-wrap">
<div class="p-2">111-11</div>
<div class="p-2">222-22</div>
<div class="p-2">333-33</div>
<div class="p-2">444-44</div>
<div class="p-2">555-55</div>
<div class="p-2">666-66</div>
</div>
<hr>
<div class="d-flex flex-wrap-reverse">
<div class="p-2">111-11</div>
<div class="p-2">222-22</div>
<div class="p-2">333-33</div>
<div class="p-2">444-44</div>
<div class="p-2">555-55</div>
<div class="p-2">666-66</div>
</div>
</div>
<div class="col">
<div class="d-flex flex-wrap align-content-start" style="height: 120px;">
<div class="p-1">111-11</div>
<div class="p-1">222-22</div>
<div class="p-1">333-33</div>
<div class="p-1">444-44</div>
<div class="p-1">555-55</div>
<div class="p-1">666-66</div>
<div class="p-1">777-77</div>
</div>
<hr>
<div class="d-flex flex-wrap align-content-center" style="height: 120px;">
<div class="p-1">111-11</div>
<div class="p-1">222-22</div>
<div class="p-1">333-33</div>
<div class="p-1">444-44</div>
<div class="p-1">555-55</div>
<div class="p-1">666-66</div>
<div class="p-1">777-77</div>
</div>
<hr>
<div class="d-flex flex-wrap align-content-end" style="height: 120px;">
<div class="p-1">111-11</div>
<div class="p-1">222-22</div>
<div class="p-1">333-33</div>
<div class="p-1">444-44</div>
<div class="p-1">555-55</div>
<div class="p-1">666-66</div>
<div class="p-1">777-77</div>
</div>
<hr>
<div class="d-flex flex-wrap align-content-between" style="height: 120px;">
<div class="p-1">111-11</div>
<div class="p-1">222-22</div>
<div class="p-1">333-33</div>
<div class="p-1">444-44</div>
<div class="p-1">555-55</div>
<div class="p-1">666-66</div>
<div class="p-1">777-77</div>
</div>
<hr>
<div class="d-flex flex-wrap align-content-around" style="height: 120px;">
<div class="p-1">111-11</div>
<div class="p-1">222-22</div>
<div class="p-1">333-33</div>
<div class="p-1">444-44</div>
<div class="p-1">555-55</div>
<div class="p-1">666-66</div>
<div class="p-1">777-77</div>
</div>
<hr>
<div class="d-flex flex-wrap align-content-stretch" style="height: 120px;">
<div class="p-1">111-11</div>
<div class="p-1">222-22</div>
<div class="p-1">333-33</div>
<div class="p-1">444-44</div>
<div class="p-1">555-55</div>
<div class="p-1">666-66</div>
<div class="p-1">777-77</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
七、Float浮动属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Float浮动属性</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="float-left">在所有 viewport 窗口上浮动在左侧</div><br>
<div class="float-right">在所有viewport 窗口上浮动到右侧</div><br>
<div class="float-none">所有viewport 窗口都不浮动</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
八、溢出
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>溢出</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="row">
<div class="col-2 overflow-auto" style="height: 50px;">对于过长的内容,可以使用.overflow-auto样式来进行滚动显示</div>
<div class="col-2 overflow-hidden" style="height: 50px;">如果使用.overflow-hidden,则意味着不显示多余的内容。</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
九、固顶(底)及定位
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>固顶(底)及定位</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="border position-static">.position-static不支持响应式</div>
<hr>
<div class="border position-relative">.position-relative不支持响应式</div>
<hr>
<div class="border position-absolute">.position-absolute不支持响应式</div>
<hr>
<div class="border position-fixed">.position-fixed不支持响应式</div>
<hr>
<div class="border position-sticky">.position-sticky不支持响应式</div>
<div class="fixed-top">固定在顶部</div>
<div class="fixed-bottom">固定在底部</div>
<div class="sticky-top">贴齐于顶部</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
十、阴影
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>阴影</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="shadow-none p-3 mb-5">无阴影</div>
<div class="shadow-sm p-3 mb-5">小范围阴影</div>
<div class="shadow p-3 mb-5">默认阴影</div>
<div class="shadow-lg p-3 mb-5">大范围阴影</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
十一、规格与尺寸
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>规格与尺寸</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="row">
<div class="col">
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
</div>
<div class="col">
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<img class="mw-100" src="..." alt="Max-width 100%">
</div>
<div class="col">
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
<div class="col">
<h4>相对于窗口</h4>
<div class="min-vw-100" style="background-color: #05f;">Min-width 100vw</div>
<div class="min-vh-100" style="background-color: #05f;">Min-height 100vh</div>
<div class="vw-100" style="background-color: #05f;">Width 100vw</div>
<div class="vh-100" style="background-color: #05f;">Height 100vh</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
十二、spacing间隔规范(Margin与Padding间距处理)
十三、文本处理
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>文本处理</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
</head>
<body>
<div class="container"><br>
<div class="row">
<div class="col-2">
<p class="text-left">文本居左</p>
<p class="text-center">文本居中</p>
<p class="text-right">文本居右</p>
</div>
<div class="col-1">
<div class="badge badge-primary text-wrap" style="width: 2.5rem;">
文本换行
</div>
<div class="badge badge-primary text-nowrap" style="width: 2.5rem;">
文本不换行
</div>
<span class="badge badge-primary d-inline-block text-truncate" style="max-width: 70px;">
文本不换行加省略号
</span>
</div>
<div class="col-2">
<p class="text-break">对于太长的文本,可以使用.text-break样式来进行换行,这种方式可以兼容IE和Edge</p>
</div>
<div class="col-2">
<p class="text-lowercase">ASDHUIAYIA</p>
<p class="text-uppercase">ppercasedtext</p>
<p class="text-capitalize">hd DH dH Dd</p>
</div>
<div class="col-1">
<p class="font-weight-normal">正常</p>
<p class="font-weight-bold">粗</p>
<p class="font-weight-light">细</p>
<p class="font-italic">斜</p>
</div>
<div class="col-1">
<p class="text-monospace">等宽字体</p>
<a href="#" class="text-reset">重置颜色</a><br><br>
<a href="#" class="text-decoration-none">文字装饰</a>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
十四、垂直对齐
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>垂直对齐</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
<style>
.col:nth-of-type(1){
background-color: #ddd;
}
span{
background-color: pink;
}
td{
background-color: cyan;
}
</style>
</head>
<body>
<div class="container"><br>
<div class="row">
<div class="col">
<span class="align-baseline">基准</span>
<span class="align-top">顶部</span>
<span class="align-middle">垂直居中</span>
<span class="align-bottom">底部</span>
<span class="align-text-top">文本顶部</span>
<span class="align-text-bottom">文本底部</span>
</div>
<div class="col">
<table style="height: 100px;">
<tbody>
<tr>
<td class="align-baseline">基准</td>
<td class="align-top">顶部</td>
<td class="align-middle">垂直居中</td>
<td class="align-bottom">底部</td>
<td class="align-text-top">文本顶部</td>
<td class="align-text-bottom">文本底部</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
</body>
</html>
十五、显示或隐藏(能见度)处理