精华内容
下载资源
问答
  • Bootstrap-栅格布局实例

    千次阅读 2015-12-20 10:16:47
    下面是某管理系统的Bootstrap实现 XXXXX系统 body { padding-top: 50px; padding-bottom: 40px; color: #5a5a5a; } /* 下面是左侧导航栏的代码 */ .sidebar {

    下面是某管理系统的Bootstrap实现

    <span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>XXXXX系统</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <style>
            body {
                padding-top: 50px;
                padding-bottom: 40px;
                color: #5a5a5a;
            }
    
    /* 下面是左侧导航栏的代码 */
    .sidebar {
                position: fixed;
                top: 51px;
                bottom: 0;
                left: 0;
                z-index: 1000;
                display: block;
                padding: 20px;
                overflow-x: hidden;
                overflow-y: auto;
                background-color: #ddd;
                border-right: 1px solid #eee;
            }
    
            .nav-sidebar {
                margin-right: -21px;
                margin-bottom: 20px;
                margin-left: -20px;
            }
    
            .nav-sidebar > li > a {
                padding-right: 20px;
                padding-left: 20px;
            }
    
            .nav-sidebar > .active > a,
            .nav-sidebar > .active > a:hover,
            .nav-sidebar > .active > a:focus {
                color: #fff;
                background-color: #428bca;
            }
    已久
    
            .main {
                padding: 20px;
            }
    
            .main .page-header {
                margin-top: 0;
            }
    </style>
    
    </head>
    
    <body>
    <!--下面是顶部导航栏的代码-->
    <nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">某管理系统</a>
    </div>
    
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">首页</a></li>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">功能<span class="caret"></span></a>
    <ul class="dropdown-menu" role="menu">
    <li class="dropdown-header">业务功能</li>
    <li><a href="#">信息建立</a></li>
    <li><a href="#">信息查询</a></li>
    <li><a href="#">信息管理</a></li>
    <li class="divider"></li>
    <li class="dropdown-header">系统功能</li>
    <li><a href="#">设置</a></li>
    </ul>
    </li>
    <li><a href="#">帮助</a></li>
    </ul>
    <form class="navbar-form navbar-right" role="search">
    <div class="form-group">
    <input type="text" class="form-control" placeholder="用户名...">
    <input type="text" class="form-control" placeholder="密码...">
    </div>
    <button type="submit" class="btn btn-default">登录</button>
    </form>
    </div>
    </div>
    </nav>
    
    <!—自适应布局-->
    <div class="container-fluid">
    <div class="row">
    <!—左侧导航栏-->
    
    <div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
    <li class="active"><a href="#">首页</a></li>
    </ul>
    <ul class="nav nav-sidebar">
    <li><a href="#">信息建立</a></li>
    <li><a href="#">信息查询</a></li>
    <li><a href="#">信息管理</a></li>
    </ul>
    <ul class="nav nav-sidebar">
    <li><a href="#">设置</a></li>
    <li><a href="#">帮助</a></li>
    </ul>
    </div>
    <!—右侧管理控制台-->
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <h1 class="page-header">管理控制台</h1>
    
    <p>
    <!—一组按钮控件-->
    <button type="button" class="btn btn-lg btn-default">操作1</button>
    <button type="button" class="btn btn-lg btn-primary">操作2</button>
    <button type="button" class="btn btn-lg btn-success">操作3</button>
    <button type="button" class="btn btn-lg btn-info">操作4</button>
    <button type="button" class="btn btn-lg btn-warning">操作5</button>
    <button type="button" class="btn btn-lg btn-danger">操作6</button>
    </p>
    <div class="row">
    <div class="col-md-6">
    <!—panel面板,里面放置一些控件,下同-->
    <div class="panel panel-primary">
    <!—panel面板的标题,下同-->
    <div class="panel-heading">
    <h3 class="panel-title">最新提醒</h3>
    </div>
    <!—panel面板的内容,下同-->
    <div class="panel-body">
    <div class="alert alert-success" role="alert">
    <strong>提示</strong>您的订单(2014001)已经审批通过!
    </div>
    <div class="alert alert-danger" role="alert">
    <strong>提示</strong>您的订单(2014002)被打回!
    </div>
    <div class="alert alert-warning" role="alert">
    <strong>提示</strong>您的订单(2013001)客户付款延迟!
    </div>
    </div>
    </div>
    </div>
    <div class="col-md-6">
    
    <div class="panel panel-primary">
    <div class="panel-heading">
    <h3 class="panel-title">我的任务</h3>
    </div>
    <div class="panel-body">
    <ul class="nav nav-pills nav-stacked" role="tablist">
    <li role="presentation">
    <a href="#" class="alert alert-info">
    <span class="badge pull-right">42</span>
    订单审批
    </a>
    </li>
    <li role="presentation">
    <a href="#" class="alert alert-info">
    <span class="badge pull-right">20</span>
    收款确认
    </a>
    </li>
    <li role="presentation">
    <a href="#" class="alert alert-info">
    <span class="badge pull-right">10</span>
    付款确认
    </a>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    <div class="row">
    <div class="col-md-6">
    <div class="panel panel-primary">
    <div class="panel-heading">
    <h3 class="panel-title">最新订单</h3>
    </div>
    <div class="panel-body">
    <table class="table table-striped">
    <thead>
    <tr>
    <th>#</th>
    <th>产品</th>
    <th>数量</th>
    <th>总金额</th>
    <th>业务员</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Apple Macbook air</td>
    <td>10</td>
    <td>80000</td>
    <td>王小贱</td>
    </tr>
    <tr>
    <td>2</td>
    <td>Apple iPad air</td>
    <td>20</td>
    <td>65000</td>
    <td>尹开花</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Apple Macbook pro</td>
    <td>5</td>
    <td>50000</td>
    <td>刘老根</td>
    </tr>
    </tbody>
    </table>
    <p><a class="btn btn-primary" href="#" role="button">查看详细»</a></p>
    </div>
    </div>
    </div>
    <div class="col-md-6">
    <div class="panel panel-primary">
    <div class="panel-heading">
    <h3 class="panel-title">工程进度</h3>
    </div>
    <div class="panel-body">
    <h3><span class="label label-primary">水井挖掘工程</span></h3>
    
    <div class="progress">
    <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="80"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 60%"><span class="sr-only">80% Complete</span>
    </div>
    </div>
    <h3><span class="label label-danger">基建工程</span></h3>
    
    <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="30"
                                         aria-valuemin="0" aria-valuemax="100" style="width: 80%"><span class="sr-only">30% Complete (danger)</span>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    
    
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    
    </body>
    </html></span>
     供大家参考。


    展开全文
  • Bootstrap栅格布局

    2021-05-17 17:38:41
    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。 2、简介 ...

    1、栅格系统

    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。

    2、简介

    栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:

    • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
    • 通过“行(row)”在水平方向创建一组“列(column)”。
    • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
    • 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
    • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
    • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
    • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
    • 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。
    • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 , 并且针对小屏幕设备覆盖栅格类。 因此,在元素上应用任何 .col-lg-* 不存在, 也影响大屏幕设备。

    通过研究后面的实例,可以将这些原理应用到你的代码中。

    3、栅格参数

    通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

    bootstrap4版本中

    之前版本

    4、实例:从堆叠到水平排列

    使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row 内。

    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>

    5、实例:流式布局容器

    将最外面的布局元素 .container 修改为 .container-fluid,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

    <div class="container-fluid">
      <div class="row">
        ...
      </div>
    </div>

    6、实例:移动设备和桌面屏幕

    是否不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即 .col-xs-* 和 .col-md-*。请看下面的实例,研究一下这些是如何工作的。

    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
      <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
      <div class="col-xs-6">.col-xs-6</div>
      <div class="col-xs-6">.col-xs-6</div>
    </div>

    7、实例:手机、平板、桌面

    在上面案例的基础上,通过使用针对平板设备的 .col-sm-* 类,我们来创建更加动态和强大的布局吧。

    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
      <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    </div>
    <div class="row">
      <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
      <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
      <!-- Optional: clear the XS cols if their content doesn't match in height -->
      <div class="clearfix visible-xs-block"></div>
      <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    </div>

    8、实例:多余的列(column)将另起一行排列

    如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列。

    <div class="row">
      <div class="col-xs-9">.col-xs-9</div>
      <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
      <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
    </div>

    9、响应式列重置

    即便有上面给出的四组栅格class,你也不免会碰到一些问题,例如,在某些阈值时,某些列可能会出现比别的列高的情况。为了克服这一问题,建议联合使用 .clearfix 和 响应式工具类。

    <div class="row">
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <!-- Add the extra clearfix for only the required viewport -->
      <div class="clearfix visible-xs-block"></div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
    </div>

    除了列在分界点清除响应, 您可能需要 重置偏移, 后推或前拉某个列。请看此栅格实例。

    <div class="row">
      <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
      <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
    </div>
    <div class="row">
      <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
      <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
    </div>

    10、列偏移

    使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
    </div>
    <div class="row">
      <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
      <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    </div>
    <div class="row">
      <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
    </div>

    You can also override offsets from lower grid tiers with .col-*-offset-0 classes.

    <div class="row">
      <div class="col-xs-6 col-sm-4">
      </div>
      <div class="col-xs-6 col-sm-4">
      </div>
      <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
      </div>
    </div>

    11、嵌套列

    为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。

    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-xs-8 col-sm-6">
            Level 2: .col-xs-8 .col-sm-6
          </div>
          <div class="col-xs-4 col-sm-6">
            Level 2: .col-xs-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>

    12、总结

    响应式工具有哪些呢

    为了加快对移动设备友好的网页开发工作,利用媒体查询功能,并将这些工具类可以方便的针对不同设备展示或隐藏页面内容。

    通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容。

    从 v3.2.0 版本起,形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性,列表如下:

    因此,以超小屏幕(xs)为例,可用的 .visible-*-* 类是:.visible-xs-block.visible-xs-inline 和 .visible-xs-inline-block

    .visible-xs.visible-sm.visible-md 和 .visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 ` 相关的元素的特殊情况外,它们与.visible-*-block` 大体相同。

    与之相反的,是visible-xsvisible-smvisible-mdvisible-lg 是显示某个页面内容

    展开全文
  • bootstrap栅格布局案例

    千次阅读 2018-12-18 11:50:53
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> welcome DOOLAR <span class="caret"></span> ...

    html:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    		<meta name="viewport" content="width=device-width, 
    		initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    		<meta name="format-detection" content="telephone=no, email=no" />
    		<meta name="apple-mobile-web-app-capable" content="yes"/>
    		<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    		<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    		<link rel="stylesheet" href="css/index.css">
    	</head>
    	<body>
    		<div class="container">
    			<div id="header" class="row header">
    				<div id="heaText" class="col-xs-12 col-sm-4 col-md-3 col-lg-8">
    					welcome
    				</div>
    				<div class="pull-left pull col-xs-6 col-sm-4 col-md-3 col-lg-2">
    					<div class="heaLeft">
    						<button class="Left1 btn">
    							DOOLAR
    						</button>
    						<button class="Left1">
    							<span class="caret"></span>
    						</button>
    					</div>
    				</div>
    				<div class="pull-right pull col-xs-6 col-sm-4 col-md-3 col-lg-2">
                        <div class="heaRight pull-right">
    						<button class="Left1">
    							<span class="caret"></span>
    						</button>
                        	<button class="Left1 btn">
                        		DOOLAR
                        	</button>                   	
                        </div>					
    				</div>
    			</div>
    			<div class="row">
    				<div id="box" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
    				</div>
    			</div>
    			<div class="show row">
    				<div class="col-xs-4 col-sm-6 col-md-4 col-lg-4">
    					<figure>
    						<img src="image/abt-1.jpg" />
    					</figure>
    				</div>
    				<div class="col-xs-4 col-sm-6 col-md-4 col-lg-4">
    					<figure>
    						<img src="image/abt-2.jpg" />
    					</figure>
    				</div>
    				<div class="col-xs-4 col-sm-12 col-md-4 col-lg-4">
    					<figure>
    						<img src="image/abt-3.jpg" />
    					</figure>
    				</div>
    			</div>
    			<div class="anim row"> 
    				<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    					<figure class="an1">
    						<img src="image/abt-1.jpg">
    					</figure>
    				</div>
    				<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    					<figure class="an2">
    						<img src="image/abt-2.jpg">
    					</figure>
    				</div>
    				<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    					<figure class="an3">
    						<img src="image/abt-3.jpg">
    					</figure>
    				</div>
    				<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
    					<figure class="an4">
    						<img src="image/abt-3.jpg">
    					</figure>
    				</div>
    			</div>
    			<footer>
    				<div>
    					<p>网站属于******所有</p>
    				</div>
    			</footer>
    		</div>		
    	</body>
    	<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
    	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    	<script type="text/javascript" src="js/index.js"></script>
    </html>
    

    css:

    @charset "UTF-8";
    *{
    	margin: 0;
    	padding:0;
    	box-sizing:border-box;
    }
    body,ul,li,p{margin:0;padding:0;}
    ul{list-style-type: none;}
    button{border:0;outline:none;}
    .header{
    	height: 60px;
    	background:#000000;
    }
    #heaText{
    	height: 60px;
    	line-height: 60px;
    	background:#00A8f7;
    	text-align: center;
    	font-size: 40px;
    	color: #FFFFFF;
    	font-weight: bold;
    }
    .pull{
    	color: #FFFFFF;
    	background: #000000;
    	height: 60px;
    }
    .heaLeft,.heaRight{
    	margin-top: 16px;
    }
    .Left1{
    	background: #000000;
    }
    /* 600px以下 */
    @@media screen and (max-width:600px;) {
    	.heaLeft{width: 100%;}	
    }
    /* 轮播图 */
    #box {position:relative;width:100%;height:402px;margin:10px auto; }
    #box .imgList{position:relative;width:100%;height:400px;overflow:hidden;}
    #box .imgList li{position:absolute;top:0;left:0;width:100%;height:400px;}
    #box .imgList li img{width: 100%}
    #box .imgList li:nth-of-type(1){z-index: 999;}
    #box .countNum{width: 130px;height: 23px;z-index: 9999;margin: 5px auto;}
    #box .countNum li{
        width:30px;height:10px;float:left;color:#fff;
        background:#00f;text-align:center;
        margin-left:10px;cursor:pointer;opacity:0.7;
        filter:alpha(opacity=70);font-size: 20px;
    }
    #box .countNum li.current{
        background:#f60;font-weight:bold;
        opacity:1;filter:alpha(opacity=70);
    }
    @media screen and (max-width: 992px) {
        #box{width: 100%;height: 300px;}
        #box .imgList{width: 100%;height: 300px;}
        #box .imgList li{width: 100%;height: 300px;}
    }
    @media screen and (max-width: 767px) {
        #box{width: 100%;height: 241px;}
        #box .imgList{width: 100%;height: 241px;}
        #box .imgList li{width: 100%;height: 241px;}
    }
    @media screen and (max-width: 600px) {
        #box{width: 100%;height: 224px;}
        #box .imgList{width: 100%;height: 224px;}
        #box .imgList li{width: 100%;height: 224px;}
    }
    @media screen and (max-width: 560px) {
        #box{width: 100%;height: 190px;}
        #box .imgList{width: 100%;height: 190px;}
        #box .imgList li{width: 100%;height: 190px;}
    }
    @media screen and (max-width: 470px) {
        #box{width: 100%;height: 140px;}
        #box .imgList{width: 100%;height: 140px;}
        #box .imgList li{width: 100%;height: 140px;}
    }
    /* 轮播图下的图片 */
    .show div{
    	margin-top: 20px;
    }
    .show div figure{
    	position: relative;
    }
    .show div figure img{
    	width: 100%;
    }
    .anim{
    	padding-top: 20px;
    }
    .anim div{
    	padding-top: 20px;
    }
    .anim figure{
    	width: 100%;
    	position: relative;
    	height: 200px;
    	overflow: hidden;
    }
    /* 底部 */
    footer{
    	background: #FFFFFF;
    }
    footer div p{
    	text-align: center;
    	margin-top: 20px auto;
    }

    js:

    function runImg(){}
    runImg.prototype={
        bigbox:null,
        boxul:null,
        imglist:null,
        numlist:null,
        index:0,
        timer:null,
        play:null,
        imgurl:[],
        count:0,
        $:function(obj){
            if(typeof(obj)=="string"){
                if(obj.indexOf("#")>=0){
                    obj=obj.replace("#","");
                    if(document.getElementById(obj)){
                        return document.getElementById(obj);
                    }else{
                        alert("没有容器"+obj);
                        return null;
                    }
                }else{
                    return document.createElement(obj);
                }
            }else{
                return obj;
            }
        },
        info:function(id) {
            this.count = this.count <= 5 ? this.count : 5;
            this.bigbox = this.$(id);
            for (var i = 0; i < 2; i++) {
                var ul = this.$("ul");
                for(var j=1;j<=this.count;j++){
                    var li=this.$("li");
                    li.innerHTML=i==0?this.imgurl[j-1]:"";
                    ul.appendChild(li);
                }
                this.bigbox.appendChild(ul);
            }
            this.boxul=this.bigbox.getElementsByTagName("ul");
            this.boxul[0].className="imgList";
            this.boxul[1].className="countNum";
            this.imglist=this.boxul[0].getElementsByTagName("li");
            this.numlist=this.boxul[1].getElementsByTagName("li");
            this.numlist[0].className="current";
        },
    
        action:function(id){
            this.autoplay();
            this.mouseoverout(this.bigbox,this.numlist);
        },
        imgshow:function(num,numlist,imglist){
            this.index=num;
            var alpha=0;
            for(var i=0;i<numlist.length;i++){
                numlist[i].className="";
            }
            numlist[this.index].className="current";
            clearInterval(this.timer);
            for(var j=0;j<imglist.length;j++){
                imglist[j].style.opacity=0;
                imglist[j].style.filter="alpha(opacity=0)";
            }
            var $this=this;
            this.timer=setInterval(function(){
                alpha+=2;
                if(alpha>100){alpha=100}
                imglist[$this.index].style.opacity=alpha/100;
                imglist[$this.index].style.filter="alpha(opacity="+alpha+")";
                if(alpha==100){clearInterval($this.timer)}
            },20);
        },
    //		//自动播放
        autoplay:function(){
            var $this=this;
            this.play=setInterval(function(){
                $this.index++;
                if($this.index>$this.imglist.length-1){$this.index=0}
                $this.imgshow($this.index,$this.numlist,$this.imglist);
            },2000)
        },
    //		//处理鼠标事件
        mouseoverout:function(box,numlist){
            var $this=this;
            box.onmouseover=function(){
                clearInterval($this.play);
            };
            box.onmouseout=function(){
                $this.autoplay($this.index);
            };
            for(var i=0;i<numlist.length;i++){
                numlist[i].index=i;
                numlist[i].onmouseover=function(){
                    $this.imgshow(this.index,$this.numlist,$this.imglist);
                }
            }
        }
    };
    window.onload=function(){
        var runimg=new runImg();
        runimg.count=3;
        runimg.imgurl=[
            "<img src='image/bnr-1.jpg'/>",
            "<img src='image/bnr-2.jpg'/>",
            "<img src='image/bnr-3.jpg'/>"];
        runimg.info("#box");
        runimg.action("#box");
    };

    图片=>地址

    效果:

    1200以上

    990-1200:

    770-990:

    770以下:

    展开全文
  • 响应式布局:就是一个网站为了兼容多个终端,而不是为每个终端制定特定的版本。这个概念是为解决移动互联网浏览而诞生的。...实现最基本的Bootstrap响应式布局实例:http://www.cnblogs.com/haogj/p/4980353.html

    响应式布局:就是一个网站为了兼容多个终端,而不是为每个终端制定特定的版本。这个概念是为解决移动互联网浏览而诞生的。

    全面了解Bootstrap可以看:http://v3.bootcss.com/css/#grid
    实现最基本的Bootstrap响应式布局实例:http://www.cnblogs.com/haogj/p/4980353.html

    展开全文
  • Bootstrap3栅格系统布局实例

    千次阅读 2019-05-02 09:34:12
    布局实例 Bootstrap3栅格系统的核心理念是移动设备优先,其实也就是小设备优先。使用这些栅格类,再结合栅格系统的规则,就可以构建出千变万化的页面布局。 先看一个简单实例,来加深对移动设备优先的理解。假设...
  • 主要介绍了Bootstrap实现的经典栅格布局效果,结合具体实例形式分析了基于BootStrap实现栅格布局的完整步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
  • Bootstrap栅格布局

    2019-05-31 22:01:30
    Bootstrap栅格布局 最近在学习基于boostrap下的栅格布局,这个布局功能非常强大,提供了一套响应式的布局解决方案,可实现在PC端,平板端和移动端切换。下面是一些总结: 1.栅格盒模型的精妙之处 容器两边具有15px...
  • Bootstrap 栅格系统

    2017-10-14 11:20:51
    Bootstrap 栅格系统
  • bootstrap栅格系统

    2017-12-15 15:18:58
    利用bootstrap栅格系统编写input、select、textarea、日历等 一、bootstrap栅格系统 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。 Bootstrap ...
  • BootStrap栅格系统 文章目录 一、什么是响应式布局? 二、如何实现响应式布局 三、实现步骤 四、实例 一、什么是响应式布局? 同一套页面可以兼容不同分辨率的设备。如在电脑上访问苹果的网站:...
  • bootstrap布局实例

    千次阅读 2019-01-15 23:24:54
    1.路径导航 <!doctype html><html><head><meta charset="utf-8"><title>...link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><script typ...
  • Bootstrap栅格系统

    2020-05-04 21:16:39
    Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。 row(行)...
  • bootstrap栅格系统运用

    2020-01-14 19:20:16
    对于前端的开发过程中,在程序员眼中,写代码不算痛苦,最痛苦的是 “取名字”,什么...它是一个响应式布局的框架,所有样式都是封装好的,你只需要进行引用就好了。 下面我们就来看看它的强大之处: bootstrap...
  • 将最外面的布局元素 .container 修改为 .container-fluid,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。 <div class="container-fluid"> <div class="row"> ... </div> </div&...
  • 这学期上前端课入了个门,发现,初级web前端开发者们在开发时常常陷入一个困境,就是拼命着眼于如何进行布局的复杂实现,从而消耗了专注于布局设计的精力。关于这个现象,我接触了新概念——“声明式”和“命令式”...
  • Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,在该系统中将屏幕的每一行分为12格(列)。在讲解HTML表格时我们可通过表格(table)、行(tr)、单元格(td)进行布局;类似地,在栅格系统中可通过容器(container...
  • 起步:官方文档需要引入的js文件 123<script src="js/jquery-3.4.0.js"></script><script src="js/bootstrap.min.js"></script><link rel="stylesheet" href="css/b...
  • BootStrap+Hbuilder 实例

    2019-05-16 23:24:13
    之前做的项目主要是后端...学习过程中使用了BootStrap和Hbuilder,感觉是非常好的工具,这里记录一下自己试验的实例。 1 BootStrap的优点 BootStrap是现在最受欢迎的前端框架,对css、js等进行了封装。优点先列在这...
  • 最近用Bootstrap框架学着做了一个项目,用时3天,很是粗糙,不过每个模块讲解都很详细,项目模板、素材已经放到github,欢迎下载,试看 https://zouzhuo939.github.io/Bootstrap_3/ 项目分为7大块 前提知识: 在...
  • Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。 <div class="container" style="background: palegoldenrod"> 今天星期五 </div> <div class=...
  • 栅格系统 媒体查询 在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值。 小屏幕(平板,大于等于 768px) @media (min-width: @screen-sm-min) { ... } 中等屏幕...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,493
精华内容 597
关键字:

bootstrap栅格布局实例