首页 > 代码库 > bootstarp排版

bootstarp排版

2024-08-21 23:23:14   221人阅读

<!doctype html>
<html lang="en">
<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>Document</title>
    <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/bootstrap.min.css">
</head>
<body>
<!-- 标题 -->
    <h1>你好，世界！</h1>
<!-- <small> 标签或赋予 .small 类的元素，可以用来标记副标题 -->
    <h2>你好，<small>世界！</small></h2>
    <h3>你好，世界！</h3>
    <h4>你好，世界！</h4>
    <h5>你好，世界！</h5>
    <h6>你好，世界！</h6>
<!-- 中心内容 -->
    <blockquote class="blockquote-reverse">
    <p class="lead">
        Vivamus sagittis acus vel augue laoreet rutrum faucibus dolor auctor.<footer><mark> Duis mollissamll <cite title="Source Title">est non commodo luctus.</cite></mark></footer>
    </p>
</blockquote>

 <!-- 内联文本元素<mark> -->
 <!-- 被删除的文本<del> -->
 <!-- 无用文本<s> -->
 <!-- 额外插入的文本<ins> -->
 <!-- 带下划线的文本<u> -->
 <!-- 着重<strong> -->
 <!-- 斜体<em> -->
 <!-- 小号文本<small> -->
    <P>
        Nullam quis <strong>risus eget urna mollis ornare vel eu leo. Cum sociis natoque </strong>penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
        <em>Cum sociis natoque penatibus et magnis dis parturient montes</em>, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
        Vivamus<ins>This line of text is meant to be treated as no longer accurate.</ins> sagitti<mark> lacus<u> vel </u>augue</mark> laoreet rutrum <del>faucibus dolor </del>auctor. Duis mollis, est non commodo luctus.<s>This line of text is meant to be treated as no longer accurate.</s>
        Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo <small>lluctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</small>

<!-- 对齐 -->
    <p class="text-left">lefttext</p>
    <p class="text-center">centertext</p>
    <p class="text-right">righttext</p>
    <p class="text-justify">justifytext</p>
    <p class="text-nowrap">nowarptext</p>

<!-- 改变大小写 -->
    <p class="text-lowercase">Lowercased text小写</p>
    <p class="text-uppercase">Uppercased text大写</p>
    <p class="text-capitalize">Capitalized text首字母大写</p>

<!-- 基本缩略语 .attribute-->
    <abbr title="attribute">attr</abbr>
<br>
<!-- 首字母缩略语 .initialism -->
    <p>
        <abbr title="HyperText Markup Language" class="initialism">
        attrlluctus
        </abbr>
        nisi erat porttitor ligula, eget lacinia odio sem nec elit
     </p>

<!-- 地址 -->
    <address>
        <p class="text-center">
            <strong>Twitter, Inc.</strong><br>
            795 Folsom Ave, Suite 600<br>
            San Francisco, CA 94107<br>
            <abbr title="HyperText Markup Language">P</abbr>
            : (123) 456-7890<br>
            <br>
            <strong>Full Name</strong><br>
            <a href="mailto:#">first.last@example.com</a>  
        </p>
    </address>

<!-- 有序和无序列表 -->
    <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</li>
<!-- 内联列表样式display: inline-block改成.list-inline -->
        <ul class="list-inline">
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
        </ul>
    </ul>
    <ul>
        <li>Faucibus porta lacus fringilla vel</li>
        <li>Aenean sit amet erat nunc</li>
        <li>Eget porttitor lorem</li>
    </ul>
    <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>
<!-- 水平排列的描述.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行-->
    <dl class="dl-horizontal">
        <dt>Faucibus vel</dt>
            <dd>Eget porttitor lorem</dd>
        <dt>Aenean sit amet erat nunc</dt>
            <dd>Eget porttitor lorem</dd>
    </dl>

<br>
<br>
<br>
<br>
<br>
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://www.mamicode.com/js/bootstrap.min.js"></script>
</body>
</html>

 

bootstarp排版


联系
我们