BootStrap学习

来源：互联网发布：韩国淘宝模特红人编辑：程序博客网时间：2024/05/17 02:16

>>------------

Bootstrap页面排版默认值

Bootstrap将全局font-size设置为14px, line-height行高设置为1.1428（即：20px） <p>段落设置为1/2行高（即：10px），颜色被设置为#333

H1~H6标签

Bootstrap分别对原始的H1~-H6标签进行了CSS样式重构，并且还支持普通内联元素定义 class=(.h1~h6)来实现相同的功能

<span class="h1">中国人民解放军</span><!--上面这段等同于下面这段代码--><h1>中国人民解放军</h1>

Bootstrap默认的H1-H6标签的样式

<h1>中国人民解放军(字体默认36px 行高39.6px)</h1><h2>中国人民解放军(字体默认30px 行高33px)</h2><h3>中国人民解放军(字体默认24px 行高26.4px)</h3><h4>中国人民解放军(字体默认18px 行高19.8px)</h4><h5>中国人民解放军(字体默认14px 行高15.4px)</h5><h6>中国人民解放军(字体默认12px 行高13.2px)</h6>

H1-H6下面的<small>标签

<h1>中国人民<small>解放军(默认字体是父元素的65%)</small></h1><h2>中国人民<small>解放军(默认字体是父元素的65%)</small></h2><h3>中国人民<small>解放军(默认字体是父元素的65%)</small></h3><h4>中国人民<small>解放军(默认字体是父元素的75%)</small></h4><h5>中国人民<small>解放军(默认字体是父元素的75%)</small></h5><h6>中国人民<small>解放军(默认字体是父元素的75%)</small></h6>

非H1-H6下的<small>标签

<div style="font-size:36px">中国人民<small>解放军(字体默认大小为父元素的85%)</small></div>

内联文本元素

<!--添加标记: <mark>元素,或.mark 类--><p>Bootstrap<mark>标记</mark></p><!--各种加线条的文本--><del>删除的文本</del> <s>无用的文本</s><ins>插入的文本</ins> <u>效果同上，下划线文本</u>

Bootstrap对齐

<!--设置文本对齐--><p class="text-left">Bootstrap 居左对齐</p> <p class="text-center">Bootstrap 居中对齐</p> <p class="text-right">Bootstrap 居右对齐</p> <p class="text-justify">Bootstrap 两端对齐，支持度不佳</p> <p class="text-nowrap">Bootstrap 不换行</p>

Bootstrap大小写

<!--设置英文文本大小写--><p class="text-lowercase">Bootstrap 小写</p> <!--小写--><p class="text-uppercase">Bootstrap 大写</p> <!--大写--><p class="text-capitalize">bootstrap 首字母大写</p><!--首字母大写-->

Bootstrap地址

<!--设置地址，去掉了倾斜，设置了行高，底部20px--><address>    <strong>百度股份责任有限公司.</strong><br>    王府井大街号600号<br>    北京市<br>    <abbr title="Phone">P:</abbr> (123) 456-7890</address>

Bootstrap引用文本

<!--默认样式引用，增加了做边线，设定了字体大小和内外边距-->   <blockquote>    Bootstrap 框架</blockquote>

Bootstrap<ul>标签

bootstrap对原生<ul>标签进行了重构，去除了默认样式，比如去掉了<li>前面的小圆点

<ul class="list-unstyled"><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li><li>Bootstrap 框架</li></ul>

将<ul>标签设为内联元素（<li>横向排列）

<ul class="list-inline">    <li>Bootstrap 框架</li>    <li>Bootstrap 框架</li>    <li>Bootstrap 框架</li>    <li>Bootstrap 框架</li>    <li>Bootstrap 框架</li></ul>

0 0