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框架怎么使用

吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:使段落突出显示

吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:标题

吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:强调