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这三个是自己定义。

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

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

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

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

  • 相关阅读:
    POJ2778 DNA Sequence AC自动机上dp
    codeforces732F Tourist Reform 边双联通分量
    codeforces786B Legacy 线段树优化建图
    洛谷P3588 PUS 线段树优化建图
    codeforces1301D Time to Run 模拟
    codeforces1303B National Project 二分或直接计算
    codeforces1303C Perfect Keyboard 模拟或判断欧拉路
    codeforces1303D Fill The Bag 二进制应用+贪心
    python之路——使用python操作mysql数据库
    python之路——mysql索引原理
  • 原文地址:https://www.cnblogs.com/coding4/p/5526852.html
Copyright © 2011-2022 走看看