使用main_container为模板创建导航栏和侧边栏

时间:2016-03-17 13:33:49

标签: html css twitter-bootstrap

有时我会使用另一个仪表板模板,例如adminLTE。但现在,我想自己创造。所以,我正在基于这个bootsnip_link的bootstrap教程 。我将为我的app集成这个布局。这是本教程的开发。

<div class="container-fluid">
<div class="main-content">

    <div class="container-fluid" style="margin-top: 20px;">  
        <div class="row">
            <div class="col-sm-4 col-md-3 sidebar">
                <div class="mini-submenu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </div>

                <div class="list-group">
                    <span href="#" class="list-group-item active">
                        Submenu
                        <span class="pull-right" id="slide-submenu">
                            <i class="fa fa-times"></i>
                        </span>
                    </span>
                    <a href="#" class="list-group-item">
                        <i class="fa fa-comment-o"></i> Lorem ipsum
                    </a>
                    <a href="#" class="list-group-item">
                        <i class="fa fa-search"></i> Lorem ipsum
                    </a>
                    <a href="#" class="list-group-item">
                        <i class="fa fa-user"></i> Lorem ipsum
                    </a>
                    <a href="#" class="list-group-item">
                        <i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
                    </a>
                    <a href="#" class="list-group-item">
                        <i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
                    </a>
                    <a href="#" class="list-group-item">
                        <i class="fa fa-envelope"></i> Lorem ipsum
                    </a>
                </div>        
            </div>
        </div>


        <div class="row">
            <div class="col-lg-12">
                <a href="http://[::1]/develop_tresnamuda/admin/groups/create" class="btn btn-primary">Create group</a>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12" style="margin-top: 10px;">
                <table class="table table-hover table-bordered table-condensed table-striped"><tr><td>admin</td><td>Administrator</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/1"><span class="glyphicon glyphicon-pencil"></span></a></td></tr><tr><td>managing_director</td><td>Grup untuk Bapak MD</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/19"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/19" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_finance</td><td>Ibu, Rusman</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/20"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/20" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_com_ops</td><td>Hendrik Lengkong</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/21"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/21" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_armada</td><td>Capt Lengkong</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/22"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/22" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_operation</td><td>Grup untuk Bapak Hasan Kamal</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/23"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/23" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_armada</td><td>Grup untuk Bapak Sukardi</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/24"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/24" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_operasi</td><td>Nano, Sitor</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/25"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/25" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_accounting</td><td>Anwar Taufik</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/26"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/26" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_audit</td><td>Awal</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/27"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/27" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_marketing</td><td>Srie, Agnes, Lia, Netty, Olive</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/29"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/29" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_sales</td><td>Ullie</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/30"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/30" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_eskport</td><td>Steven</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/31"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/31" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_import</td><td>Ardan</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/32"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/32" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_inventory</td><td>Bambang</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/33"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/33" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_persum</td><td>Deddy</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/34"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/34" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_billing</td><td>Joko</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/35"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/35" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_impor</td><td>Fatah</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/36"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/36" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_purchasing</td><td>Dahely</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/37"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/37" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_messenger</td><td>Diding</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/38"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/38" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr></table>  </div>
        </div>
    </div>    
 </div>

<footer class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <p class="navbar-text pull-left">Say Hi </p>
    <a class="navbar-btn btn-danger btn pull-right"> Call Us on : 401</a>
  </div>
</footer>

我的问题是,如何让侧边栏仍然在屏幕的左侧,另一个主要内容的html就在右侧。我知道引导程序有一个col-offset。 任何帮助它如此欣赏。

1 个答案:

答案 0 :(得分:0)

在这里,有太多行,并且将内容分成新行而不是旁边的相同行。

<div class="container-fluid">
<div class="main-content">

    <div class="container-fluid" style="margin-top: 20px;">  
        <div class="row">
            <div class="col-sm-4 col-md-3 sidebar">
                <div class="mini-submenu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </div>

                <div class="list-group">
                    <span href="#" class="list-group-item active">
                        Submenu
                        <span class="pull-right" id="slide-submenu">
                            <i class="fa fa-times"></i>
                        </span>
                    </span>
                    <a href="#" class="list-group-item">
                        <i class="fa fa-comment-o"></i> Lorem ipsum
                    </a>
                    <a href="#" class="list-group-item">
                        <i class="fa fa-search"></i> Lorem ipsum
                    </a>
                    <a href="#" class="list-group-item">
                        <i class="fa fa-user"></i> Lorem ipsum
                    </a>
                    <a href="#" class="list-group-item">
                        <i class="fa fa-folder-open-o"></i> Lorem ipsum <span class="badge">14</span>
                    </a>
                    <a href="#" class="list-group-item">
                        <i class="fa fa-bar-chart-o"></i> Lorem ipsumr <span class="badge">14</span>
                    </a>
                    <a href="#" class="list-group-item">
                        <i class="fa fa-envelope"></i> Lorem ipsum
                    </a>
                </div>        
            </div>

            <div class="col-sm-8 col-md-9">
                <a href="http://[::1]/develop_tresnamuda/admin/groups/create" class="btn btn-primary">Create group</a>

            <div style="margin-top: 10px;">
                <table class="table table-hover table-bordered table-condensed table-striped"><tr><td>admin</td><td>Administrator</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/1"><span class="glyphicon glyphicon-pencil"></span></a></td></tr><tr><td>managing_director</td><td>Grup untuk Bapak MD</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/19"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/19" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_finance</td><td>Ibu, Rusman</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/20"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/20" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_com_ops</td><td>Hendrik Lengkong</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/21"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/21" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_armada</td><td>Capt Lengkong</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/22"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/22" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>direksi_operation</td><td>Grup untuk Bapak Hasan Kamal</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/23"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/23" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_armada</td><td>Grup untuk Bapak Sukardi</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/24"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/24" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_operasi</td><td>Nano, Sitor</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/25"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/25" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_accounting</td><td>Anwar Taufik</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/26"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/26" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_audit</td><td>Awal</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/27"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/27" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_marketing</td><td>Srie, Agnes, Lia, Netty, Olive</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/29"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/29" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_sales</td><td>Ullie</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/30"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/30" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_eskport</td><td>Steven</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/31"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/31" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_import</td><td>Ardan</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/32"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/32" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_inventory</td><td>Bambang</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/33"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/33" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>manager_persum</td><td>Deddy</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/34"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/34" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_billing</td><td>Joko</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/35"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/35" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_impor</td><td>Fatah</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/36"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/36" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_purchasing</td><td>Dahely</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/37"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/37" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr><tr><td>kabag_messenger</td><td>Diding</td><td><a href="http://[::1]/develop_tresnamuda/admin/groups/edit/38"><span class="glyphicon glyphicon-pencil"></span></a> <a href="http://[::1]/develop_tresnamuda/admin/groups/delete/38" title="Hapus ?" onclick="return confirm('Are you sure you want to delete?')"><span class="glyphicon glyphicon-remove"></span></a></td></tr></table>  </div>
        </div>
    </div>    
 </div>

 <footer class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <p class="navbar-text pull-left">Say Hi </p>
    <a class="navbar-btn btn-danger btn pull-right"> Call Us on : 401</a>
  </div>
</footer>

https://jsfiddle.net/zw7Lbnp2/1/