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  

---

总结：上面的例子不全，需要你们自己去实践，这些不需要全部记住，只要知道有这回事，以后想到了可以回来查阅。　

转载于:https://www.cnblogs.com/GacentJohn/p/5294119.html