bootstrap项目文件结构示例:
具体html代码如下:
<!DOCTYPE html>
<!-- bootstrap基础 -->
<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">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="jquery.js"></script>
<script src="jquery.js"></script>
</head>
<!-- bootstrap中改变行和字体的方式 -->
<body style="line-height:40px;font-size: 30PX;">
<div class="container">
<div class="row">
<!-- 同一行,最好设置12个列,如果大于12列,则会自动换行 -->
<div class="col-lg-5">
<!-- bootstrap提供的新的副标题标签 -->
<h1>bootstrap<small>first</small></h1>
</div>
<!-- 不同class的不同属性,可以更改页面在不同的设备上的显示方式 -->
<!-- 超小屏幕 小屏幕 中等屏幕 大屏幕 -->
<!-- 超小屏幕例如手机,总是水平排列的 -->
<!-- 其他:开始是堆叠在一起的,当大于这些阈值时将变为水平排列C -->
<!-- 类前缀 .col-xs- .col-sm- .col-md- .col-lg- -->
<div class="col-lg-7" claas="col-md-12">
<div class="col-lg-10">
<!-- lead可使文本更加醒目 -->
<!-- text-center属性可使文本居中1 -->
<p class="lead text-right">重点之在</p>
</div>
<!-- 斜体文字 -->
<!-- 字体变小 -->
<div class="col-lg-5"><p><em>斜体</em>文字<small>变小</small></p> </div>
</div>
</div>
<div class="row">
<!-- bootstrap提供有序列表ol和无须列表ul -->
<div class="col-lg-6">
<!-- 使列表菜单无样式 -->
<ul class="list-unstyled">
<li>吃饭</li>
<li>喝茶
<ol>
<li>龙井</li>
<li>毛尖</li>
<li>铁观音</li>
</ol>
</li>
<li>休息</li>
</ul>
</div>
<div class="col-lg-6">
<!-- 设为水平显示 -->
<dl class="dl-horizontal">
<dt>teacher chen:
</dt>
<dd>
<!-- 添加代码特效显示 -->
<kbd>ctrl+d
</kbd>快速复制
</dd>
</dl>
<dl>
<dt>teacher zhang</dt>
<dl>26995565</dl>
</dl>
</div>
<div class="col-lg-12 ">
<!-- bootstrap对表格的样式支持 -->
<table class="table table-hover table-bordered ">
<tr>
<td>姓名</td>
<td>电话号码</td>
</tr>
<tr>
<td>陈</td>
<td>15566565651</td>
</tr>
<tr>
<td>张</td>
<td>5595845898</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>