初涉Bootstrap —— 排版基础

Bootstrap —— 排版基础

图片描述

排版前基础

使用HTML5文档类型
移动设备优先

指定内容宽度、高度、是否缩放及其比例

<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；
在图片上加载此样式，可以按比例缩放，但不超过父元素尺寸

排版与链接

bootstrap设置了一些全局样式
body背景为白，margin：0，字体、大小、行间距都进行了设置
所有默认样式都在normalize.less和scaffolding.less

Normalize.css
bootstrap合使用第三方库，Normalize，是一个专门用于将不同浏览器的默认CSS效果特征统一的css库

页面主题

body全局样式

可以在bootstrap.css文件中查找预定义的全局样式，以便需求及更改。

图片描述

p全局样式

定义的.lead样式可以放大选中的文字，这是预定义的样式

对齐方式

图片描述

强调文本

small
strong
em

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>

图片描述

可以看到相应的区别，比如pull-left与pull-right

初涉Bootstrap —— 排版基础

Bootstrap —— 排版基础

排版前基础

使用HTML5文档类型

移动设备优先

响应式图片

排版与链接

页面主题

body全局样式

p全局样式

对齐方式

强调文本

缩略语abbr

地址元素address

引用blockquote

Queen

引用和评论

《JavaScript程序设计》—— 标准对象 Object

如何为在线客服系统的 Web Api 后台主程序添加 Bootstrap 启动页面

高效团队协作软件：如何优化团队的工作流程和资源管理？