响应式图片：
//当图片大的时候，逐渐缩小浏览器大小，图片会显示为自适应大小 ，img-responsive
<div class="container">
<div class="row">
<img src="../static/1.jpg" class="img-responsive" alt="">
</div>
</div>
标题标签h
<h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6>或
<span class="h1">aaaaaa</span><span class="h2">aaaaaa</span><span class="h3">aaaaaa</span><span class="h4">aaaaaa</span>
副标题：small
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>small标签会适应前边h标签的大小 自动显示为小一号字体
页面主体：
Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff
}
p { margin: 0 0 10px}
中心内容：lead，强调p标签中的文本
.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 300;
line-height: 1.4
}
@media (min-width: 768px) {
.lead {
font-size: 21px
}
}
对其方式：text-right /text-conter/ ...
缩略语：abbr
<abbr title="跟我学习Bootstrap">学习bootstrap</abbr>
地址：
<address> <strong>Twitter, Inc.</strong><br> 1355 Market Street, Suite 900<br> San Francisco, CA 94103<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">[email protected]</a> </address>
列表：
//无样式列表
<ul class="list-unstyled">
<li></li>
</ul>
//无序
<ul>
<li></li>
</ul>
<ol>
<li></li>
</ol>
//内联列表 一行
<ul class="list-inline">
<li></li>
</ul>
//有无class 区别：dt、dd标签内容是否显示在同一行
<dl class="dl-horizontal">
<dt>标题</dt>
<dd>标题描述</dd>
</dl>
官方：https://v3.bootcss.com/css/#type
原文地址：https://www.cnblogs.com/nxzblogs/p/10701143.html
时间： 2024-10-12 21:15:54