精华内容
下载资源
问答
  • Bootstrap 栅格系统

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

    目录
    1、简介

    2、栅格选项

    3、列偏移

    4、嵌套列

    5、列排序

    6、具体实例

    7、效果

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

    2、栅格选项
    bootstrap3.x使用了四种栅格选项来形成栅格系统,这四种选项在官网上的介绍如下图,很多人不理解,这里跟大家详解一下四种栅格选项之间的区别,其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项,我们暂且以前缀命名这四种栅格选项,他们分别是col-xs、col-sm、col-md、col-lg,(lg是large的缩写,md是medium的缩写,sm是small的缩写,xs是maxsmall的缩写。)这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。

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

    3、列偏移
    使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。例如,.col-md-offset-4将.col-md-4向右移动了4个列的宽度。

    4、嵌套列
    为了使用内置的栅格将内容嵌套,通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12

    5、列排序
    通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。

    6、具体实例

    <%@ page language="java" pageEncoding="UTF-8"%>
    <%
        String path = request.getContextPath();
    %>
    <!DOCTYPE html>
    <html lang="zh-cn">
        <head>
            <title>栅格</title>
            <meta content="IE=edge" http-equiv="X-UA-Compatible">
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <meta http-equiv="Content-Language" content="zh-cn" />
            <meta name="author" content="" />
            <meta name="Copyright" content="" />
    
            <meta http-equiv="pragma" content="no-cache">
            <meta http-equiv="cache-control" content="no-cache">
            <meta http-equiv="expires" content="0">
    
            <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
            <meta http-equiv="description" content="This is my page">
            <jsp:include page="/demo/base/js_bootstrap.jsp" />
            <style type="text/css">
            .show-grid [class ^="col-"] {
                padding-top: 10px;
                padding-bottom: 10px;
                background-color: #eee;
                border: 1px solid #ddd;
                background-color: rgba(86, 61, 124, .15);
                border: 1px solid rgba(86, 61, 124, .2);
            }
            </style>
            <script type="text/javascript">
            $(function(){
            });
            </script>
        </head>
        <body>
            <b>col-lg-*用法</b>  
            <br/> 
            <div class="row show-grid">
              <div class="col-lg-8">.col-lg-8</div>
              <div class="col-lg-4">.col-lg-4</div>
            </div>
            <br/>         
            <b>col-md-*用法</b>
            <div class="row show-grid">
              <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>
            <br/> 
            <div class="row show-grid">
              <div class="col-md-8">.col-md-8</div>
              <div class="col-md-4">.col-md-4</div>
            </div>
            <br/> 
            <b>col-sm-*用法</b>
            <div class="row show-grid">
              <div class="col-sm-8">.col-sm-8</div>
              <div class="col-sm-4">.col-sm-4</div>
            </div>
            <br/>             
            <b>col-xs-*用法</b>
            <div class="row show-grid">
              <div class="col-xs-8">.col-xs-8</div>
              <div class="col-xs-4">.col-xs-4</div>
            </div>    
            <br/>     
            <b>列偏移: col-md-offset-*</b>
            <div class="row show-grid">
              <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 show-grid">
              <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 show-grid">
              <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
            </div>
            <br/>     
            <b>嵌套列: 嵌套row所包含的列加起来应该等于12</b>
            <div class="row show-grid">
                <div class="col-md-9">
                    Level 1: .col-md-9
                    <div class="row show-grid">
                        <div class="col-md-6">Level 2: .col-md-6</div>
                        <div class="col-md-6">Level 2: .col-md-6</div>
                    </div>
                </div>
            </div>
            <br/>     
            <b>列排序: .col-md-push-*和.col-md-pull-*</b>    
            <div class="row show-grid">
              <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
              <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
            </div>        
        </body>
    </html>

    7、效果



    展开全文
  • Bootstrap栅格系统

    2019-09-24 07:12:08
    这些布局方法有Bootstrap栅格系统、圣杯布局、负边距布局。 今天先讲讲Bootstrap栅格系统Bootstrap栅格系统: Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的...

    在学习前端的过程中,以前的布局都是通过css里面的position或者margin来调整布局。最近学习了几种布局方法。

    这些布局方法有Bootstrap栅格系统、圣杯布局、负边距布局。

    今天先讲讲Bootstrap栅格系统。

    Bootstrap栅格系统:

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

    简介:栅格系统用于通过一系列的行(row)与列(column)的组合创建页面布局,你的内容就可以放入建好的布局

    中。下面就介绍以下Bootstrap栅格系统的工作原理:

    1. “行(row必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。

    2.使用行(row在水平方向创建一组列(column

    3.你的内容应当放置于列(column内,而且,只有列(column可以作为行(row的直接子元素。

    4.类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。

    5.通过设置padding从而创建列(column之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。

    6.栅格系统中的列是通过指定112的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。

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

    栅格选项:

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

     

    栅格class在屏幕宽度大于或等于阀值的设备上起作用,并且将针对小屏幕设备所设置的class覆盖掉。因此,对任何一个元素应用任何.col-md-class将不仅作用于中等尺寸的屏幕,还将作用于大屏幕设备(如果没有设置.col-lg-class的话)

     

    以下是用Bootstrap做的一个简单的布局:

     

     1 <body>
     2     <div class="container">
     3         <div class="row r1">
     4             顶部内容
     5         </div>
     6         <div class="row r2">
     7             <div class="col-xs-5 col-xs-offset-4 left">
     8                 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容
     9                 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容 左边内容
    10 
    11             </div>
    12             <div class="col-xs-3 right">
    13                 右边内容
    14             </div>
    15         </div>
    16         <div class="row r3">
    17             底部内容
    18         </div>
    19     </div>
    20 </body>
    View Code

     

    如上,一行分成12块来分布,col-xs-5就占了5块。可以得出如果想要得到3个等宽的列就可以用三个.col-xs-4来创建。

     

    列偏移:

     

    上面的布局还可以用列偏移来调整位置

     

    初始位置:

    1. 使用.col-xs-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin。如,.col-xs-offset-4.col-xs-5向右移动了4个列的宽度。这个div移动后面的也要你跟着移动。但是前面不受影响。

    效果图如下:

    嵌套列

    为了使用内置的栅格将内容嵌套,通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。嵌套row所包含的列加起来应该等于12

    代码如下:

     

     1 <div class="col-xs-4 right">
     2                 右边内容
     3                 <div class="row r2_1">
     4                     <div class="col-xs-5 left2">
     5                         右边的左部分
     6                     </div>
     7                     <div class="col-xs-7 right2">
     8                         右边的右部分
     9                     </div>
    10                 </div>
    11             </div>
    View Code

     

    效果图如下:

    列排序

    1.向右移动还可以用.col-xs-push-4,但是就只移动这个div,后面的没有影响。

    代码:<div class="col-xs-8 col-xs-push-4  left">

    效果图:

    把右边部分移到左边如下:

    <div class="col-xs-8 col-xs-push-4  left">

    <div class="col-xs-4 col-xs-pull-8 right">

    效果图:

    1. 向左移动用.col-xs-pull-4.但是就只移动这个div,后面的没有影响。

    代码:<div class="col-xs-8 col-xs-pull-4  left">

    效果图如下:

    bootstrap栅格系统就写这些了,下一篇总结圣杯布局。

     

     

     

     

    转载于:https://www.cnblogs.com/renshengrucha/p/4529034.html

    展开全文
  • bootstrap栅格系统

    2017-12-15 15:18:58
    利用bootstrap栅格系统编写input、select、textarea、日历等 一、bootstrap栅格系统 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。 Bootstrap ...

    利用bootstrap栅格系统编写input、select、textarea、日历等

    一、bootstrap栅格系统

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

    Bootstrap 栅格系统的工作原理:
    “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。通过“行(row)”在水平方向创建一组“列(column)”。


    二、案例

    由于本人工作中经常接触到表格表单之类的页面,所以下面案例中以固定宽度(min-width:1000px;)来编写代码,实现的效果并不是响应式的,童鞋们看仔细了。代码及效果图如下:

    代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>bootstrap栅格系统案例</title>
    		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
    		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-datetimepicker.min.css"/>
    		
    		
    		<!--umeditor  -->
    		<link href="js/umeditor1_2_2-utf8-net/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    		<script type="text/javascript" src="js/umeditor1_2_2-utf8-net/third-party/jquery.min.js"></script>
    		<script type="text/javascript" charset="utf-8"	src="js/umeditor1_2_2-utf8-net/umeditor.config.js"></script>
    		<script type="text/javascript" charset="utf-8" src="js/umeditor1_2_2-utf8-net/umeditor.min.js"></script>
    		<script type="text/javascript"	src="js/umeditor1_2_2-utf8-net/lang/zh-cn/zh-cn.js"></script>
    
    		<style type="text/css">
    			.BootstrapDemo {
    				padding: 20px;
    				min-width: 1000px;
    			}
    			.container .row {
    				margin-bottom: 10px;
    			}
    			.container .row label {
    				line-height: 30px;
    				font-weight: normal;
    			}
    			.container .row input,
    			.container .row select {
    				height: 30px;
    				line-height: 30px;
    			}
    			.container .row input,
    			.container .row select,
    			.container .row textarea {
    				margin-left: 0px;
    				width: 25%;
    				padding: 3px;
    			}
    			.must {
    				color: #FF0000;
    				font-size: 15px;
    				margin-right: 5px;
    			}
    			.BootstrapDemo .edui-container .edui-editor-body {
    				overflow-y: auto;height: 200px;z-index: 999999;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="container BootstrapDemo">
    			<div class="row">
    				<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">
    					<span class="must">*</span>姓名 : 
    				</label>
    				<input type="text" class="col-xs-4 col-sm-4" id='' title="姓名" />
    				<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">
    					<span class="must">*</span>联系方式 : 
    				</label>
    				<input type="text" class="col-xs-4 col-sm-4" id='' title="联系方式" />
    			</div>
    			<div class="row">
    				<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">姓名 : </label>
    				<input type="text" class="col-xs-4 col-sm-4" id='' title="姓名" />
    				<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">性别 : </label>
    				<select name="" class="col-xs-4 col-sm-4">
    					<option value="">男</option>
    					<option value="">女</option>
    				</select>
    			</div>
    			<div class="row">
    				<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">日期 : </label>
    				<div class="col-xs-4 col-sm-4" style="padding:0px;float:left;width:25%;">
    					<div class="input-group date form_date">
    						<input class="form-control data-control date-from" size="100" type="text" 
    							style="padding:3px;width:100%" id='' value="" title="日期" >
    						<span class="input-group-addon">
    							<span class="glyphicon glyphicon-th"></span>
    						</span>
    					</div>
    				</div>
    				<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">性别 : </label>
    				<div  class="col-xs-4 col-sm-4" style="margin-top: 5px;padding: 0;">
    					<input type="radio" class="col-xs-1 col-sm-1" checked="checked" id='radio1' title="男" 
    						style="width: 15px;margin: -5px 5px 0 0;"/>
    						<span style="display: inline-block;float: left;">男</span>
    					<input type="radio" class="col-xs-1 col-sm-1" id='radio2' title="女" 
    						style="width: 15px;margin: -5px 5px 0 20px;"/>
    						<span style="display: inline-block;float: left;">女</span>
    				</div>
    			</div>
    			
    			<div class="row">
    				<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">数量1 :</label>
    				<input type="text" class="col-xs-2 col-sm-2" id='' title="数量1" style="margin-left:0px;width:11.2%;"/>
    				<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">数量2 : </label>
    				<input type="text" class="col-xs-2 col-sm-2" id='' title="数量2" style="margin-left:0px;width:11.2%;"/>
    				<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">数量3 : </label>
    				<input type="text" class="col-xs-2 col-sm-2" id='' title="数量3" style="margin-left:0px;width:11.2%;"/>
    			</div>
    			<div class="row">
    				<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">地址 :</label>
    				<input type="text" class="col-xs-4 col-sm-4" style="width: 67%;" id=''  title="地址" />
    			</div>
    			<div class="row">
    				<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">备注 :</label>
    				<textarea class="col-xs-4 col-sm-4" style="width: 67%;height: 80px;padding: 3px;" title="备注" ></textarea>
    			</div>
    			
    			
    			<!--利用百度富文本编辑器-->
    			<div class="row">
    				<label for="" class="col-xs-2 col-sm-2" style="text-align: right;">备注:</label>
    				<div class="col-xs-10 col-sm-10 "  style="width: 67.5%;height: 200px;padding: 3px;" >
    					<script type="text/plain" id="REMARK" style="width: 100%;height: 200px; text-align: left"></script>
    				</div>
    			</div>
    		</div>
    		
    		
    		
    		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="bootstrap/js/bootstrap-datetimepicker.min.js" type="text/javascript" charset="utf-8"></script>
    		<script	src="bootstrap/js/bootstrap-datetimepicker.fr.js" type="text/javascript" charset="utf-8"></script>
    		<script	src="bootstrap/js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript" charset="utf-8"></script>
    		
    		<script type="text/javascript">
    			$(function(){
    				
    				//实例化编辑器
    				var um1 = UM.getEditor('REMARK');
    				
    				//日历
    				$('.form_date').datetimepicker({
    					language: 'zh-CN', //显示
    					format: 'yyyy-mm-dd hh:ii:ss', //显示格式年-月-日
    					minView: 0, //设置只显示到月份
    			        weekStart: 0,//一周从周日开始
    			        todayBtn:  1,//显示今日按钮
    					autoclose: 1,//选中自动关闭
    					todayHighlight: 1,//高亮当前日期
    					startView: 2,//0 or 'hour' 为小时视图;
    								 //1 or 'day' 为天视图;
    								 //2 or 'month' 为月视图(为默认值);
    							     //3 or 'year'  为年视图;
    							     //4 or 'decade' 为十年视图
    					minView: 2,
    					forceParse: 0//当选择器关闭的时候,是否强制解析输入框中的值。
    			    });
    			    $("input[type='radio']").click(function(){
    			    	$(this).attr("checked","checked").siblings().removeAttr("checked");
    			    });
    			    
    
    			});
    		</script>
    
    	</body>
    </html>

    效果图:


    备注我用了两种方法写的,一种是textarea,另一种是百度富文本编辑器,大家可以根据自己的需要来选择,代码仅供参考。

    bootstrap栅格系统详细使用请参考:https://v3.bootcss.com/css/#grid

    展开全文
  • bootstrap 栅格系统

    千次阅读 2016-02-16 21:57:43
    bootstrap栅格系统 官方文档:bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的minxin用于...
    bootstrap栅格系统
    官方文档:bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的minxin用于生成更具语义的布局。
    个人理解:bootstrap栅格系统通过提供预定义的类来对html元素进行组装展示,开发者只需要按照bootstrap定义的规则,使用相应的类名来对html dom元素装饰,从而达到开发者相应的布局,开发者不用自己在写css样式,只需要使用预定的css样式组装即可。
    bootstrap栅格系统的工作原理:
    1 “行(row)“必须包含在.container(固定宽度)或.container-fluid(100%宽度)中,以便为其赋予合适的排列(aligment)和内部(padding).
    2 通过"行(row)“在水平方向创建一组"列(column)”。
    3 你的内容应到放置于“列(column)”内,并且只有”列(column)“可以作为“行(row)”的直接子元素。
    4 类似.row和.col-xs-4这种预定义的类,可以用来创建栅格布局。bootstrap远吗中定义的mixin也可以用来创建语义化的布局。
    5 通过为“列(column)”设置padding属性,从而创建列与列之间的间隔。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding。
    6 负值的margin使得元素向外突出。在栅格列中的内容排成一行。
    7 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。
    8 如果一“行(row)”中包含了的"列(column)“大于12,多余的”列(column)"所在的元素将被作为一个整体另起一行排列。
    9 栅格类适用于屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类。因此在元素上应用任何.col-md-*栅格类适用于屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖栅格类。一次在元素上应用任何.col-lg-*不存在,也影响大屏幕设备。(这个比较绕口,大致意思就是说当在大屏幕上的dom元素应用类.col-lg-*时,同时应用了类col-md-*,那么当对页面大小变更时,当达到了col-md的屏幕标准时,就会使用col-md的样式,而不用col-lg的样式了)
    栅格系统通过div实现table一样的表格,流式布局,嵌套栅格,重置栅格,偏移栅格等。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html lang="zh-cn">
      <head>
        <title>grid.html</title>
    	<meta charset="UTF-8"/>
    	<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"/>
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
        <style>
           .row{
             margin-bottom:20px;
           }
           .row .row {
              margin-top:10px;
              margin-bottom:0;
           }
           [class*="col-"] {
               padding-top:15px;
               padding-bottom:15px;
               background-color:#eee;
               background-color:rgba(86,51,124,.15);
               border:1px solid #ddd;
           }
        </style>
      </head>
      <body>
        <div class="container">
            <div class="row">
            <div class="col-sm-5 col-md-6">
            col-sm-5 col-sm-6
            <div class="row">
               <div class="col-md-10 col-sm-6">
                  level2: col-xs-8 col-sm-6
               </div>
            </div>
            </div>
            <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">col-sm-5 col-sm-6</div>
            </div>
        </div>
        <div class="container">
            <div class="row">
            <div class="col-md-9 col-md-push-3">col-md-9 col-md-push-3</div>
            <div class="col-md-3 col-md-pull-9">col-md-3 col-md-pull-9</div>
        </div>
        </div>
      </body>
    </html>
    


    展开全文
  • Bootstrap栅格系统.pptx

    2021-03-10 13:03:49
    Bootstrap栅格系统

空空如也

空空如也

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

bootstrap栅格系统