html5—Bootstrap

（注：本笔记是本人在菜鸟教程网站https://www.runoob.com/bootstrap学习时所做的记录）

一、Bootstrap介绍

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

二、Bootstrap包的内容

• 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
• CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
• 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
• JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。
• 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

三、Bootstrap css 概要

1.html5文件类型

Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作，您需要使用 HTML5 文档类型（Doctype）。 因此，请在使用 Bootstrap 项目的开头包含下面的代码段。

            <!
            DOCTYPE html
            >
            <
            html
            >
            
....

            </
            html
            >
        

如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型（Doctype），您可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以致于您的代码不能通过 W3C 标准的验证。

 2.移动设备优先

Bootstrap 3 默认的 CSS 本身就对移动设备友好支持。Bootstrap 3 的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

            <
            meta 
            name
            ="viewport"
             content
            ="width=device-width, initial-scale=1.0"
            >
        

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

3.响应式图像

            <
            img 
            src
            ="..."
             class
            ="img-responsive"
             alt
            ="响应式图像"
            >
        

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好。

img_responsive class所包含的属性：

            .img-responsive {
  display: block; //以块级元素显现
  height: auto;　　//元素的高度取决于浏览器
  max-width: 100%;//会重写任何通过 width 属性指定的宽度
}
        

原文：https://www.cnblogs.com/181118ljh123/p/11722015.html