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

  • 相关阅读:
    宿主机无法访问CentOS7上Jenkins服务的解决办法
    415. Add Strings
    367. Valid Perfect Square
    326. Power of Three
    258. Add Digits
    231. Power of Two
    204. Count Primes
    202. Happy Number
    172. Factorial Trailing Zeroes
    171. Excel Sheet Column Number
  • 原文地址:https://www.cnblogs.com/du-jun/p/10206450.html
Copyright © 2011-2022 走看看