bootstrap快速制作后台界面

2024-11-26 12:08:27

最近看了bootstrap的一个小的视频，快速的做出一个后台界面；介绍了一些典型的用法；
里面涉及了：
下拉菜单、胶囊菜单、胶囊菜单垂直显示、栅格排列、导航栏、字体图标、
图片样式、输入组、折叠菜单panel、面包屑、表格样式、分页组件样式；

下面将跟着项目做出的小例子贴出来：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css" />
<title>bootstrap小例子</title>
<style type="text/css"></style>
</head>
<body>
<!-- 导航栏部分 -->
<div class="navbar navbar-inverse">
 <div class="container-fluid">
  <div class="navbar-header">
   <div class="navbar-brand">
    <small class="glyphicon glyphicon-fire"></small>
    MicroSoft
   </div>
  </div>
  <ul class="nav navbar-nav nav-stacked navbar-right">
   <li>
    <a href="#">
     <span class="glyphicon glyphicon-tasks"></span>
     <i class="badge">2</i>
    </a>
   </li>
   <li>
    <a href="#">
     <span class="glyphicon glyphicon-bell"></span>
     <i class="badge">1</i>
    </a>
   </li>
   <li>
    <a href="#">
     <span class="glyphicon glyphicon-envelope"></span>
     <i class="badge">1</i>
    </a>
   </li>
   <li>
    <a href="#" data-toggle="dropdown">
     <img class="img-circle" src="user_photo.png" width="30" height="30"/>
     <small>Welcome</small>
     admin
     <span class="caret"></span>
    </a>
    <ul class="nav nav-pills nav-stacked dropdown-menu">
     <li class="active">
      <a href="#">
       <span class="glyphicon glyphicon-cog"></span> Setting
      </a>
     </li>
     <li class="divider"></li>
     <li>
      <a href="#">
       <span class="glyphicon glyphicon-user"></span> Profile
      </a>
     </li>
     <li class="divider"></li>
     <li>
      <a href="#">
       <span class="glyphicon glyphicon-off"></span> Logout
      </a>
     </li>
    </ul>
   </li>
  </ul>
 </div>
</div> 

<!-- 页面部分 -->
<div class="row">
 <div class="col-sm-2">
  <div id="search">
   <div class="input-group">
    <input class="form-control input-sm" type="text" />
    <div class="input-group-btn">
     <a href="#" class="btn btn-success btn-sm">
      <span class="glyphicon glyphicon-search"></span>
     </a>
    </div>
   </div>
  </div> 

  <div class="panel-group" id="box">
   <div class="panel panel-success">
    <div class="panel-heading">
     <a href="#collapseA" data-parent="#box" data-toggle="collapse" class="panel-title">用户管理</a>
    </div>
    <div class="panel-collapse collapse in" id="collapseA">
     <div class="panel-body">
      <ul class="nav nav-pills nav-stacked">
       <li><a href="#">用户列表</a></li>
       <li><a href="#">用户添加</a></li>
       <li><a href="#">用户删除</a></li>
      </ul>
     </div>
    </div>
   </div>
   <div class="panel panel-success">
    <div class="panel-heading">
     <a href="#collapseB" data-parent="#box" data-toggle="collapse" class="panel-title">产品管理</a>
    </div>
    <div class="panel-collapse collapse" id="collapseB">
     <div class="panel-body">
      <ul class="nav nav-pills nav-stacked">
       <li><a href="#">产品列表</a></li>
       <li><a href="#">产品添加</a></li>
       <li><a href="#">产品删除</a></li>
      </ul>
     </div>
    </div>
   </div>
  </div>
 </div> 

 <div class="col-sm-10">
  <div class="bread-crumb">
   <ul class="breadcrumb">
    <li><span class="glyphicon glyphicon-home"></span><a href="#">Home</a></li>
    <li><a href="#">User</a></li>
    <li>Add</li>
   </ul>
  </div>
  <div class="panle panel-success">
   <div class="panel-heading">
    <a class="panel-title">用户管理</a>
   </div>
   <div class="panel-body">
    <table class="table table-striped table-hover">
     <thead>
      <tr>
       <th>ID</th>
       <th>brand</th>
       <th>name</th>
       <th>channel</th>
       <th>inventory</th>
       <th>price</th>
       <th>isSale</th>
       <th>operation</th>
      </tr>
     </thead>
     <tbody>
      <tr>
       <td>1</td>
       <td>Apple</td>
       <td>Plus 6</td>
       <td>4G</td>
       <td>10</td>
       <td>4500</td>
       <td>yes</td>
       <td>add</td>
      </tr>
      <tr>
       <td>2</td>
       <td>Apple</td>
       <td>Plus 6</td>
       <td>4G</td>
       <td>10</td>
       <td>4500</td>
       <td>yes</td>
       <td>add</td>
      </tr>
      <tr>
       <td>3</td>
       <td>Apple</td>
       <td>Plus 6</td>
       <td>4G</td>
       <td>10</td>
       <td>4500</td>
       <td>yes</td>
       <td>add</td>
      </tr>
     </tbody>
     <tfoot>
      <tr>
       <td colspan="8">
        <ul class="pagination">
         <li><a href="#">«</a></li>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
         <li><a href="#">5</a></li>
         <li><a href="#">»</a></li>
        </ul>
       </td>
      </tr>
     </tfoot>
    </table>
   </div>
  </div>
 </div>
</div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
</body>
</html>

作为例子参考还是非常不错的。不记得的时候查下。

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

值得分享和收藏的Bootstrap学习教程

首先先感谢朋友们对小编的支持,关注小编的文章,和小编一起学习进步,一直的陪伴,小编也一定会再接再厉,为大家分享更多精彩的文章. 在分享的过程中遇到了一些问题,这也给了我很大的启发,大家在搜索相关文章时都没有针对此类问题进行的系统整理文章,这也是小编需要在今后进行改进的. 所以本文就吸取这个经验,针对Bootstrap教程进行系统整理,希望对大家的学习有所帮助,便于大家学习. 小编的水平能力都很有限,还望大牛多给一些建议和看法,帮助小编进行改正和提高,如果文中确有不妥之处,还请谅解.希望能和大家共
值得分享的Bootstrap Table使用教程

bootstrap-table是在bootstrap-table的基础上写出来的,专门用于显示数据的表格插件.而bootstrap是来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于HTML.CSS.JAVASCRIPT 的,具有简便灵活,快速前端开发的优势.对与bootstrap在此就不在叙述. jquery ,bootstrap ,bootstrap-table 三者之间的关系.bootstrap很多部分代码涉及到了jquery的,也就是说 bootstrap是依赖j
bootstrap flask登录页面编写实例

本文章来为各位介绍一个python的例子,这个就是bootstrap+flask写登录页面的例子,希望文章能够对各位有所帮助. Flask是一个使用 Python 编写的轻量级 Web 应用框架.其 WSGI 工具箱采用 Werkzeug ,模板引擎则使用 Jinja2 .在一般应用或个人开发中,可以很容易的写出应用.本篇就结合bootstrap,写一个简单的login界面. 一.效果图无图无真像,先上效果图: flask-bootstrap flask-login 二.目录结构该代码写时采
BootStrap轻松实现微信页面开发代码分享

1. 行长度: <div class="col-md-12"> </div> 2.modal <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <
20分钟成功编写bootstrap响应式页面就这么简单

最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用了 Bootstrap 后,再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了. 经过学习,我发现自己也具备了分分钟开发出一个高大上的页面的能力.本文将会为大家介绍 Bootstrap,并且带领大家一起实现一个响应式页面. 图 1. 移动优先,适应不同设备一.安装最简单的方式是直接在网页中
学做Bootstrap的第一个页面

本文实例分享了第一个Bootstrap页面的实现代码,供大家参考,具体内容如下效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /><!--为了确保适当的绘制和触屏
初步使用bootstrap快速创建页面

1. 安装bower前端包管理器 bower是一个前端软件包管理器,便于安装.更新以及卸载javascript,css,html等框架资源,并解决之间的相互依赖关系. npm install -g bower // 安装 bower help // 查看帮助这里YY一下: npm是node.js的包管理器,通过它安装了express,express-generator,supervisor,bower等等软件,bower又是前端框架的软件包,安装了bootstrap以及jquery等一些依赖包
Bootstrap模仿起筷首页效果

直接贴代码了 <!DOCTYPE html> <html lang="en"> <head> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="
基于Bootstrap的Metronic框架实现页面链接收藏夹功能

在一个系统里面,往往有很多菜单项目,每个菜单项对应一个页面,一般用户只需要用到一些常用的功能,如果每次都需要去各个层次的菜单里面去找对应的功能,那确实有点繁琐.特别是在菜单繁多,而客户又对系统整体不熟悉的情况下,如果有一个类似浏览器的收藏夹模块,把一些常用的菜单连接保存起来,每次从这个收藏夹主页去找对应的页面,那样确实是省事省力,非常方便.本篇随笔就是介绍在基于Metronic的Bootstrap开发框架里面实现这个收藏夹的思路. 1.系统的收藏夹界面处理效果为了实现这个收藏夹功能,我们也需要
BootStrap mvcpager分页样式(get请求,刷新页面)

使用方法: 先把mvcpager.dll引用加入mvc项目中. 前台代码前台: @{ Layout = null; } @using Webdiyer.WebControls.Mvc @model PagedList<string> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <

bootstrap快速制作后台界面

相关推荐

随机推荐