bootstrap排版基础

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>bootstrap排版基础</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>//引入css样式
</head>
<body>
<div class="container">//容器
<div class="row">//行
<div class="col-sm-4">
    <img src="img/本人.jpg" class="img-responsive"/>//引入图片   引入定义css类,具体的类可以打开css-->.css文件-->ctrl+f-->搜索img-    然后根据需求设置
</div>
<div class="col-sm-8">//在小屏幕上占8格
<h1>第一<small>小字体标签</small></h1>//<small></small>是html5新增的小字体标签,会受<h>标签的影响
<h2>第二<small>小字体标签</small></h2>
<h3>第三<small>小字体标签</small></h3>
<span class="h1">第一<small>小字体标签</small></span>//<span></span>标签可以引用css中定义好的有关<h>的类
<span class="h2">第二<small>小字体标签</small></span>
<span class="h3">第三<small>小字体标签</small></span>
<p class="h1">第一<small>小字体标签</small></p>//<p></P>标签可以引用css中定义好的有关<h>的类
<p class="h2">第二<small>小字体标签</small></p>
<p class="h3">第三<small>小字体标签</small></p>
<p class="lead text-center">Bootstrap是Twitter推出的一个用于前端开发的开源工具包。<small>small</small>//lead类表示强调,能增大字体;text-center表示字体的对其齐式,还有其它对齐方式。
<em>强调em</em>
<cite>应用网址</cite>
<b>加粗b</b>
<hr />
<abbr title="你还真是小狗啊?">动我你是小狗!</abbr><br />  //<abbt></abbr>在 HTML 4.0 中引入的,表示它所包含的文本是一个更长的单词或短语的缩写形式。其中title的值是鼠标放在<abbr>上才显示的
<abbr title="你是^(* ̄(oo) ̄)^啊?"class="initialism">你敢动我?</abbr><br/>  //initialism将字体缩小了
<blockquote class="pull-left">       //<blockquote></blockquote>表示引用标签,其class定义的的是引用内容的对齐方式
<p>其实世界上本没有路,只是走的人多了,便成了路</p>
<cite>来自<em>鲁迅的《故乡》</em></cite>
</blockquote>
</p>
</div>
</div>
</div>
</body>
</html>

 

总结:此章就是对一些标签和类的熟悉,具体的类可以查看.css类了解

posted @ 2016-11-28 20:43  jinhong  阅读(122)  评论(0编辑  收藏  举报