zoukankan      html  css  js  c++  java

  • Python-bootstrap


    1 引入

    如果想要用到BootStrap提供的js插件，那么还需要引入jQuery框架，因为BootStrap提供的js插件是依赖于jQuery的
    <link type="text/css" rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../bootstrap.js"></script>
    <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>


    2 容器

    - 固定宽度：.container
    - 流式布局：.container-fluid


    3 响应式布局

    - 超小屏幕：小于 768px
    - 小屏幕：大于等于 768px
    - 中等屏幕：大于等于 992px
    - 大屏幕：大于等于 1200px

    为什么要进行响应式开发？

    随着移动设备的流行，网页设计必须要考虑到移动端的设计。同一个网站为了兼容PC端和移动端显示，就需要进行响应式开发。

    什么是响应式？

    利用媒体查询，让同一个网站兼容不同的终端（PC端、移动端）呈现不同的页面布局。

    用到的技术：

    CSS3@media查询

    用于查询设备是否符合某一特定条件，这些特定条件包括屏幕尺寸、是否可触摸、屏幕精度、横屏竖屏等信息。

    常见属性：

    • device-width, device-height 屏幕宽、高
    • width,height 渲染窗口宽、高
    • orientation 设备方向
    • resolution 设备分辨率

    语法：

    @media mediatype and|not|only (media feature) {
    CSS-Code;
}

    不同的媒体使用不同的stylesheet

    <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

    viewport

    手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

    设置viewport

    一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

    <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>
    • width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
    • height：和 width 相对应，指定高度。
    • initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
    • maximum-scale：允许用户缩放到的最大比例。
    • minimum-scale：允许用户缩放到的最小比例。
    • user-scalable：用户是否可以手动缩放。

    Bootstrap的栅格系统

    • container
    • row
    • column

    注意事项： 使用Bootstrap的时候不要让自己的名字与Bootstrap的类名冲突。

    4 栅格系统

    1、概念

    将父级可用宽度(content)均分为12等份

    0. 包含在container里面
    1. 每一行（row）均分成12列(col-xx-**）必须放在row中)，
    2. 每一个标签可以自定义占的列数（col-xx-**）

    列偏移

    列排序

    2、列比

    - 超小屏幕：.col-xs-*
    - 小屏幕：.col-sm-*
    - 中等屏幕：.col-md-*
    - 大屏幕：.col-lg-*
    v-hint：只设置小屏列比会影响大屏列比；只设置大屏列比小屏时会撑满屏幕


    3、行

    <div class="row"></div>
    ...
    <div class="row"></div>


    4、列偏移

    - 超小屏幕：.col-xs-offset-*
    - 小屏幕：.col-sm-offset-*
    - 中等屏幕：.col-md-offset-*
    - 大屏幕：.col-lg-offset-*


    5 常用组件

    字体图标

    优点：
    size小
    放大不失真
    可以随字体颜色变化而变化
    1. Bootstrap自带的
    <span class='glyphicon glyphicon-heart'></span>
    2. font Awesome
    <i class="fa fa-heart"></i>
    http://www.fontawesome.com.cn/


    下拉菜单
    按钮组
    输入框俎
    导航
    分页
    标签和徽章
    页头
    缩率图
    进度条

    补充：滚动的进度条
    var $d1 = $("#d1");
    var width = 0;
    var theID = setInterval(setValue, 200);

    function setValue() {
    if (width === 100) {
    clearInterval(theID);
    } else {
    width++;
    $d1.css("width", width+"%").text(width+"%");
    }
    }


    6. Bootstrap常用组件
    7. Bootstrap常用插件

    1. 模态框

    模态框的HTML代码放置的位置

    务必将模态框的HTML代码放在文档的最高层级内（也就是说，尽量作为 body 标签的直接子元素），以避免其他组件影响模态框的展现和/或功能。

    <!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

    　　

    注意：

    • 通过为模态框设置 .bs-example-modal-lg和 .bs-example-modal-sm来控制模态框的大小。
    • 通过 .fade类来控制模态框弹出时的动画效果（淡入淡出效果）。
    • 通过在 .modal-bodydiv中设置 .row可以使用Bootstrap的栅格系统。


    2. 轮播图

    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

    　　

    可以在为图片添加介绍信息：

    复制代码
    <div class="item">
  <img src="..." alt="...">
  <div class="carousel-caption">
    <h3>...</h3>
    <p>...</p>
  </div>
</div>
    复制代码

    方法：

    设置切换间隔为2秒，默认是5秒。

    $('.carousel').carousel({
  interval: 2000
})


    8. 其他插件

    1. SweetAlert for bootstrap

    https://lipis.github.io/bootstrap-sweetalert/

    REFERENCE-LIWENZHOU :http://www.cnblogs.com/liwenzhou/p/8214637.html
  • 相关阅读:
    杭电2063 过山车 匈牙利算法
    杭电2023 平均成绩
    leveldb性能分析
    linux下libreoffice安装测试
    iptables配置vsftp访问
    vsftp访问异常
    mysql二进制安装
    vi命令
    mysql配置优化
    rsync 配置
  • 原文地址：https://www.cnblogs.com/du-jun/p/10206450.html
Copyright © 2011-2022 走看看