• 我的bootstrap使用的历程


    1.bootstrap快速开发,和amaze一样,同样是自己布局,然后找对应的模板,然后复制。

    2.bootstrap实现的不完美的地方,我们要靠自己的样式去解决。

    典型的居中布局,

    container

    row

    col-lg-2 col-md-3 col-sm-3 col-xs-3

    *****************************************************************************************************

    *****************************************************************************************************

    *****************************************************************************************************
    *****************************************************************************************************

    <body class="body-container">

    body会给网页加背景,通常开发阶段的时候用的。

    <div class='clearfix'></div>

    这个我们可以看到清楚浮动。

    ****************************************************************************************************

    ****************************************************************************************************

    0.boot的开始需要引入meta viewport的东西。
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--如果支持Google Chrome Frame:GCF,则使用GCF渲染;如果系统安装ie8或以上版本,则使用最高版本ie渲染;否则,这个设定可以忽略。-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- width - viewport的宽度 height - viewport的高度;initial-scale - 初始的缩放比例;minimum-scale - 允许用户缩放到的最小比例;maximum-scale - 允许用户缩放到的最大比例;user-scalable - 用户是否可以手动缩放-->
    1. col-xs-* 小于768. col-sm-* 大于769,col-md 996. col-lg 1200.
    2.boot3 12格
    3.container表示左右居中,有固定的宽度。h1标签添加page-header表示给标题添加下划线。

    col-md-offset-6右偏移。如果小尺寸或者特小尺寸都不会偏移。

    下边的alert alert-info只是为了添加颜色而已。

    visible-xs alert alert-info 只有在小尺寸的时候才可以。

    hidden-xs 只在特小尺寸下隐藏

    navbar-default换成navbar-inverse 颜色就会变成深的。

    navbar-fixed-top

    navbar-fixed-bottom

    navbar-static-top 

    =================================================================

    =================================================================

     

    ====================================================================================

    ====================================================================================

    <div class='modal-backdrop in'></div>

    点击后出现

    <a href='' data-toggle='modal' data-target='#login-modal'>登录</a>

    fade有过渡

    点击关闭后关闭Modal
    <button class='close' data-dismiss='modal'>&times;</button>

    modal

    tabindex='-1'  去掉 tab esc等效果。
    data-backdrop='false'这个可以去掉置灰的背景

    ===================================================

    调外部html的方法一:

    调外部html的方法二:

    调外部Html的方法三:

    =========================================================================

    =========================================================================
    我们可以在控制台输入进行控制。

    $('#login-modal').modal('show');
    $('#login-modal').modal('hide');
    $('#login-modal').modal('toggle');

    ========================================================================

    ========================================================================

    ==================================================================

    ==================================================================

    slide是为了线性,而data-ride为了自动开始播放。

    =================================================================

    =================================================================

    添加小圆点:

    ===================================================================================

    ===================================================================================

    prev-slide ,play-and-stop,next-slide这三个是自己定义。

    ================================================================

    ================================================================

     ====================================================================

    ====================================================================

  • 相关阅读:
    DNNClassifier 深度神经网络 分类器
    浏览器对MP4视频 帧宽度 高度的兼容性
    UnicodeEncodeError:'latin-1' codec can't encode character
    文件夹下 文件计数
    the largest value you actually can transmit between the client and server is determined by the amount of available memory and the size of the communications buffers.
    the “identity” of an object
    广告特征 用户特征
    如果一个维度全覆盖,则有效维度应该对该维度全覆盖
    a high-level neural networks AP
    使用 LDA 挖掘的用户喜好主题
  • 原文地址:https://www.cnblogs.com/coding4/p/5526852.html
Copyright © 2020-2023  润新知