bootstrap一、界面样式

佚名 6年前 (2019-05-05) 随笔 1807人围观抢沙发百度已收录

1：页头

            <div class="page-header">
                <!-- 组件替换 -->
                <h3>当前用户:{{user==''?"未登录":user}}</h3>
            </div>

2：页体左-竖导航栏

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

                <ul class="nav nav-pills nav-stacked">
                    <li role="presentation" class="active"><a href="#">订单管理</a></li>
                    <li role="presentation"><a href="#">个人订单</a></li>
                    <li role="presentation"><a href="#">个人中心</a></li>
                </ul>

3、页体右-栅栏格式，面板

            <div class="row">
                <div class="col-md-3">
                    <ul class="nav nav-pills nav-stacked">
                        <li role="presentation" class="active"><a href="#">订单管理</a></li>
                        <li role="presentation"><a href="#">个人订单</a></li>
                        <li role="presentation"><a href="#">个人中心</a></li>
                    </ul>
                </div>
                <div class="col-md-9">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            面板标题
                        </div>
                        <div class="panel-body">
                            面板内容
                        </div>
                    </div>
                </div>
            </div>