BootStrap框架---1.页面排版
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BootStrap框架---1.页面排版相关的知识,希望对你有一定的参考价值。
•前言:
• Bootstrap 是基于 html、CSS、javascript 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。
今天我们来看Bootstrap的页面排版!!!!
首先:其默认设置了一些样式
全局font-size为14px,line-height为20px,p段落设置10px,颜色#333;
1.页面主体
.lead
1 //.lead 突出效果 2 <p>Bootstrap框架</p> 3 <p class=‘lead‘>Bootstrap框架</p> 4 <p>Bootstrap框架</p> 5 <p>Bootstrap框架</p>
解答:加了lead这个类名后,内容会突出显示
2.标题
h1-h6(或者.h1-.h6);
.small
//h1-h6都重构了 //并且还支持内联定义class=(.h1-h6); //.small 变小 <h1>Bootstrap<small>框架</small></h1> <h2>Bootstrap框架</h2> <h3>Bootstrap框架</h3> <h4>Bootstrap框架</h4> <h5>Bootstrap框架</h5> <h6>Bootstrap框架</h6>
3.文本操作
.text-left 居左
.text-right
.text-center
.text-justify 两段对齐
.text-nowrap 不换行
.text-lowercase 小写
.text-uppercase 大写
.text-capitalize 首字母大写
.initialism 缩略语
1 <p class=‘text-left‘>Bootstrap框架</p> 2 <p class=‘text-center‘>Bootstrap框架</p> 3 <p class=‘text-right‘>Bootstrap框架</p> 4 <p class=‘text-nowrap‘ style=‘width:50px;border:1px solid red‘>Bootstrap框架</p> 5 <p class=‘initialism‘>Bootstrap框架</p>
4.列表排版
ul
.list-unstyled 移除默认样式
.list-inline 设置成内联
dl
.dl-horizontal 水平排列描述列表
5.其他标签
<code></code> 代码格式
<kbd></kbd> 用户按键效果
<pre></pre> 代码块
<blockquote></blockquote> 引用; 反向需加类名.blockquote-reverse
总结:上面的例子不全,需要你们自己去实践,这些不需要全部记住,只要知道有这回事,以后想到了可以回来查阅。
以上是关于BootStrap框架---1.页面排版的主要内容,如果未能解决你的问题,请参考以下文章
吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:可滚动
吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:使段落突出显示