Bootstrap

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

 本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。

Bootstrap 简介

什么是 Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

引入Bootstrap

<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
      <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>       <![endif]-->
   </head>
   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="https://code.jquery.com/jquery.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="js/bootstrap.min.js"></script>
   </body>
</html>

在这里，您可以看到包含了 jquery.js、bootstrap.min.js 和 bootstrap.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Bootstrap 的模板。

有关上面代码段中每个元素的细节将在 Bootstrap CSS 概览 章节详细讲解。

Bootstrap 包的内容

  • 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。

  • CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

  • 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。

  • JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。

  • 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

  • Bootstrap CSS 概览（流的css框架）

  • 什么是响应呢？

  • 1. 移动设备优先

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

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

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

    在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。

    通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

    注意，这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！

  • 响应式图像

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

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

    接下来让我们看下这个 class 包含了哪些 css 属性。

    在下面的代码中，可以看到img-responsive class 为图像赋予了 max- 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

    .img-responsive {
  display: inline-block;
  height: auto;
  max- 100%;
}

    这表明相关的图像呈现为 inline-block。当您把元素的 display 属性设置为 inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。

    设置 height:auto，相关元素的高度取决于浏览器。

    设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。

2. 响应式 Web 设计 - 媒体查询

1.（手机设备的宽度为<768px   ipad设备宽度为768-1024px   电脑屏幕宽度>1024px）

2.在设备上，默认col-1就是8.33%； 把device均分为12份。

例子一：在电脑上，pad上，手机上某些元素隐藏和显示

   

 <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style>
        * {
            box-sizing: border-box;
        }
        body,html{
             100%;
            height: 100%;
        }
        .desckbook,.pad,.phone{
            float: left;
            height: 100%;
            display: none;
        }
        .desckbook{
            background-color: red;
        }
        .pad{
            background-color: #00c0a5;
        }
        .phone{
            background-color: #6a6666;
        }
 .col-1 { 8.33%;}
        .col-2 { 16.66%;}
        .col-3 { 25%;}
        .col-4 { 33.33%;}
        .col-5 { 41.66%;}
        .col-6 { 50%;}
        .col-7 { 58.33%;}
        .col-8 { 66.66%;}
        .col-9 { 75%;}
        .col-10 { 83.33%;}
        .col-11 { 91.66%;}
        .col-12 { 100%;}
 @media screen and (min- 1024px){
            .desckbook,.pad,.phone{
                display: block;
            }
        }
        /*pad屏幕上*/
        @media screen and (min- 768px) and (max- 1027px){
            .pad,.phone{
                display: block;
            }
        }
        @media screen and (max- 768px){
            .phone{
                display: block;
            }
        }
    </style>


<body>
<div class="col-3 desckbook"></div>
<div class="col-6 pad"></div>
<div class="col-3 phone"></div>

在电脑上：

在pad中：

在手机上：

例子二：

 实现，在电脑屏幕上的时候，HTML布局为上面的，在手机设备上的布局为图下方所示。

<meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>    
<style>
        * {
            box-sizing: border-box;
        }
        /*清除浮动，让row不受浮动影响而使其宽度和高度为0*/
        .row:after {
            content: "";
            clear: both;
            display: block;
        }
        /*所有类名以col-开头的元素*/
        [class*="col-"] {
            float: left;
            padding: 15px;
        }
        html {
            font-family: "Lucida Sans", sans-serif;
        }
        .header {
            background-color: #9933cc;
            color: #ffffff;
            padding: 15px;
        }
        .menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .menu li {
            padding: 8px;
            margin-bottom: 7px;
            background-color :#33b5e5;
            color: #ffffff;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }
        .menu li:hover {
            background-color: #0099cc;
        }
        .aside {
            background-color: #33b5e5;
            padding: 15px;
            color: #ffffff;
            text-align: center;
            font-size: 14px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        }
        .footer {
            background-color: #0099cc;
            color: #ffffff;
            text-align: center;
            font-size: 12px;
            padding: 15px;
        }
        /* For desktop: */
        .col-1 { 8.33%;}
        .col-2 { 16.66%;}
        .col-3 { 25%;}
        .col-4 { 33.33%;}
        .col-5 { 41.66%;}
        .col-6 { 50%;}
        .col-7 { 58.33%;}
        .col-8 { 66.66%;}
        .col-9 { 75%;}
        .col-10 { 83.33%;}
        .col-11 { 91.66%;}
        .col-12 { 100%;}

        @media only screen and (max- 768px) {          /*使用媒体查询在 768px 添加断点：*/
            /* For mobile phones: */
            [class*="col-"] {
                 100%;
            }
        }
    </style>
</head>
<body>
<div class="header">
    <h1>Chania</h1>
</div>
<div class="row">
    <div class="col-3 menu">
        <ul>
            <li>The Flight</li>
            <li>The City</li>
            <li>The Island</li>
            <li>The Food</li>
        </ul>
    </div>
    <div class="col-6">
        <h1>The City</h1>
        <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    </div>
    <div class="col-3 right">
        <div class="aside">
            <h2>What?</h2>
            <p>Chania is a city on the island of Crete.</p>
            <h2>Where?</h2>
            <p>Crete is a Greek island in the Mediterranean Sea.</p>
            <h2>How?</h2>
            <p>You can reach Chania airport from all over Europe.</p>
        </div>
    </div>
</div>
<div class="footer">
    <p>Resize the browser window to see how the content respond to the resizing.</p>
</div>

 

为移动端优先设计

移动端优先意味着在设计桌面和其他设备时优先考虑移动端的设计。

这就意味着我们必须对 CSS 做一些改变。

我们在屏幕小于 768px 进行样式修改，同样在屏幕宽度大于 768px 时也需要修改样式。以下是移动端优先实例：

HTML 实例

在屏幕为 600px 时添加媒体查询，并设置新的样式（屏幕大于600px但小于768px）：

实例

注意两组类样式是相同的，但名称不同 (col- 和 col-m-):

/* For mobile phones: */
[class*="col-"] {
     100%;
}
@media only screen and (min- 600px) {
    /* For tablets: */
    .col-m-1 { 8.33%;}
    .col-m-2 { 16.66%;}
    .col-m-3 { 25%;}
    .col-m-4 { 33.33%;}
    .col-m-5 { 41.66%;}
    .col-m-6 { 50%;}
    .col-m-7 { 58.33%;}
    .col-m-8 { 66.66%;}
    .col-m-9 { 75%;}
    .col-m-10 { 83.33%;}
    .col-m-11 { 91.66%;}
    .col-m-12 { 100%;}
}
@media only screen and (min- 768px) {
    /* For desktop: */
    .col-1 { 8.33%;}
    .col-2 { 16.66%;}
    .col-3 { 25%;}
    .col-4 { 33.33%;}
    .col-5 { 41.66%;}
    .col-6 { 50%;}
    .col-7 { 58.33%;}
    .col-8 { 66.66%;}
    .col-9 { 75%;}
    .col-10 { 83.33%;}
    .col-11 { 91.66%;}
    .col-12 { 100%;}
}

尝试一下 »

以上代码看起来很多余，但是他可以根据屏幕大小自动设置不同的样式，所以还是非常必要的。

针对桌面设备:

第一和第三部分跨越 3 列。中间部分跨域 6 列。

针对平板设备:

第一跨域 3列，第二部分跨越 9 列，第三部分跨域 12 列：

<div class="row">
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>

方向：横屏/竖屏

结合CSS媒体查询,可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

语法：

orientation：portrait | landscape
  • portrait：指定输出设备中的页面可见区域高度大于或等于宽度
  • landscape： 除portrait值情况外，都是landscape
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yyn120804/p/7894460.html