zoukankan      html  css  js  c++  java
  • Bootstrap学习笔记

    本博文根据菜鸟教程以及BootStrao官网的文档学习整理完成

    Bootstrap:

    1. 概念: 一个前端开发的框架,Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
    	* 框架:一个半成品软件,开发人员可以在框架基础上,在进行开发,简化编码。
    	* 好处:
    		1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
    		2. 响应式布局。
    		* 同一套页面可以兼容不同分辨率的设备。
    
    2. 快速入门
    	1. 下载Bootstrap
    	2. 在项目中将这三个文件夹复制
    	3. 创建html页面,引入必要的资源文件
    

    BootStrap CSS概览

      移动设备优先

      移动设备优先是 Bootstrap 3 的最显著的变化。

      在之前的 Bootstrap 版本中(直到 2.x),您需要手动引用另一个 CSS,才能让整个项目友好的支持移动设备。

      现在不一样了,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 的比例呈现,不会有任何的缩放。

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

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

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

    <meta name="viewport" content="width=device-width, 
                                         initial-scale=1.0, 
                                         maximum-scale=1.0, 
                                         user-scalable=no">

    从官网上复制一份代码如下:

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <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="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.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]-->
    </head>
    <body>
    <h1>你好,世界!</h1>
    <!-- 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>
    View Code

    运行结果如图所示:

     

    如上的引用方式是直接通过官网的链接引入,直接复制即可完成,也可以将文件下载到本地然后在本地导入html页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello World</title>
        <!--引入本地的bootstrap——css-->
        <link href="../js/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
        <script src="../js/jquery/jquery-1.4.2.min.js"></script>
        <script src="../js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
    <h1>你好世界!!!</h1>
    </body>
    </html>
    View Code

    响应式图像:

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

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

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

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

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

      这表明相关的图像呈现为 block。当您把元素的 display 属性设置为 block,以块级元素显示。

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

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

    如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center。

    BootStrap网格系统

      Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。

    同一套页面可以兼容不同分辨率的设备。
    实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子

    步骤:
      1. 定义容器。相当于之前的table、
        * 容器分类:
          1. container:两边留白
          2. container-fluid:每一种设备都是100%宽度
      2. 定义行。相当于之前的tr 样式:row
      3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目
        * 设备代号:
          1. xs:超小屏幕 手机 (<768px):col-xs-12
          2. sm:小屏幕 平板 (≥768px)
          3. md:中等屏幕 桌面显示器 (≥992px)
          4. lg:大屏幕 大桌面显示器 (≥1200px)

      * 注意:
        1. 一行中如果格子数目超过12,则超出部分自动换行。
        2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
        3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。

    栅栏系统的代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello World</title>
        <!--引入本地的bootstrap——css-->
        <link href="../js/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
        <script src="../js/jquery/jquery-1.4.2.min.js"></script>
        <script src="../js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <style>
            .inner{
                border:1px solid red;
            }
    
        </style>
    </head>
    <body>
    <!--1.定义容器-->
    <div class="container">
        <!--2.定义行-->
        <div class="row">
            <!--3.定义元素
                在大显示器一行12个格子
                在pad上一行6个格子
            -->
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-lg-1 col-sm-2 inner">栅格</div>
            <div class="col-md-4 inner">栅格</div>
            <div class="col-md-4 inner">栅格</div>
            <div class="col-md-4 inner">栅格</div>
        </div>
    </div>
    </body>
    View Code

    col-lg-1 col-sm-2的含义是在大屏幕时候显示成一行在小屏幕的时候显示成2行。行数的选择可以根据要求去设置

    CSS样式和JS插件

      一、按钮

    按照官网文档修改代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello World</title>
        <!--引入本地的bootstrap——css-->
        <link href="../js/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
        <script src="../js/jquery/jquery-1.4.2.min.js"></script>
        <script src="../js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="btn-group" role="group" aria-label="1111">
        <button type="button" class="btn btn-danger">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
    </div>
    <div class="btn-toolbar" role="toolbar" aria-label="...">
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default">1</button>
        </div>
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default">2</button>
        </div>
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default">3</button>
        </div>
    </div>
    </body>
    </html>
    View Code

    <div class="btn-toolbar" role="toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮 1</button>
        <button type="button" class="btn btn-default">按钮 2</button>
        <button type="button" class="btn btn-default">按钮 3</button>
     </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮 4</button>
        <button type="button" class="btn btn-default">按钮 5</button>
        <button type="button" class="btn btn-default">按钮 6</button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">按钮 7</button>
        <button type="button" class="btn btn-default">按钮 8</button>
        <button type="button" class="btn btn-default">按钮 9</button>
    </div>
    </div>
    View Code

    效果如下

    按钮大小的调节

    .btn-group-lg,大

    .btn-group-sm,小

    .btn-group-xs最小

    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">按钮 1</button>
        <button type="button" class="btn btn-default">按钮 2</button>
        <button type="button" class="btn btn-default">按钮 3</button>
    </div>
        <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default">按钮 4</button>
        <button type="button" class="btn btn-default">按钮 5</button>
        <button type="button" class="btn btn-default">按钮 6</button>
    </div>
        <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-default">按钮 7</button>
        <button type="button" class="btn btn-default">按钮 8</button>
        <button type="button" class="btn btn-default">按钮 9</button>
    </div>
    View Code

    二、BootStrap表单

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello World</title>
        <!--引入本地的bootstrap——css-->
        <link href="../js/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
        <script src="../js/jquery/jquery-1.4.2.min.js"></script>
        <script src="../js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">Username</label>
            <div class="col-sm-10">
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">Password</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">Sign in</button>
            </div>
        </div>
    </form>
    </body>
    </html>
    View Code
    一纸高中万里风,寒窗读破华堂空。 莫道长安花看尽,由来枝叶几相同?
  • 相关阅读:
    PHP基本的语法以及和Java的差别
    Linux 性能測试工具
    【Oracle 集群】Linux下Oracle RAC集群搭建之Oracle DataBase安装(八)
    【Oracle 集群】Oracle 11G RAC教程之集群安装(七)
    【Oracle 集群】11G RAC 知识图文详细教程之RAC在LINUX上使用NFS安装前准备(六)
    【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之RAC 特殊问题和实战经验(五)
    【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之缓存融合技术和主要后台进程(四)
    【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之RAC 工作原理和相关组件(三)
    Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之ORACLE集群概念和原理(二)
    【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之集群概念介绍(一)
  • 原文地址:https://www.cnblogs.com/byczyz/p/14385809.html
Copyright © 2011-2022 走看看