天天看点
返回

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

一、前言

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

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

①登录界面

②CRUD界面

③主页

④…

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

①之前先是使用 

EasyUI

 ，后来逐渐觉得其写出来的界面如明日黄花，简陋不已，写出来的界面都不好意思说是自己写的。

②于是接着选择了最新最热门的基于 

Vue2.0

 的 

ElementUI

，为此还特地深入学习了 

Vue

，后来觉得有点笨重，并且其是侧重于前端工程化的，最好每次都使用 

webpack

 去开启，作为一个后台的，写好 

CRUD

、

Controller

 就已经花费了不少时间了，还把简单的界面处理得那么复杂，总共花费的时间太多成本太高了。

③最后还是回到了 

BootStrap

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

④当然中间还有使用了很多 

UI

 框架，如国内的贤心返璞归真的 

LayUI

，梁先生的基于 

vue

iView

 ；特效框架如基于 

CSS3

Animate

 等等，感觉还行。

二、代码与效果

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

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 官网

本文作者：larger5

本文发布时间：2018年02月27日

本文来自云栖社区合作伙伴

CSDN

，了解相关信息可以关注csdn.net网站。

javascript 前端开发 容器 数据安全/隐私保护 移动开发 bootstrap前端使用 Bootstrap前端框架 bootstrap后台 bootstrap前端 使用bootstrap插件
上一篇: js点名器效果
下一篇: vim设置编码为urf-8

继续阅读