zoukankan      html  css  js  c++  java
  • 28 Bootstrap排版

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <!-- 栅格系统详细介绍:https://v3.bootcss.com/css/#grid   -->
        <meta charset="utf-8">
        <!--    最高浏览器-->
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <!-- 媒体查询 视口设置  -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
        <title>Bootstrap 101 Template</title>

        <!-- Bootstrap -->
        <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">

        <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
        <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
        <!--[if lt IE 9]>
        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
        <![endif]-->

        <style>
            /*.projects .thumbnail {*/
            /*    display: block;*/
            /*    margin-right: auto;*/
            /*    margin-left: auto;*/
            /*    text-align: center;*/
            /*    max- 310px;*/
            /*    margin-bottom: 30px;*/
            /*    border-radius: 0;*/
            /*}*/
        </style>

    </head>
    <body>
    <div class="container">
        <div class="row project">

            <!--  col-md-offset-4  向右偏移4列      -->
            <div class=" col-md-4 col-md-offset-4">
                <div class="thumbnail" style="height: 336px;">
                    <h1>h1. Bootstrap heading</h1>
                    <h2>h2. Bootstrap heading</h2>
                    <h3>h3. Bootstrap heading</h3>
                    <h4>h4. Bootstrap heading</h4>
                    <h5>h5. Bootstrap heading</h5>
                    <h6>h6. Bootstrap heading</h6>
                    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
                </div>
                <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
                <mark>highlight</mark>
                <del>This line of text is meant to be treated as deleted text.</del>

                <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.</p>
                <p class="text-nowrap">No wrap text.</p>

                <dl class="dl-horizontal">
                    <dt>waltre</dt>
                    <dd>lizzy</dd>
                </dl>

            </div>

        </div>
    </div>


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <!--<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>-->
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <!--<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>-->
    </body>
    </html>
  • 相关阅读:
    Windows Azure Cloud Service (14) 使用Windows Azure诊断收集日志记录数据
    Windows Azure Cloud Service (13) 用Visual Studio 2010 将应用程序部署到Windows Azure平台
    Windows Azure Cloud Service (15) 多个VM Instance场景下如何处理ASP.NET Session
    Windows Azure Storage (5) Windows Azure Drive
    Windows Azure Storage (7) 使用工具管理Windows Azure Storage
    SQL Azure(二) SQL Azure vs SQL Server
    webbrowser的自动提交
    提取视频的背景声音的软件
    Listview列排序的bug原因
    两个奇怪的问题
  • 原文地址:https://www.cnblogs.com/wuhui1222/p/14184528.html
Copyright © 2011-2022 走看看