排版
<!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">
<h1>标题</h1><hr>
<p>前两种方式等价，第三种可以让标题更大、更鲜明</p>
<div class="row">
<div class="col">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
</div>
<div class="col">
<p class="h1">h1</p>
<p class="h2">h2</p>
<p class="h3">h3</p>
<p class="h4">h4</p>
<p class="h5">h5</p>
<p class="h6">h6</p>
</div>
<div class="col">
<h1 class="display-1">display-1</h1>
<h1 class="display-2">display-2</h1>
<h1 class="display-3">display-3</h1>
<h1 class="display-4">display-4</h1>
</div>
</div>
<h1>Leader中心内容</h1><hr>
<p class="lead">通过应用 .lead样式，可以定义一个中心段落，用于提示这是中心内容或重要内容。</p>
<h1>列表并排</h1><hr>
<p>使用.list-inline 、 .list-inline-item结合，可以实现列表逐行显示（默认不引用且无父元素影响也是逐行显示）、或单行并多列并排（遵循从左对右的原则、并清除margin方法）。</p>
<ul class="list-inline">
<li class="list-inline">三楼（list-inline）</li>
<li class="list-inline">二楼（list-inline）</li>
<li class="list-inline">一楼（list-inline）</li>
</ul>
<ul class="list-inline">
<li class="list-inline-item">一单元（list-inline-item）</li>
<li class="list-inline-item">二单元（list-inline-item）</li>
<li class="list-inline-item">三单元（list-inline-item）</li>
</ul>
<h1>dl表格式水平描述</h1><hr>
<p>使用BootStrap栅格系统的预定义类（或者说语义化mixins），可以水平对齐条目和描述。对于较长的条目，你可以视情况添加一个.text-truncate类，从而用省略号截断文本。</p>
<dl class="row">
<dt class="col-sm-3">描述列表</dt>
<dd class="col-sm-9">一个关于描述列表的两端对齐</dd>
<dt class="col-sm-3">Euismod</dt>
<dd class="col-sm-9">
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p>Donec id elit non mi porta gravida at eget metus.</p>
</dd>
<dt class="col-sm-3">Malesuada porta</dt>
<dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
<dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
<dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
<dt class="col-sm-3">Nesting</dt>
<dd class="col-sm-9">
<dl class="row">
<dt class="col-sm-4">Nested definition list</dt>
<dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
</dl>
</dd>
</dl>
</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>
<p>给图片添加.img-fluid样式，或定义max-width: 100%、height:auto;样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放。</p>
<p>使用.img-thumbnail属性来使图片自动被加上一个带圆角且1px边界的外框缩略图样式</p>
<img src="Desert.jpg" class="img-fluid img-thumbnail" alt="图片加载失败">
<hr>
<div>
<p>使用rounded将图片变成圆角，使用float-left和float-right分别设置图片左右浮动</p>
<img src="Jellyfish.jpg" class="rounded float-left" style="width: auto;height: auto;max-width: 10%;max-height: 10%;" alt="图片加载失败">
<img src="Koala.jpg" class="rounded float-right" style="width: auto;height: auto;max-width: 10%;max-height: 10%;" alt="图片加载失败">
</div>
<p>pictrue元素可实现图片在不同屏幕下的针对性响应式</p>
<picture>
<source srcset="Jellyfish.jpg" media="(min-width: 900px)">
<source srcset="Koala.jpg" media="(min-width: 700px)">
<source srcset="Lighthouse.jpg">
<img src="Penguins.jpg" alt="这是当浏览器不支持picture标签时显示的图片">
</picture>
<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>表格
<table class="table">
<table class="table table-dark">
<table class="table">
<thead class="thead-dark">
<table class="table">
<thead class="thead-light">
<table class="table table-striped">
<table class="table table-striped table-dark">
<table class="table table-bordered">
<table class="table table-bordered table-dark">
<table class="table table-borderless">
<table class="table table-borderless table-dark">
<table class="table table-hover">行悬停
暗效果略；
<table class="table table-sm">行紧凑
暗效果略；
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
扫一扫
849
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
