【04】Bootstrap排版

来源：互联网发布：西班牙海鲜饭知乎编辑：程序博客网时间：2024/06/10 22:14

标题

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>        <style>            .c {                border: 1px solid blue;            }        </style>    </head>    <body style="padding: 20px;">        <h1>h1. Bootstrap 标题<small>Secondary text</small></h1>        <h2>h2. Bootstrap 标题<small>Secondary text</small></h2>        <h3>h3. Bootstrap 标题<small>Secondary text</small></h3>        <h4>h4. Bootstrap 标题<small>Secondary text</small></h4>        <h5>h5. Bootstrap 标题<small>Secondary text</small></h5>        <h6>h6. Bootstrap 标题<small>Secondary text</small></h6>    </body></html>

页面主体

Bootstrap将全局font-size设置为14px，line-height设置为1.428。这些属性直接赋予<body>元素和所有段落元素。另外，<p>（段落）元素还被设置了等于1/2行高（即10px）的底部外边距（margin）。

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>        <style>            .c {                border: 1px solid blue;            }        </style>    </head>    <body style="padding: 20px;">        <p class="lead">抽象类：规定一个或多个抽象方法的类别本身必须定义为abstract，抽象类只是用来派生子类，而不能用它来创建对象。</p>        <p>final类：又称“最终类”，它只能用来创建对象，而不能被继承，与抽象类刚好相反，而且抽象类与最终类不能同时修饰同一个类。</p>        <p>接口：Java中的接口是一系列方法的声明，是一些方法特征的集合，一个接口只有方法的特征没有方法的实现，因此这些方法可以在不同的地方被不同的类实现，而这些实现可以具有不同的行为。</p>    </body></html>

内联文本元素

内联文本元素有Marked Test、被删除的文本、无用文本、插入文本、带下划线的文本、小号文本、着重、斜体、对齐

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>        <style>            .c {                border: 1px solid blue;            }        </style>    </head>    <body style="padding: 20px;">        我是<mark>中国人</mark>，我为此骄傲。<br/>        原价：<del>999元</del> 现价：199元.<br/>        <s>这个是无用文本。</s><br/>        <ins>这个是插入文本</ins><br/>        <u>这个是带下划线的文本</u><br/>        <small>这个是小号文本</small><br/>        这个是<strong>着重文本</strong><br/>        <em>这个是斜体</em><br/>的接口是一系列方法的声明，是一些方法特征的集合，一个接口只有方法的特征没有方法的实现，因此这些方法可以在不同的地方被不同的类实现，而这些实现可以具有不同的行为。</p>    </body></html>

效果如下图所示：
内联文本元素

对齐

Bootstrap通过文本对齐类，可以简单方便的将文字重新对齐。

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>        <style>            .c {                border: 1px solid blue;            }        </style>    </head>    <body style="padding: 20px;">        <p class="text-left">Left aligned text.</p>        <p class="text-center">Center aligned text.</p>        <p class="text-right">Right aligned text.</p>        <p class="text-justify">自动换行：Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.Justified text.</p>        <p class="text-nowrap">不换行：No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.No wrap text.</p>    </body></html>

改变大小写

通过这几个类可以改变文本的大小写。

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>        <style>            .c {                border: 1px solid blue;            }        </style>    </head>    <body style="padding: 20px;">        <p class="text-lowercase">Lowercased text.</p>        <p class="text-uppercase">Uppercased text.</p>        <p class="text-capitalize">Capitalized text.</p>    </body></html>

更改大小写

缩略语

缩略语：当鼠标停在缩写和缩写词上就会显示完成内容。Bootstrap 实现了对 HTML 的元素的增强样式。缩略语元素带有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>        <style>            .c {                border: 1px solid blue;            }        </style>    </head>    <body style="padding: 20px;">        我是<abbr title="中国人">人</abbr>。<br/>        <abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.    </body></html>

缩略语

地址

让联系信息以最接近日常使用的格式呈现。在每行结尾添加 <br> 可以保留需要的样式。

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>        <style>            .c {                border: 1px solid blue;            }        </style>    </head>    <body style="padding: 20px;">        <address>            <strong>Twitter, Inc.</strong><br>            795 Folsom Ave, Suite 600<br>            San Francisco, CA 94107<br>            <abbr title="Phone">P:</abbr> (123) 456-7890        </address>        <address>            <strong>Full Name</strong><br>            <a href="mailto:#">first.last@example.com</a>        </address>    </body></html>

这里写图片描述

引用

将HTML元素包裹在<blockquote>中即可表现为引用样式。对于直接引用，我们建议用
标签。

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>        <style>            .c {                border: 1px solid blue;            }        </style>    </head>    <body style="padding: 20px;">        <blockquote>            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>        </blockquote>        <blockquote>            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>            <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>        </blockquote>        <blockquote class="blockquote-reverse">            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>            <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>        </blockquote>    </body></html>

列表

<!DOCTYPE html><html lang="zh-CN">    <head>        <meta charset="utf-8" />        <meta http-equiv="X-UA-Compatible" content="IE=edge">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title>Bootstrap</title>        <link rel="stylesheet" href="css/bootstrap.css" />        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>        <script type="text/javascript" src="js/bootstrap.js"></script>        <style>            .c {                border: 1px solid blue;            }        </style>    </head>    <body style="padding: 20px;">        <p>无序列表</p>        <ul>            <li>Lorem ipsum dolor sit amet</li>            <li>Consectetur adipiscing elit</li>            <li>Integer molestie lorem at massa</li>            <li>Facilisis in pretium nisl aliquet</li>            <li>Nulla volutpat aliquam velit                <ul>                    <li>Phasellus iaculis neque</li>                    <li>Purus sodales ultricies</li>                    <li>Vestibulum laoreet porttitor sem</li>                    <li>Ac tristique libero volutpat at</li>                </ul>            </li>            <li>Faucibus porta lacus fringilla vel</li>            <li>Aenean sit amet erat nunc</li>            <li>Eget porttitor lorem</li>        </ul>        <hr/>        <p>有序列表</p>        <ol>            <li>Lorem ipsum dolor sit amet</li>            <li>Consectetur adipiscing elit</li>            <li>Integer molestie lorem at massa</li>            <li>Facilisis in pretium nisl aliquet</li>            <li>Nulla volutpat aliquam velit</li>            <li>Faucibus porta lacus fringilla vel</li>            <li>Aenean sit amet erat nunc</li>            <li>Eget porttitor lorem</li>        </ol>        <hr/>        <p>无样式列表</p>        <ul class="list-unstyled">            <li>Lorem ipsum dolor sit amet</li>            <li>Consectetur adipiscing elit</li>            <li>Integer molestie lorem at massa</li>            <li>Facilisis in pretium nisl aliquet</li>            <li>Nulla volutpat aliquam velit                <ul>                    <li>Phasellus iaculis neque</li>                    <li>Purus sodales ultricies</li>                    <li>Vestibulum laoreet porttitor sem</li>                    <li>Ac tristique libero volutpat at</li>                </ul>            </li>            <li>Faucibus porta lacus fringilla vel</li>            <li>Aenean sit amet erat nunc</li>            <li>Eget porttitor lorem</li>        </ul>        <hr/>        <p>内联列表</p>        <ul class="list-inline">            <li>Lorem ipsum</li>            <li>Phasellus iaculis</li>            <li>Nulla volutpat</li>        </ul>        <hr/>        <p>描述</p>        <dl>            <dt>Description lists</dt>            <dd>A description list is perfect for defining terms.</dd>            <dt>Euismod</dt>            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>            <dd>Donec id elit non mi porta gravida at eget metus.</dd>            <dt>Malesuada porta</dt>            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>        </dl>        <hr/>        <p>水平排列的描述</p>        <dl class="dl-horizontal">            <dt>Description lists</dt>            <dd>A description list is perfect for defining terms.</dd>            <dt>Euismod</dt>            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>            <dd>Donec id elit non mi porta gravida at eget metus.</dd>            <dt>Malesuada porta</dt>            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>            <dt>Felis euismod semper eget lacinia</dt>            <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>        </dl>        </div>    </body></html>

阅读全文

0 0