初涉Bootstrap —— 排版基礎

時間 2020-01-30

原文原文鏈接

Bootstrap —— 排版基礎

排版前基礎

使用HTML5文檔類型
移動設備優先

指定內容寬度、高度、是否縮放及其比例css

<meta name="viewport" content="width=device-width, initial-scale=1">
    viewport 語法介紹：
    01 <!--html document-->
    02 <meta name="viewport">
    03 content="                                <!--經常使用語法-->
        height = [pixel_value | device-height],    <!--縮放高度-->
        width = [pixel_value | device-width],    <!--縮放寬度-->
        initial-scale = float_value,            <!--初始縮放比-->
        minimum-scale = float_value,            <!--最小縮放比-->
        maximum-scale = float_value,            <!--最大縮放比-->
        user-scalable = [yes | no],                <!--是否縮放-->
        target-densitydpi = [dpi_value | device-dpi | medium-dpi | low-dpi],
    "

響應式圖片

<div class="container">
        <div class="row">
            <img src="img/glyphicons-halflings.png" class="img-responsive"/>
        </div>
    </div>

其中的.img-responsive就是響應式圖片，其實就是爲圖片設置max-width 100%，height:auto；html
在圖片上加載此樣式，能夠按比例縮放，但不超過父元素尺寸jquery

排版與連接

bootstrap設置了一些全局樣式
body背景爲白，margin：0，字體、大小、行間距都進行了設置
全部默認樣式都在normalize.less和scaffolding.lessbootstrap

Normalize.css
bootstrap合使用第三方庫，Normalize，是一個專門用於將不一樣瀏覽器的默認CSS效果特徵統一的css庫瀏覽器

頁面主題

body全局樣式

能夠在bootstrap.css文件中查找預約義的全局樣式，以便需求及更改。less

p全局樣式

定義的.lead樣式能夠放大選中的文字，這是預約義的樣式字體

對齊方式

強調文本

smallui
strongurl
emspa

cite

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Starter Template for Bootstrap</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <style type="text/css">
        
    </style>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-8">
                    <small>small</small>
                    <em>em</em>
                    <cite>cite url</cite>
                    <b>b</b>
                </div>
            </div>
        </div>
    </body>
</html>

縮略語abbr

<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <abbr title="Bootstrap">abbr</abbr>
            <abbr title="Bootstrap" class="initialism">abbr</abbr>
        </div>
    </div>
</div>

若是加入.initialism，則內部文本變爲大寫，縮略語樣式不變

地址元素address

HTML中新增address標籤，保存實際地理位置名等名詞

<div class="container">
        <div class="row">
            <div class="col-sm-8">
                <address>
                    <strong>Twitter,Inc.</strong><br />
                    795 Folsom Ave, Suite 600<br />
                    San Francisco, CA 94107<br />
                    <addr title="Phone">P：</addr>（123）456-7890
                </address>
            </div>
        </div>
    </div>

引用blockquote

<div class="container">
        <div class="row">
            <div class="col-sm-8">
                <blockquote>
                    <p>引用的內容</p>
                    <cite>來自<em>www.xxx.com</em></cite>
                </blockquote>
                <blockquote class="pull-right">
                    <p>引用的內容</p>
                    <cite>來自<em>www.xxx.com</em></cite>
                </blockquote>
                <blockquote class="pull-left">
                    <p>引用的內容</p>
                    <small><cite>來自<em>www.xxx.com</em></cite></small>
                </blockquote>
            </div>
        </div>
    </div>