Bootsrap建立简单的网页

 

 前几天学习了bootstrap，利用学习过的知识来做了一个简单的页面，这个页面分为三个区域，导航栏、侧边栏、主要展示区域；

在导航栏\侧边栏主要用的是bootsrap nav类  在侧边栏的设计中有一个比较有趣的地方在于 在主要显示区域的小导航栏会布满全屏，这样小导航栏的部分内容就会被侧边栏挡住，小调节就是在侧边栏的媒体设置那边将小导航的左边距调一下 

<style type="text/css">
        @media (min-width: 768px) {
        #sm1{
        width:250px;
        margin-top:51px;
        position:absolute;
        z-index: 1;
        height: 600px;
        }
        .page_main{
            margin-left: 250px;
        }
        }

        </style>

    </head>
    <body>
        <nav class="navbar navbar-default navbar-static-top">
<!--        navbar-static-top默认设置的margin-top为50px    -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">网站管理</a>
                <a href="#" class="navbar-brand">返回首页</a>
            </div>
            <ul class="nav navbar-nav nav navbar-right" style="margin-right: 30px">
<!--                在类中加入nav navbar-nav 可以使列表内容居中排布 navbar-right 可以让内容移动到最右边-->
                <li><a href="#"><span class="badge" style="background:darkred">0</span></a></li>
<!--                badeg可以给文本内容加上灰色椭圆背景-->
                <li><a href="#"><span class="glyphicon glyphicon-off">注销</span></a></li>
<!--                注销前面的图标可以在bootstrap官网上找到相应的类名-->
            </ul>
<!--            侧边栏-->
            <div class="navbar-default navbar-collapse"id="sm1">
<!--            navbar-collapse设置侧边样式    style="margin-top: 51px"设置是将列表标签移动到下面-->
                <ul class="nav">
                    <li>
<!--                        搜索-->
                        <div class="input-group">
                            <input type="text" class="form-control"/>
                            <span class="input-group-addon">
                                <button type="button"class="btn-btn-default">
                                    <span class="glyphicon glyphicon-zoom-in"></span>
                                </button>
                            </span>

                        </div>
                    </li>
                    <li><a href="#sub1" data-toggle="collapse" >系统功能<span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
<!--                        pull-right是将图标移动到最右边-->
                        <ul  id="sub1" class=" nav collapse">
<!--                            在实现折叠功能时href="#s"与ul中的id必须一致否则a标签不能打开-->
                            <li><a href="#"><span class="glyphicon glyphicon-home"></span>&nbsp;  系统信息 </a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;管理员管理</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-comment"></span>&nbsp;日志信息</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>&nbsp;退出</a></li>
                        </ul>
                    </li>

                    <li><a href="#s2" data-toggle="collapse" >栏目功能<span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
<!--                        pull-right是将图标移动到最右边-->
                        <ul  id="s2" class=" nav collapse">
<!--                            在实现折叠功能时href="#s"与ul中的id必须一致否则a标签不能打开-->
                            <li><a href="#"><span class="glyphicon glyphicon-home"></span>&nbsp;  系统信息 </a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;管理员管理</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-comment"></span>日志信息</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>退出</a></li>
                        </ul>
                    </li>
                    <li><a href="#s3" data-toggle="collapse" >产品功能<span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
<!--                        pull-right是将图标移动到最右边-->
                        <ul  id="s3" class=" nav collapse">
<!--                            在实现折叠功能时href="#s"与ul中的id必须一致否则a标签不能打开-->
                            <li><a href="#"><span class="glyphicon glyphicon-home"></span>&nbsp;  系统信息 </a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;管理员管理</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-comment"></span>日志信息</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>退出</a></li>
                        </ul>
                    </li>
                    <li><a href="#s4" data-toggle="collapse" >新闻功能<span class="glyphicon glyphicon-chevron-right pull-right" ></span></a>
<!--                        pull-right是将图标移动到最右边-->
                        <ul  id="s4" class=" nav collapse">
<!--                            在实现折叠功能时href="#s"与ul中的id必须一致否则a标签不能打开-->
                            <li><a href="#"><span class="glyphicon glyphicon-home"></span>&nbsp;  系统信息 </a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;管理员管理</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-comment"></span>日志信息</a></li>
                            <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>退出</a></li>
                        </ul>
                    </li>

                </ul>
            </div>

        </nav>
        <div class="page_main" style="background: #23527c">
            <ol class="breadcrumb">
                  <li><a href="#">首页</a></li>
                <li><a href="#">Library</a></li>
                  <li class="active">Data</li>
</ol>

        </div>

 

posted @ 2020-05-20 09:17  谁谁是谁  阅读(331)  评论(0)    收藏  举报