联通培训 老师教的 bootstrap row 里面都是12行不断的分割成小格子

最新推荐文章于 2022-05-29 11:05:39 发布
最新推荐文章于 2022-05-29 11:05:39 发布
阅读量208 收藏
点赞数
分类专栏： 博客 文章标签： 博客
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27327261/article/details/99116748
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎页</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style >
        *{margin:0;padding:0}
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div style="background: #F2F2F2;width:100%;height: 1000px;padding:30px;">
        <div class="row">
            <div class="col-md-9">
                <div class="row">
                    <div class="col-md-4">
                        <div style="background: #fff;width:100%;height: 100px;border-radius:5px;padding: 0px 15px 15px 0px;">

                        </div>
                    </div>
                    <div class="col-md-4">
                        <div style="background: #fff;width:100%;height: 100px;border-radius:5px;padding: 0px 15px 15px 15px;">

                        </div>
                    </div>
                    <div class="col-md-4">
                        <div style="background: #fff;width:100%;height: 100px;border-radius:5px;padding: 0px 0px 15px 15px;">

                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div style="background: #fff;width:100%;height:700px;border-radius:5px;margin: 30px 0px 15px 0px;">

                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="row">
                    <div class="col-md-12">
                        <div style="background: #fff;width:100%;height:400px;border-radius:5px;padding: 0px 0px 15px 15px;">

                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div style="background: #fff;width:100%;height:400px;border-radius:5px;margin: 30px 15px 15px 0px;">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/openTab.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">

</script>
</html>

 

 

 

 

 

 

 

 

 

 

 

 

*******************************************不用bootstrap很麻烦****************************************************************************

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>欢迎页</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <style >
        *{margin:0;padding:0}
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<div class="panel panel-default"  >
    <div style="background: #F2F2F2;width:100%;height: 1000px;  ">

        <div style=" width:69.5%;height: 1000px;display: inline-block; ">
            <div style=" width:100%;height: 200px;display: inline-block;">
                <div style="background: white;width:32%;height: 100px;display: inline-block; margin:50px 5px 20px 5px;border-radius:5px">
                    <div style=" width:29%;height: 100px; position: relative;  display: inline-block; ">
                        <img style="width:50px;height:50px;position: absolute;top:50%;left:50%;margin-top:-25px;margin-left: -25px ;" src="img/a1.jpg">
                    </div>
                    <div style=" width:68%;height: 70px; position: relative; display: inline-block; ">
                        <div style=" width:100%;height: 98px; position: absolute;top:50%;left:50%;margin-top:-50px;margin-left: -79px ;display: inline-block; ">
                            <p style="font-size:15px;color: #656865;">今日用户上线人数</p><br>
                            <span style="font-size:25px;color: #66CC00;"> 109</span>
                            <span style="font-size:15px;color: grey;">数量</span>
                        </div>
                    </div>
                </div>
                <div style="background: white;width:32%;height: 100px;display: inline-block; margin:50px 5px 20px 5px;border-radius:5px">
                    <div style=" width:29%;height: 100px; position: relative;  display: inline-block; ">
                        <img style="width:50px;height:50px;position: absolute;top:50%;left:50%;margin-top:-25px;margin-left: -25px ;" src="img/a1.jpg">
                    </div>
                    <div style=" width:68%;height: 80px; position: relative; display: inline-block; ">
                        <div style=" width:100%;height: 98px; position: absolute;top:50%;left:50%;margin-top:-50px;margin-left: -79px ;display: inline-block; ">
                            <p style="font-size:15px;color: #656865;">今日新发帖子数</p><br>
                            <span style="font-size:25px;color: red;">40</span>
                            <span style="font-size:15px;color: grey;">数量</span>
                        </div>
                    </div>
                </div>
                <div style="background: white;width:32%;height: 100px;display: inline-block; margin:50px 5px 20px 5px;border-radius:5px">
                    <div style=" width:29%;height: 100px; position: relative;  display: inline-block; ">
                        <img style="width:50px;height:50px;position: absolute;top:50%;left:50%;margin-top:-25px;margin-left: -25px ;" src="img/a1.jpg">
                    </div>
                    <div style=" width:68%;height: 80px; position: relative; display: inline-block; ">
                        <div style=" width:100%;height: 98px; position: absolute;top:50%;left:50%;margin-top:-50px;margin-left: -79px ;display: inline-block; ">
                            <p style="font-size:15px;color: #656865;">今日互动用户量</p><br>
                            <span style="font-size:25px;color: red;">200</span>
                            <span style="font-size:15px;color: grey;">数量</span>
                        </div>
                    </div>
                </div>
            </div>
            <div id="container_maqun" style="background: white;width:100%;height: 800px;display: inline-block; ">




            </div>
        </div>

        <div style="background: #F2F2F2;width:30%;height: 960px;display: inline-block;margin-top:40px; float: right">

            <div style="background:white;width:90%;height: 379px;display: inline-block;margin:10px 0 0 40px;border-radius:5px;">
                <p style="font-size:20px;text-align: center;margin-top:20px;">互动方式占比</p>
                <div id="container" style="height: 100%;"></div>
            </div>

            <div style="background: white;width:90%;height: 509px;display: inline-block;margin:0px 0 0 40px; border-radius:5px;">
                    <p style="font-size:20px;text-align: center;margin-top:20px;">互动方式占比</p>
                    <div id="container_pie" style="height: 100%;"></div>
            </div>
        </div>

    </div>

    <!--<div class="panel-heading">了解BootDo</div>  -->
    <!--    <div style="padding: 10px 0 20px 10px;">-->
    <!--        <h3>&nbsp;&nbsp;&nbsp;项目介绍</h3>-->
    <!--        <ul>-->
    <!--            <li>面向学习型的开源框架，简洁高效，减少过渡封装，展现技术本质</li>-->
    <!--            <li>Springboot作为基础框架，使用mybatis作为持久层框架</li>-->
    <!--            <li>使用官方推荐的thymeleaf做为模板引擎，shiro作为安全框架,主流技术，“一网打尽”</li>-->
    <!--            <li>极简配置，一键前后台代码生成</li>-->
    <!--        </ul>-->

    <!--        <h3>&nbsp;&nbsp;&nbsp;获取源码</h3>-->
    <!--        <ul>-->
    <!--            <li>Github地址：<a href="https://github.com/lcg0124/bootdo.git"-->
    <!--                            th:href="@{https://github.com/lcg0124/bootdo.git}" target="_blank">https://github.com/lcg0124/bootdo.git</a>-->
    <!--            </li>-->
    <!--            <li>Oschina地址：<a href="https://gitee.com/lcg0124/bootdo.git" target="_blank">https://gitee.com/lcg0124/bootdo.git</a>-->
    <!--            </li>-->
    <!--        </ul>-->

    <!--        <h3>&nbsp;&nbsp;&nbsp;官方QQ群</h3>-->
    <!--        <ul>-->
    <!--            <li>点击链接加入群聊【BootDo交流群】：<a href="https://jq.qq.com/?_wv=1027&k=5EYXfiZ">669039323</a></li>-->
    <!--            <li>点击链接加入群聊【BootDo交流二群】：<a href="https://jq.qq.com/?_wv=1027&k=5M659N4">614726589</a></li>-->
    <!--            <li>点击链接加入群聊【BootDo交流三群】：<a href="https://jq.qq.com/?_wv=1027&k=5tE3A9O">600801035</a></li>-->
    <!--            <li>点击链接加入群聊【CloudDo交流群】：<a href="https://jq.qq.com/?_wv=1027&k=5Zk12Xl">719741533</a></li>-->
    <!--        </ul>-->

    <!--        <button class="btn" οnclick="openPage('http://bootdo.com','bootdo.com')">访问bootdo官网(新打开tab页事例)</button>-->




</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/openTab.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series : [
            {
                name:'面积模式',
                type:'pie',
                radius : [10, 90],
                center : ['50%', '40%'],
                roseType : 'area',
                data:[
                    {value:30, name:'点赞'},
                    {value:20, name:'浏览'},
                    {value:15, name:'收藏'},
                    {value:25, name:'其他'},
                    {value:10, name:'评论'}
                ]
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>


<script type="text/javascript">
    var dom = document.getElementById("container_maqun");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    function randomData() {
        var value = 0;
        $.ajax({
            type : "GET",
            url : "http://localhost/wo/protal/getCount",
            async : false,
            error : function(request) {
                alert("Connection error");
            },
            success : function(data) {
                value = data;
            }
        });
        now = new Date(+now + oneSec);

        return {
            name: now.toString(),
            value: [
                now.getTime(),
                value
            ]
        }
    }

    var data = [];
    var now = +new Date();
    now = new Date(+now - 1000*1000);
    var oneSec = 1000;
    for (var i = 0; i < 1000; i++) {
        now = new Date(+now + oneSec);
        data.push([now.getTime(),0]);
    }

    option = {
        title: {
            text: '动态数据 + 时间坐标轴'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                var date = new Date(params.name);
                return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [{
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: data
        }]
    };

    setInterval(function () {

        for (var i = 0; i < 1; i++) {
            data.shift();
            data.push(randomData());
        }

        myChart.setOption({
            series: [{
                data: data
            }]
        });
    }, 1000);;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>


<script type="text/javascript">
    var dom_pie = document.getElementById("container_pie");
    var myChart_pie = echarts.init(dom_pie);

    var option_pie = null;

    var pieData = [{name: '技术',value: 35},{name: '工会11',value: 20},{name: '生活',value: 45}];

    option_pie = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series : [
            {
                name: '姓名',
                type: 'pie',
                radius : '55%',
                center: ['50%', '30%'],
                data: pieData,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };


    if (option_pie && typeof option_pie === "object") {
        myChart_pie.setOption(option_pie, true);
    }
</script>
</html>
qq_27327261
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap-table实现表格编辑
qq_35031883的博客
06-11 8174
bootstrap-table实现表格编辑 应用场景 点击单元格可编辑、点击行对行数据修改、列表可伸缩、支持数据下载。 一、 表格行内编辑 效果展示 编辑前 点击某个单元格数据 编辑完成后 2．实现过程 2.1 引入资源文件(其他基本需要文件略) 2.2 js里面初始化表格 2.3在js里面初始化表格的时候注册编辑保存的事件 参数field,row,oldValue,$el分...
Bootstrap-表格合并单元格
热门推荐
游海东的技术专栏
05-29 3万+
1、问题背景     利用Bootstrap设计表格，并且表格需要合并单元格2、实现源码 Bootstrap-表格合并单元格 body,html{ width: 99%; height: 98%; font-family: "微软雅黑"; font-size:
Bootstrap系列之表格（Tables）
老__L的博客
05-27 1万+
使用Bootstrap选择表样式的文档和示例(考虑到它们在JavaScript插件中普遍使用)。由于表在第三方小部件(如日历和日期选择器)上的广泛使用，我们将表设计为可选择的。只需将基类添加到任何，然后使用自定义样式或我们的各种包含的修饰类进行扩展。使用最基本的表标记，下面是Bootstrap中基于的表的样子。所有的表样式都在Bootstrap 4中继承，这意味着任何嵌套的表都将以与父表相同的方式设置样式。 效果如图：你也可以用将浅色文本在深色背景上的颜色反转。 效果如图：与表和暗表类似，使用修饰符类或使s
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
08-29
Bootstrap Table 中的 expandRow 和 collapseRow 方法 Bootstrap Table 是一个功能强大且灵活的表格插件，它提供了许多实用的方法来处理表格数据。今天，我们将详细介绍 Bootstrap Table 中的 expandRow 和 ...
bootstrap中文手册_bootstrap教程_bootstrap_
09-30
网格系统是Bootstrap的基础，它通过使用行(row)和列(column)的结构来实现灵活的响应式布局。开发者可以根据屏幕尺寸和设备类型，调整内容的排列方式，确保在任何设备上都能提供良好的用户体验。 在CSS样式方面，...
BootStrap table删除指定行的注意事项(笔记整理)
08-31
在前端开发中，Bootstrap Table是一种常用的、基于Bootstrap框架的jQuery插件，用于展示和操作表格数据。当需要在用户界面上动态地删除指定行时，可能会遇到一些挑战。以下是一些关于如何在Bootstrap Table中删除...
Bootstrap Studio教程.pdf
05-15
Bootstrap Studio是一款功能非常强大的网页设计软件，该软件最大的作用就是帮助用户设计和原型化网站，能够快速的建立一个响应式的网站，内置了大量的功能组件，用户通过拖放即可使用，大大提高了编写网站的便捷性，...
bootstrap-table 合并单元格
wbj16116的博客
01-18 8165
function initTable() { //先销毁表格 $('#cusTable').bootstrapTable('destroy'); //初始化表格,动态从服务器加载数据 $("#cusTable").bootstrapTable({ method: "post", //使用get请求到服务...
bootstrap 合并单元格
我是一只胖子丶的博客
04-24 5854
合并单元格有多种实现方式 ，本文主采用的是 在数据层合并，然后在展示层（bootstrap）实现合并 原理是根据有规律的排序数据然后在展示层根据数据行数 合并，这样的劣势是 数据一定要有规律 对于那些简单的需求的话 倒是可以用这种 有需要的朋友可以看我另一篇文章 >>> bootstrap 合并单元格之mergeCells属性合并 还有一种是比较灵活的 是事先...
bootstrapr表格父子框_亚马逊listing父子变体合并与拆分详细教程
weixin_35749796的博客
12-06 2515
跨境教授分享Listing的合并与拆分合并和拆分变体是亚马逊运营必备的一项操作，通过合并和拆分变体，能够更好的调整布局，达到一些运营的目的。下面来具体介绍一下如何合并和拆分变体。首先，我们来讲下如何将单独商品合并成父子商品？(使用批量表合并：针对有变体类目的批量模板。接下来我以加拿大站为大家展示怎么操作。)1)登录你们自己亚马逊后台，切换到语言状态“中文”。2)看到库存——批量上传商品...
【转载】bootstrapTable行内编辑的实现的两种方式
happy20009的博客
03-07 3万+
第一种方式：较为普遍的是使用bootstrap-table-edit的这个插件，这个在网上的资料甚多，具体的可以参考Dre--amer的文章【一点一滴Bootstrap】可编辑的表格。我也没实际用过，在此做个标记。第二种方式：是遇见一个人流泪的文章bootstrap-table 行内编辑简单实现。这个我用过还是很实用的，但是复杂的功能需要自己去扩展。...
bootstrap-table 动态合并行和列方法
吴灿烽的博客
04-21 2万+
用法：$("#table2").bootstrapTable({ url: "http://...", columns: [], onLoadSuccess: function (data) { mergeCells(data, "FDepName3", 1, $('#table2'));//行合并 ...
Bootstrap系列之卡片（Cards）
老__L的博客
05-29 5746
Bootstrap卡片提供了一个灵活的、可扩展的内容容器，具有多个变体和选项。卡片是一种灵活的、可扩展的内容容器。它包括页眉和页脚选项、各种各样的内容、背景颜色和强大的显示选项。如果你熟悉Bootstrap 3，卡片可以代替我们的旧面板、井和缩略图。与这些组件类似的功能可用作纸牌的修饰类。卡片使用尽可能少的标记和样式，但仍然设法提供大量的控制和定制。建立与flexbox，他们提供容易对齐和混合好与其他Bootstrap组件。默认情况下它们没有空白，因此需要时使用间距实用程序。下面是一个混合内容和固定宽度的基
Bootstrap 行使用的样式为row 列使用的col-md-数字 范围1-12
信天鸽博客
07-26 1万+
解决Bootstrap的row类，引起网页横向滚动条的问题。
Rain~的博客
04-27 1万+
在写网页的时候，采用了Bootstrap框架，在使用栅格布局的时候，在父标签中添加row类，发现引起网页出现横向滚动条的问题。 查看row类的css样式内容为： .row{ margin-left:15px; margin-right:15px; } 因此确定就是由于这两个样式因此的。 故重写row类的css样式，即 .row{ margin-left:0px; margin-
Bootstrap中row里面的div可以嵌套row吗
最新发布
06-08
在Bootstrap中，row是用于创建水平网格系统的基本元素之一，row中包含多个col（列），col可以用于创建具有不同宽度的内容区块。在Bootstrap的官方文档中，建议不要在row中嵌套另一个row，因为这样可能会导致布局出现...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值