仪表板面板/盒子设计

Question

我想用简单的HTML / JS / CSS格式创建盒子设计，就像在link

中制作的那样

链接中显示的顶部数字面板是我需要创建的，它必须是动态的。

目前，我只有一个带有2个单元格的HTML基本表格，并且数字会根据日期选择器和下拉列表不断变化。我的数据以CSV的形式连接（使用d3.csv）

使用动态数字构建某个面板的方法是什么？我应该使用twitter bootstrap，dashing等吗？ 我不能使用框架/服务器，希望以基本的HTML / JS / CSS格式进行。

非常感谢任何帮助

更新：

HTML代码：

<div id="page-wrapper">

            <div class="container-fluid">

                <h1>
                    <img src="images/header.png" alt= " This is header! "height = "100px"; width ="1350px">
                </h1>

                <p>From date : </p>
                <input id="StartDate" type="text" value="09/11/2015" name="StartDate">
                <p>To Date : </p>
                <input id="EndDate" class="datepicker" type="text" value="15/11/2015" name="EndDate">



                <div class="row">
                            <div class="col-lg-3 col-md-6">
                                <div class="panel panel-primary">
                                    <div class="panel-heading">
                                        <div class="row">
                                            <div class="col-xs-3">
                                                <i class="fa fa-comments fa-5x"></i>
                                            </div>
                                            <div class="col-xs-9 text-right">
                                                <div class="box-text">Customers Targeted</div>

                                            </div>
                                            <div class="huge" id="cc">26</div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="panel panel-green">
                                    <div class="panel-heading">
                                        <div class="row">
                                            <div class="col-xs-3">
                                                <i class="fa fa-tasks fa-5x"></i>
                                            </div>
                                            <div class="col-xs-9 text-right">
                                                <div class="huge" id="rr">12</div>
                                                <div>Recharge Revenue Increment ($)</div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="panel panel-yellow">
                                    <div class="panel-heading">
                                        <div class="row">
                                            <div class="col-xs-3">
                                                <i class="fa fa-shopping-cart fa-5x"></i>
                                            </div>
                                            <div class="col-xs-9 text-right">
                                                <div class="huge">124</div>
                                                <div>New Orders!</div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="panel panel-red">
                                    <div class="panel-heading">
                                        <div class="row">
                                            <div class="col-xs-3">
                                                <i class="fa fa-support fa-5x"></i>
                                            </div>
                                            <div class="col-xs-9 text-right">
                                                <div class="huge">13</div>
                                                <div>Support Tickets!</div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <!-- /.row -->


                    </div>

                </div>

我制作了一个类似this的面板（盒子） （查看数字变化的方框的顶部面板）

现在，我已经理解了这个过程，并希望用我自己的CSS设计一些东西（之前是twitter bootstrap和多个css），我该怎么做呢？