bootsrap中,利用分装好的类名称可以快速的设置一些样式和属性,大大提升的效率,先了解一下如何实现基本的操作吧
- 首先,引入bootstrap文件(在使用bootstrap时,是将封装好的class给标签元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/bootstrap.css">
<title>Document</title>
</head>
- h1-h6标题
<div class="h6">123456</div>
<div class="h1">123456</div>
- small 缩小 lead 强调 mark 背景色
<!-- small调小 lead 强调 -->
<!-- mark 背景色 -->
<div class="lead">bootstrap</div>
<div class="mark">1234</div>
- 文字对齐格式
<div style="width:100px" class="text-center">1234</div>
<div style="width:100px" class="text-left">1234</div>
<div style="width:100px" class="text-right">1234</div>
- 文本转大小写
<span class="text-uppercase">apple</span>
<span class="text-lowercase">APPLE</span>
- 列表相关
<!-- list-unstyled 去点 -->
<!-- list-inline 去点且 转化为水平块级 -->
<ul class="list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
- 水平排列
<dl class="dl-horizontal">
<dl>
<dt>vue</dt>
<dd>js</dd>
</dl>
<dt>vue</dt>
<dd>js</dd>
</dl>
- 浮动类
<!-- pull-left pull-right -->
<!-- clearfix清除浮动 -->
<div class="clearfix">
<div class="pull-left" style="width: 100px;height: 100px;background-color: pink">vue</div>
<div class="pull-right" style="width: 100px;height: 100px;background-color: yellow">js</div>
</div>
<div style="width: 800px;height: 20px; background-color: green"></div>
- 图片的响应式
<img src="./bootstrap/img/1.png" alt="" class="center-block img-responsive img-circle
img-thumbnail img-rounded">
- 其它(与html类似)
<del>1234567</del>
<s>1234567</s>
<ins>1234567</ins>
<em>1234567</em>
<!-- 缩略语 -->
<abbr title="telephone">tel</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>
还有一些其它类,其实是和html标签类似的,主要就是上面的这些内容,欢迎留言讨论。