BootStrap学习笔记-1-CSDN博客

本文链接：https://blog.csdn.net/devileatapple/article/details/49511965

最近开始学习前端开发。

这是我的BootStrap笔记，html源码+注释。

oneLesson - bootstrap 排版

<!DOCTYPE html>

<html lang="zh-CN">
<head>
<title>BootStrap-排版</title>
<meta charset = "utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">  
</head>
<body>
<!--container容器。用来承载页面中的标签-->
<div class="container">
<h1>大学糖</h1>
<h2>大学糖</h2>
<h3>大学糖</h3>
<!-- small 副标签 -->
<h4>大学糖<small> 欢迎您到来</small></h4>
<hr>
<p>hello world</p>
<!--lead标签，大标题 mark标签 添加一个背景色 -->
<p class="lead">hello world<mark>欢迎来到大学糖</mark></p>
<!-- 通过text-left等设置对齐模式 -->
<p class="text-left">hello world</p>
<p class="text-right">hello world</p>
<p class="text-center">hello world</p>
<!-- text-lowercase设置小写
text-uppercase设置全部大写
text-capitalize 设置首字母大写-->
<p class="text-lowercase">hello world</p>
<p class="text-uppercase">hello world</p>
<p class="text-capitalize">hello world</p>
<!-- del 中划线 表示删除-->
<del>哈利路亚</del>
<hr>
<!-- address 地址标签 -->
<address>
<strong>大学糖</strong><br>
上海市徐汇区<br>
桂平路xxx号,xx幢:401<br>
<abbr title="Phone">P:40000000</abbr>
</address>
<hr>
<!--class="list-unstyled" 无风格的表 -->
<ul class="list-unstyled">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>