个人初学bootstrap并搭建后台界面代码

最新推荐文章于 2024-03-20 09:35:53 发布
最新推荐文章于 2024-03-20 09:35:53 发布
阅读量1.2k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17358703/article/details/77131728
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<style>
@media only screen and (min-width:768px ) {
#topLeft{
position: absolute;
width: 220px;
margin-top: 20px;
}
}
@media only screen and (min-width: 768px) {
#mainp{
margin-left: 250px;

}
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<!--顶部栏-->
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <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 class="navbar-brand" href="#">网站后台管理</a>
    </div>

<ul class="list-unstyled nav navbar-nav navbar-right">
<li><a href="#"><span class="badge" style="background: red;">23</span></a></li>
<li><a href="#"><span class="glyphicon glyphicon-off" >注销</span></a></li>
</ul>


    <!-- Collect the nav links, forms, and other content for toggling -->
  
  </div ><!-- /.container-fluid -->
  <!--侧边栏-->
  <div class="nav navbar navbar-collapse"  id="topLeft">
 
  <ul class="nav"><li>
  <div class="input-group">
  <input type="text" class="form-control"/>
 <span class="input-group-btn"> <button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button></span>
  </div></li>
  <li><a href="#open1" data-toggle="collapse"><strong>我是你大爷！</strong></a>
  <ul id="open1"  class="collapse nav">
  <li ><a href="#">点开看的是傻逼</a></li>
  <li ><a href="#">点开看的是傻逼</a></li>
  <li ><a href="#">点开看的是傻逼</a></li>
  <li ><a href="#">点开看的是傻逼</a></li>
  <li ><a href="#">点开看的是傻逼</a></li>
  <li ><a href="#">点开看的是傻逼</a></li>
 
  </ul>
  </li>
  <li><a href="#open1" data-toggle="collapse"><strong>卧槽你大爷！</strong></a>
  <ul id="open1"  class="collapse nav">
  <li ><a href="#">点开看的是傻逼</a></li>
  <li ><a href="#">点开看的是傻逼</a></li>
  <li ><a href="#">点开看的是傻逼</a></li>
  <li ><a href="#">点开看的是傻逼</a></li>
  <li ><a href="#">点开看的是傻逼</a></li>
  <li ><a href="#">点开看的是傻逼</a></li>
 
  </ul>
  </li>
 
  </ul>
 
  </div>
</nav>
<!--主要区域-->
<div class="" id="mainp" >
<div class="bs-example" data-example-id="simple-table">
    <table class="table">
      <caption>Optional table caption.</caption>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </div><!-- /example -->
  <div class="bs-example" data-example-id="striped-table">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </div><!-- /example -->
</div>


<!--底部分页-->
<div id="bottom" class="pull-right" style="margin-bottom: 10px;">
<nav aria-label="Page navigation" >
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </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="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
</div>





<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js" ></script>
</body>

</html>







qq_17358703
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
个人网站(bootstrap+css)
05-25
简单的用bootstrap+css的个人网站， 展示自我介绍、兴趣爱好和个人信息界面，制作表单页面收集用户的姓名、兴趣爱好、联系方式等个人信息。兴趣爱好是多级界面包含旅行随笔、自由出行准备、美食和景点界面。
Bootstrap2.0后台网页html模板分享
wx1998114的博客
12-02 1382
本网页模板是Bootstrap的一个后台网页模板，可用于内容管理系统前台界面的UI样式，非常适合一些管理系统作为前台界面进行展示。
Day29 SSM之CRUD（页面美化）bootstrap的部门增删改查
qq_43639081的博客
10-28 675
bootstrap （1） bootstrap是什么？ Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。 （2） bootstrap特点是什么？ 简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 官网下载后，解压 一、ssm搭建 1、复制模块 在原工程ssm目录下，复制搭建好的ssm03_crud_ajax，粘贴为ssm04_crud_boots
Bootstrap：简介和基本使用
最新发布
程序员无羡的博客
03-20 1015
Bootstrap：简介和基本使用
【小河今学 | Bootstrap-v3】响应式后台管理系统网页制作【纯布局】（上）
LB_laber的博客
07-31 1796
Bootstrap-v3制作响应式后台管理系统网页，布局
使用BootStrap搭建主页
qq_1114382703的博客
05-04 1209
使用Bootstrap来搭建主页
bootstrap后台登录界面特效代码
03-22
bootstrap后台登录界面代码是一款基于基于bootstrap和css3实现的自适应移动端优先的登录界面代码。
bootstrap快速制作后台界面
01-19
最近看了bootstrap的一个小的视频，快速的做出一个后台界面；介绍了一些典型的用法； 里面涉及了： 下拉菜单、胶囊菜单、胶囊菜单垂直显示、栅格排列、导航栏、字体图标、 图片样式、输入组、折叠菜单panel、面包屑...
bootstrap自适应电脑手机端后台登录界面代码.zip
09-26
有兴趣刚需的可以自己下载，非常实用的特效代码，可以完美运行，有能力的还可以二次修改！
Bootstrap后台登录界面模板_后台模板_bootstrap_
10-01
快速上手编写后台管理界面，可任意模仿copy代码，节省写代码时间
bootstrap搭建后台管理页面
NeoYang的专栏
03-03 3万+
bootstrap搭建后台管理页面管理页面主体包括4部分，顶部导航栏，左侧导航栏，中间正文页和底部的页脚。其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件，主体页面为了演示方便，使用了iframe框架。
bootstrap漂亮的系统后台界面+bootstrap实用插件
03-18
非常漂亮的bootstrap写的后台框架！ 及各种bootstrap里常用的插件！
基于BootStrap的后台管理系统
08-11
整合BootStrap各种插件的一套管理系统界面
基于bootstrap的个人网站主页.rar
07-11
一个基于bootstrap的很简单的前端界面，适合做个人网站的主页。可以参考
黑色全屏个人主页bootstrap4模板
06-01
黑色全屏个人主页bootstrap4模板
bootstrap 国外开源网站源码
06-20
响应式电商网站
使用bootstrap搭建后台管理系统页面《一》
空空说技术的博客
03-24 5万+
1. 使用bootstrap搭建后台管理系统页面《一》 一般的后台管理系统页面主体包括四个部分，顶部导航栏，左侧菜单栏，中间正文页和底部的页脚。 其中左侧和顶部使用的是bootstrap的导航和下拉菜单组件，主体页面为了演示方便，使用了iframe框架。 1.1 nav组件 接下...
前端使用 BootStrap 写一些后台常用的界面
IT小村
02-27 2万+
一、前言 1、作为一个专注后台方向上的学习者，肯定不只是简单地处理业务逻辑而已 2、自己独立完成一个作品，一般都要涉及到几个界面的编写： ①登录界面 ②CRUD界面 ③主页 ④… 3、UI方面的简单的框架有很多，使用的过程也是深有感触： ①之前先是使用 EasyUI ，后来逐渐觉得其写出来的界面如明日黄花，简陋不已，写出来的界面都不好意思说是自己写的。 ②于是接着选择了最新最热门...
前端：1小时搭建简约漂亮的个人网站（Bootstrap）
热门推荐
bigname22的博客
02-03 6万+
1小时就能搭建这么简约漂亮的个人网站（Bootstrap） 有一个搭建自己个人网站的想法，把自己的一些技术文章、日记、创业想法等等统统寄托在这里。 后台前端统统来一套！ 首先是前端！ 先上这个长得好看的效果图。 概述 目前为只完成了该页面的UI开发，暂时没有实现与后台交互的功能。现在在学习ssm框架的搭建，争取过年前搞定后台的基本接口。然后把这个页面的登录、技术文章、随手记与后台交
bootstrap搭建企业后台管理系统
07-18
其次，Bootstrap 内置了丰富的组件，包括导航栏、表格、表单、按钮等等，这些组件可以直接调用并配置，大大减少了开发者的编写代码的工作量。同时，这些组件还具有良好的样式和交互效果，可以提升管理系统的视觉效果...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值