zoukankan      html  css  js  c++  java
  • 我的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这三个是自己定义。

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

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

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

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

  • 相关阅读:
    冗余换性能从Backbone的triggerEvents说开了去
    Sublime Text3 中安装 Emmet
    windows下安装dig
    掺合模式(Mixin)
    Backbone.sync将模型同步到服务器
    Sublime text jQuery插件
    快捷键汇集
    动态创建script在IE中缓存js文件时导致编码不正确bug
    Firefox中使用location.hash会自动decodeURI Bug
    Backbone事件模块
  • 原文地址:https://www.cnblogs.com/coding4/p/5526852.html
Copyright © 2011-2022 走看看