前端使用 BootStrap 写一些后台常用的界面

一、前言

1、作为一个专注后台方向上的学习者,肯定不只是简单地处理业务逻辑而已

2、自己独立完成一个作品,一般都要涉及到几个界面的编写:

登录界面

CRUD界面

主页

3、UI方面的简单的框架有很多,使用的过程也是深有感触:

①之前先是使用 EasyUI ,后来逐渐觉得其写出来的界面如明日黄花,简陋不已,写出来的界面都不好意思说是自己写的。

②于是接着选择了最新最热门的基于 Vue2.0ElementUI,为此还特地深入学习了 Vue,后来觉得有点笨重,并且其是侧重于前端工程化的,最好每次都使用 webpack 去开启,作为一个后台的,写好 CRUDController 就已经花费了不少时间了,还把简单的界面处理得那么复杂,总共花费的时间太多成本太高了。

③最后还是回到了 BootStrap,其实很早就接触它了,不过觉得这是新手的玩意,不愿意使用,但是后来觉得开发成本真的极低,且界面淳朴无邪~

④当然中间还有使用了很多 UI 框架,如国内的贤心返璞归真的 LayUI,梁先生的基于 vueiView ;特效框架如基于 CSS3Animate 等等,感觉还行。

二、代码与效果

后面有心情的话,再把其他的界面补上

1、登录界面

① 代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>larger5</title>
    </head>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" />
    <script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>

    <body>
        <div class="container">
            <div class="row">

                <div class="">
                    <img src="images/logo.png" />
                    <br />
                    <br />
                    <div>
                        <form>
                            <!--表单控件-->
                            <input type="text" name="username" id="username" placeholder="用户名" class="form-control " />
                            <br />
                            <input type="password" name="password" id="password" placeholder="密码" class="form-control" />
                            <br />
                            <label class="radio-inline">
                             <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" class="radio-inline"> boss

                         </label>
                            <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" class="radio-inline" > son
                        </label>
                            <br />
                            <br />
                            <input type="submit" value="登录" class="btn btn-success" />
                        </form>
                    </div>
                </div>

            </div>
        </div>

    </body>

</html>

② 效果
这里写图片描述

2、前端主页

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8"></meta>
        <title>larger5</title>
        <link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
        <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" />
        <script type="text/javascript" src="bootstrap/js/jQuery.js"></script>
        <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    </head>
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }

        .data_list {
            border: 1px solid #E5E5E5;
            padding: 10px;
            background-color: #FDFDFD;
            margin-top: 15px;
        }

        .data_list .data_list_title {
            font-size: 15px;
            font-weight: bold;
            border-bottom: 1px solid #E5E5E5;
            padding-bottom: 10px;
            padding-top: 5px;
        }

        .data_list .data_list_title img {
            vertical-align: top;
        }
    </style>

    <body>
        <!--导航条浮动,固定在上方,不会随着滚动条滑下而消失-->
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <!--标题,字体稍微大点-->
                    <a class="brand" href="#">larger5</a>
                    <!--导航条具有响应式功能,主要是在屏幕较小的设备也能用-->
                    <div class="nav-collapse collapse">
                        <!--导航标签,H5就有了-->
                        <ul class="nav">
                            <li >
                                <a href="#"><i class="icon-home"></i>&nbsp;主页</a>
                            </li>
                            <li >
                                <a href="#"><i class="icon-pencil"></i>&nbsp;写博文</a>
                            </li>
                            <li>
                                <a href="#"><i class="icon-book"></i>&nbsp;分类管理</a>
                            </li>
                            <li >
                                <a href="#"><i class="icon-user"></i>&nbsp;个人中心</a>
                            </li>
                        </ul>
                    </div>
                    <!--导航条内的表单,居右-->
                    <form name="myForm" class="navbar-form pull-right" method="post" action="">
                        <input class="span2" id="s_title" name="s_title" type="text" style="margin-top:5px;height:30px;" placeholder="文章标题">
                        <button type="submit" class="btn" onkeydown="if(event.keyCode==13) myForm.submit()"><i class="icon-search"></i>&nbsp;搜索</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="container">
            <!--流式,按百分比分列-->
            <div class="row-fluid">
                <div class="span9">
                    <!--这里的内容经常会变化-->
                    <div class="data_list">
                        <div class="data_list_title">
                            <img src="images/list_icon.png" /> 最新资讯
                        </div>
                    </div>
                </div>
                <div class="span3">
                    <div class="data_list">
                        <div class="data_list_title">
                            <img src="images/user_icon.png" /> 个人中心
                        </div>
                    </div>

                    <div class="data_list">
                        <div class="data_list_title">
                            <img src="images/byType_icon.png" /> 按类别
                        </div>
                    </div>

                    <div class="data_list">
                        <div class="data_list_title">
                            <img src="images/byDate_icon.png" /> 按日期
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>

这里写图片描述

3、后台 CRUD 界面

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>后台管理</title>
        <link rel="stylesheet" href="bootstrap3/css/bootstrap-theme.min.css" />
        <link rel="stylesheet" href="bootstrap3/css/bootstrap.min.css" />
        <script type="text/javascript" src="bootstrap3/js/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="bootstrap3/js/bootstrap.min.js"></script>
    </head>
    <style type="text/css">
        body {
            padding: 20px;
        }

        .headLeft {
            float: left;
        }

        .headRight {
            padding-top: 40px;
            padding-left: 340px;
        }

        .search {
            margin-bottom: 10px;
        }

        .search .toolbar {}
    </style>
    <!--必须使用较新版本的BootStrap才有如下效果-->

    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <nav class="navbar navbar-fixed-top" role="navigation">
                        <div class="container">
                            <div class="navbar-header">
                                <a class="navbar-brand " href="#">后台管理系统</a>
                            </div>
                            <div id="navbar" class="navbar-right">
                                <a class="navbar-brand" href="#">当前用户:xx</a>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
            <div class="row" style="padding-top: 45px">
                <div class="col-md-3">
                    <div class="list-group">
                        <!--激活,作为标题-->
                        <a href="#" class="list-group-item active ">
                            系统菜单
                        </a>
                        <a href="#" class="list-group-item">管理一</a>
                        <a href="#" class="list-group-item">管理二</a>
                        <a href="#" class="list-group-item">管理三</a>
                        <a href="#" class="list-group-item">管理四</a>
                        <a href="#" class="list-group-item">退出</a>
                    </div>
                </div>
                <div class="col-md-9">
                    <div>
                        <ol class="breadcrumb">
                            <li><span class="glyphicon glyphicon-home"></span>&nbsp;
                                <a href="#">主页</a>
                            </li>
                            <li class="active"></li>
                        </ol>
                    </div>
                    <div align="center" style="padding-top: 50px;">
                        <h1>后台管理系统</h1>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div align="center" style="padding-top: 200px">
                        Copyright © 2017-2018 larger5
                    </div>
                </div>
            </div>
        </div>
    </body>

</html>

效果:

这里写图片描述

4、…

(有心情再写~)

三、小结

1、做后台做烦了,可以试着去写点前端的东西,前端专注与视觉的建设,能让你带愉悦的心情重返后台的工作~

2、BootStrap3 官网

相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页