Bootstrap全家桶整合大全集（更新中）

作者: 党云龙 | 来源:发表于2019-11-16 20:39 被阅读0次

我为什么需要Bootstrap全家桶

我们在做mvvm（前后端分离模式）开发的时候，一般会考虑使用vue全家桶。但是做mvc开发（不分离开发，通常适用于后端管理系统开发，或者没有两个页面还需要考虑seo的单页开发）再使用vue就不是那么合适了。

所以回过头来看，我们还是需要mvc模式的前端开发套路，需要bootstrap一套。bootstrap本身是基于jquery库开发的，所以jquery是必须先加载的。

全家桶都哪些？

组件名称	组件作用	文件
bootstrap	核心文件，包括ui和核心组件	bootstrap.css，bootstrap.js
jquery	核心文件，所有组件几乎都依赖于jquery	jquery.js
datetimepicker	时间选择器组件	bootstrap-datetimepicker.css，bootstrap-datetimepicker.js，bootstrap-datetimepicker.zh-CN.js
bootstrap-paginator	分页器组件	bootstrap-paginator.js
bootstrap-star-rating	星星评级组件	star-rating.css，star-rating.js
ztree	树状折叠菜单组件	bootstrapStyle.css，jquery.ztree.core.js，jquery.ztree.excheck.js，jquery.ztree.exedit.js
scojs	bootstrap增强组件，包括顶部下拉弹框提示等组件	scojs.css，sco.message.css，sco.message.js
bootstrapValidator	表单验证组件	bootstrapValidator.min.js
echarts	图表展示组件	echarts.js

引入页面实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>bootstrap全家桶终极整合</title>
        <!--css-->
        <!--bootstrap 核心样式表-->
        <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <!--datetimepicker 核心样式表 -->
        <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
        <!--bootstrap-star-rating 评级样式表-->
        <link href="https://cdn.bootcss.com/bootstrap-star-rating/4.0.2/css/star-rating.min.css" rel="stylesheet" media="screen">
        <!--soc.js bootstrop增强组件样式表-->
        <link href="https://cdn.bootcss.com/sco.js/1.1.0/css/scojs.css" rel="stylesheet" media="screen">
        <link href="https://cdn.bootcss.com/sco.js/1.1.0/css/sco.message.css" rel="stylesheet" media="screen">
        <!--ztree v3 树组件样式表-->
        <link href="https://cdn.bootcss.com/zTree.v3/3.5.40/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" media="screen">
        
        <!--js-->
        <!--jquery 3.3.7 核心组件-->
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js" charset="UTF-8"></script>
        <!--jquery-migrate jquery兼容性组件 解决ztree中的msie错误-->
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
        <!--bootstrap 核心组件-->
        <script type="text/javascript" src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <!--datetimepicker 时间选择器-->
        <!-- 时间选择器前置脚本 -->
        <script src="https://cdn.bootcss.com/moment.js/2.22.1/moment-with-locales.min.js"></script>
        <!-- 时间选择器核心脚本 -->
        <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
        <!--star-rating 评级组件-->
        <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-star-rating/4.0.2/js/star-rating.min.js" charset="UTF-8"></script>
        <!--echarts 图表组件-->
        <script src="https://cdn.bootcss.com/echarts/3.2.1/echarts.min.js"></script>
        <!--bootstrapvalidator 验证组件-->
        <script src="https://cdn.bootcss.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
        <!--sco bootstrap增强组件-->
        <script src="https://cdn.bootcss.com/sco.js/1.1.0/js/sco.message.js"></script>
        <!--ztree-->
        <script src="https://cdn.bootcss.com/zTree.v3/3.5.39/js/jquery.ztree.core.js"></script>
        <script src="https://cdn.bootcss.com/zTree.v3/3.5.39/js/jquery.ztree.excheck.js"></script>
        <script src="https://cdn.bootcss.com/zTree.v3/3.5.39/js/jquery.ztree.exedit.js"></script>
        <!--paginator 分页组件-->
        <script type="text/javascript" src="src/js/paginator/js/bootstrap-paginator.js" charset="UTF-8"></script>
    </head>
    <body>
        <!-- 时间选择器用法-->
        <!-- <div class="col-sm-6">
            <input type="text" id="datetime" />
        </div>
        <script>
            $("#datetime").datetimepicker({
                format: 'YYYY-MM-DD HH:mm',
                locale: moment.locale('zh-CN')
            });
        </script> -->
        <!-- 分页用法 -->
        <!-- <div>
            <table class="table table-bordered">
                <tr id="trhead">
                    <td>id</td>
                    <td>name</td>
                    <td>icon</td>
                    <td>k</td>
                    <td>d</td>
                    <td>a</td>
                    <td>tank</td>
                    <td>warrior</td>
                    <td>shooter</td>
                    <td>wizard</td>
                    <td>auxiliary</td>
                    <td>continuous</td>
                    <td>state</td>
                </tr>
            </table>
        </div>
        <div id="example" style="text-align:center">
            <ul id="pageLimit"></ul>
        </div>
        <style type="text/css">
            .imgicon {
                width: 40px;
                height: 40px;
            }
        </style>
        <script type="text/javascript">
            //生成html
            function Refresh(arr){
                var html = "";
                $.each(arr,function(index,items){
                    html+="<tr>"+
                    "<td>"+items.id+"</td>"+
                    "<td>"+items.name+"</td>"+
                    "<td><img src="+items.icon+" class='imgicon'></td>"+
                    "<td>"+items.k+"</td>"+
                    "<td>"+items.d+"</td>"+
                    "<td>"+items.a+"</td>"+
                    "<td>"+items.tank+"</td>"+
                    "<td>"+items.warrior+"</td>"+
                    "<td>"+items.shooter+"</td>"+
                    "<td>"+items.wizard+"</td>"+
                    "<td>"+items.auxiliary+"</td>"+
                    "<td>"+items.continuous+"</td>"+
                    "<td>"+items.state+"</td>"+
                    +"</tr>"
                })
                $('#trhead').after(html);
            }
            //获取分页
            function goPages(){
                $.ajax({
                    url: 'https://api.dangyunlong.com:3004/api/query',
                    type: 'GET',
                    data: {
                        page: 1
                    },
                    dataType: 'JSON',
                    success: function(data) {
                        //把获取到的内容放到html中
                        Refresh(data.data)
                        
                        //分页
                        //获取当前页数
                        var currentPage = data.currentPage;
                        //获取总页数
                        var totalPages = data.totalPages;   
                        //生成分页
                        $('#pageLimit').bootstrapPaginator({
                            currentPage: currentPage, //当前页。
                            totalPages: totalPages, //总页数。
                            size: "normal", //应该是页眉的大小。
                            bootstrapMajorVersion: 3, //bootstrap的版本要求。
                            alignment: "right",
                            numberOfPages: 5, //显示的页数
                            itemTexts: function(type, page, current) { //如下的代码是将页眉显示的中文显示我们自定义的中文。
                                switch (type) {
                                    case "first":
                                        return "首页";
                                    case "prev":
                                        return "上一页";
                                    case "next":
                                        return "下一页";
                                    case "last":
                                        return "末页";
                                    case "page":
                                        return page;
                                }
                            },
                            onPageClicked: function(event, originalEvent, type, page) { //给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
                                $.ajax({
                                    url: 'https://api.dangyunlong.com:3004/api/query',
                                    type: 'GET',
                                    data: {
                                        page: page
                                    },
                                    dataType: 'JSON',
                                    success: function(data) {
                                        //删除所有兄弟节点
                                        $("#trhead").nextAll().remove();
                                        Refresh(data.data)
                                    }
                                })
                            }
                        });
                    }
                })
            }
            //页面初始化的时候 执行一个获取分页
            goPages();
            //列表位置
            //https://api.dangyunlong.com:3004/api/query?page=1
        </script> -->
    </body>
</html>

一些常见问题（更新中）

1.bootstrap如何5等分?
因为bootstrap默认是12等份的栅格无法分成5等份所以要使用一些特殊的方法:

<style>
@media (min-width: 1200px) {
     .col-zdlg-2-5{
          float: left;
          width:20%;
     }
}

h2{
     font-family: "Microsoft Yahei";
     font-weight: 500;
     line-height: 1.1;
     color:#000;
}
.col-red-border{
     border:1px solid red;
}
</style>


<div class="container-fluid">
    <div class="rows">
          <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
               <h2>屏幕五等分</h2>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
               <h2>屏幕五等分</h2>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
               <h2>屏幕五等分</h2>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
               <h2>屏幕五等分</h2>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
               <h2>屏幕五等分</h2>
          </div>
    </div>
</div>

Bootstrap全家桶整合大全集（更新中）

我为什么需要Bootstrap全家桶

全家桶都哪些？

引入页面实例

一些常见问题（更新中）

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读