精华内容
下载资源
问答
  • bootstrap 栅格

    2019-03-10 15:30:21
    css 运用栅格系统 制作的一个简易的网页 目前只有最基本的col-md-x;css 运用栅格系统 制作的一个简易的网页 目前只有最基本的col-md-x;css 运用栅格系统 制作的一个简易的网页 目前只有最基本的col-md-x;
  • bootstrap栅格

    2021-05-31 09:07:32
    本文主要介绍模仿bootstrap栅格系统,运用栅格系统的原理,自定义栅格系统。主要步骤有:全局设置、变量声明、容器的实现、行的设置、列的设置、测试、代码拆分。 提示:以下是本篇文章正文内容,下面案例可供...
    
    
    


    前言

    本文主要介绍模仿bootstrap的栅格系统,运用栅格系统的原理,自定义栅格系统。主要步骤有:全局设置、变量声明、容器的实现、行的设置、列的设置、测试、代码拆分。


    提示:以下是本篇文章正文内容,下面案例可供参考
    注意:本文所有样式设置的代码都使用less预处理语言

    一、全局设置

    1. 样式重置:引入重置样式文件可以到bootCDN官网上下载保存,添加链接描述,搜normalize就可以找到,然后复制链接,浏览器打开并保存文件,最后修改文件名为normalize.less。
    2. 清除浮动:
    .clearfix(){
      &:before,
      &:after{
        display: table;
        clear: both;
        content: '';
      }
    }
    
    1. 定义盒子大小
    *{
      box-sizing: border-box;
    }
    

    二、变量声明

    1. 屏幕阈值,大屏>=1200px 中屏>=992px 小屏>=768px 超小屏<768px
    2. container容器宽度,大屏=1170px 中屏=970px 小屏=750px 超小屏=auto
    3. 槽宽(列间距)=30px
    4. 总列数=12
      //屏幕阈值
    @screen-lg: 1200px;
    @screen-md: 992px;
    @screen-sm: 768px;
    
    //container容器宽度
    @container-lg-width: 1170px;
    @container-md-width: 970px;
    @container-sm-width: 750px;
    
    //槽宽
    @grid-gutter-width: 30px;
    
    //总列数
    @grid-columns: 12;
    

    注意:以上各个变量参数可以根据自己的需要自定义更改。


    三、行的实现

    1. 创建混合函数,用于设置容器的公共样式:居中、左右内边距为槽宽的一半。
    .container-common-style(){
      margin-right: auto;
      margin-left: auto;
      padding-left: @grid-gutter-width/2;//槽宽的一半
      padding-right: @grid-gutter-width/2;
    }
    
    1. 设置容器的样式
    /*容器的设置*/
    .make-container(){
      /*1. container容器*/
      .container {
        //公共样式
        .container-common-style();
        //清除浮动
        .clearfix();
        /*实现不同屏幕的container容器的样式控制*/
        //小屏
        @media (min-width: @screen-sm){
          width: @container-sm-width;
        }
        //中屏
        @media (min-width: @screen-md){
          width: @container-md-width;
        }
        //大屏
        @media (min-width: @screen-lg){
          width: @container-lg-width;
        }
      }
    
      /*2. container-fluid容器*/
      .container-fluid{
        //公共样式
        .container-common-style();
        //清除浮动
        .clearfix();
      }
    }
    .make-container();
    

    四、列的实现

    1. 设置公共样式
    /*设置公共样式*/
    .make-grid-columns(){
      //公共样式,1,2,3,4,5.6,7,8,9,10,11,12
      //创建混合函数,初始化生成第一列选择器,并在函数中调用选择器列表拼接的函数
      .col(@index){
        //此时index=1,调用拼接函数
        //初始化selector的值,生成第一列选择器.col-xs-index, .col-sm-index, .col-md-index, .col-lg-index
        @selector:~'.col-xs-@{index},.col-sm-@{index},.col-md-@{index},.col-lg-@{index}';
        //调用拼接选择器列表的混合函数,生成完整的选择器列表
        .col(@index+1,@selector);
      }
      .col(1);//作用相当于设置变量@index=1,生成第一列选择器
    
      //创建拼接选择器列表的混合函数,参数:index,之前拼接好的列表list
      .col(@index,@list) when(@index<=@grid-columns){
        //当index小于总列数时,执行拼接,将新的index拼接到list后面,更新list
        @selector: ~'@{list},.clo-xs-@{index},.col-sm-@{index},.col-md-@{index},.col-lg-@{index}';
        //循环调用,将下一个index拼接到list
        .col(@index+1,@selector);
      }
    
      //判断选择器列表是否拼接完成,拼接完成后,开始设置公共样式
      .col(@index,@list) when(@index>@grid-columns){
        //当index大于总列数时,list已经拼接完毕,设置列元素的公共样式,
        @{list}{
          padding-left: @grid-gutter-width/2;
          padding-right: @grid-gutter-width/2;
          position: relative;
          float: left;
          min-height: 1px;
        }
      }
    
    }
    .make-grid-columns();
    
    1. 设置列的宽度和列偏移
    • 创建设置列宽的函数
    //创建设置列宽的函数,参数为屏幕类型
    .make-column-width(@type){
      //创建函数,生成选择器并设置宽度
      .col(@index) when (@index<=@grid-columns){
        //生成选择器
        @selector:~'.col-@{type}-@{index}';
        //设置样式
        @{selector}{
          //定义变量,计算列的宽度
          @w:@index/@grid-columns*100;
          //设置宽度
          width: ~'@{w}%';
          //或者
          //width: percentage(@index/@grid-columns);
        }
        //递归调用,分别设置不同的列宽
        .col(@index+1);
      }
      .col(1);//传参,进行选择器的初始化
    }
    
    • 创建设置列偏移的函数
    //创建设置列偏移的函数,参数为屏幕类型
    .make-column-offset(@type){
      //创建函数,生成选择器并设置列偏移
      .col(@index) when (@index<=@grid-columns){
        //生成选择器
        @selector:~'.col-@{type}-offset-@{index}';
        //设置列偏移
        @{selector}{
          margin-left: percentage(@index/@grid-columns);
        }
        //递归调用
        .col(@index+1);
      }
      .col(1);
    }
    
    • 设置列宽和列偏移
    /*超小屏*/
    .make-column-width(xs);
    .make-column-offset(xs);
    /*小屏*/
    @media (min-width: @screen-sm) {
      /*列宽*/
      .make-column-width(sm);
      /*列偏移*/
      .make-column-offset(sm);
    }
    /*中屏*/
    @media (min-width: @screen-md) {
      .make-column-width(md);
      .make-column-offset(md);
    }
    /*大屏*/
    @media (min-width: @screen-lg) {
      .make-column-width(lg);
      .make-column-offset(lg);
    }
    

    五、测试

    提示:将上面的样式测试的less文件使用koala工具编译成css文件之后,引入测试文件进行测试。

    • 测试:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的栅格</title>
        <link rel="stylesheet" href="./css/grid.css">
        <style>
            .container{
                /*height: 100px;*/
                background-color: pink;
            }
            .container-fluid{
                height: 100px;
                background-color: skyblue;
            }
            .gap{
                height: 20px;
            }
            [class*=col]{
                margin-bottom: 15px;
            }
        </style>
        <script src="https://cdn.bootcdn.net/ajax/libs/holder/2.9.7/holder.min.js"></script>
    </head>
    <body>
    <div class="container"></div>
    <div class="container-fluid"></div>
    <div class="gap"></div>
    <div class="container"><img src="holder.js/100px100?bg=#90a" alt=""> </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img src="holder.js/100px100?text=书籍" alt=""></div>
        </div>
    </div>
    </body>
    </html>
    

    上面的代码中引入了bootCDN官网中的图片占位插件,网址:链接,搜holder,出来的第一个插件就是图片占位插件,然后再在测试中需要用到图片的地方设置图片的src路径地址为:'holder.js/100px100’即可。

    六、代码拆分、测试

    为了模仿的更像一点,我们可以参照bootstrap的思路,将样式设置代码拆分成几个文件,然后再在一个文件里面统一引入。

    1. 样式重置:normalize.less
    2. 全局设置:global.less
    //清除浮动
    .clearfix(){
      &:before,
      &:after{
        display: table;
        clear: both;
        content: '';
      }
    }
    //盒子大小
    *{
      box-sizing: border-box;
    }
    
    1. 变量声明:variable.less
    /*
    变量声明:
      1. 屏幕阈值,大屏>=1200px 中屏>=992px 小屏>=768px 超小屏<768px
      2. container容器宽度,大屏=1170px 中屏=970px 小屏=750px 超小屏=auto
      3. 槽宽(列间距)=30px
      4. 总列数=12
    */
    //屏幕阈值
    @screen-lg: 1200px;
    @screen-md: 992px;
    @screen-sm: 768px;
    
    //container容器宽度
    @container-lg-width: 1170px;
    @container-md-width: 970px;
    @container-sm-width: 750px;
    
    //槽宽
    @grid-gutter-width: 30px;
    
    //总列数
    @grid-columns: 12;
    
    1. 混合函数:mixins.less,混合函数这里因为后面还会有其他的函数文件,所以将设置栅格的函数都封装到了grid.less文件里,然后打包到mixins文件夹中,再在总目录下的mixins.less文件中引入
    @import "mixins/grid";
    
    1. 实现栅格:grid.less,在总目录下,将上面有关栅格实现的调用代码封装到grid.less文件中
    
    /*栅格的实现*/
    .make-container();
    
    
    .make-row();
    
    
    .make-grid-columns();
    
    /*媒体查询阶段*/
    /*超小屏*/
    .make-column-width(xs);
    .make-column-offset(xs);
    /*小屏*/
    @media (min-width: @screen-sm) {
      /*列宽*/
      .make-column-width(sm);
      /*列偏移*/
      .make-column-offset(sm);
    }
    /*中屏*/
    @media (min-width: @screen-md) {
      .make-column-width(md);
      .make-column-offset(md);
    }
    /*大屏*/
    @media (min-width: @screen-lg) {
      .make-column-width(lg);
      .make-column-offset(lg);
    }
    
    
    1. 统一:bootstrap.less
    //样式重置
    @import "normalize";
    //全局
    @import "global";
    //变量
    @import "variable";
    //函数
    @import "minxins";
    //执行
    @import "grid";
    
    1. 测试:与前面的测试代码一样,不同的是这里引入的bootstrap.less编译后的css文件。

    (全文完)

    展开全文
  • Bootstrap 栅格

    2018-12-20 08:59:41
    浏览器宽度 代码 大屏幕(&amp;gt;=1200px) .col-lg- 中等屏幕(&amp;gt;=992px) .col-md- 小屏幕(&amp;gt;=768px) .col-sm- 超小屏幕(&amp;lt;768px) ...div
    浏览器宽度 代码
    大屏幕(>=1200px) .col-lg-
    中等屏幕(>=992px) .col-md-
    小屏幕(>=768px) .col-sm-
    超小屏幕(<768px) .col-xs-

    向上兼容 、默认分为12格

    <div class="container">
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
        <div class="col-lg-1 col-md-2 col-sm-3 col-xs-6">1</div>
    </div>
    
    展开全文
  • Bootstrap栅格系统.pptx

    2021-03-10 13:03:49
    Bootstrap栅格系统
  • Bootstrap栅格源码.zip

    2019-11-18 10:14:24
    Bootstrap栅格源码
  • 浅析BootStrap栅格系统

    2020-09-02 05:45:41
    主要介绍了浅析BootStrap栅格系统的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
  • 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栅格系统,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了Bootstrap栅格系统学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 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,来自 Twitter,是目前最受欢迎的前端框架。本文给大家介绍BootStrap 栅格系统的相关资料,需要的朋友可以参考下
  • Bootstrap 栅格系统

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

空空如也

空空如也

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

bootstrap栅格