利用Bootstrap搭建网站页面
- 先来看下页面效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图书管理系统</title>
<!--必须先导入JQuery, 再导入bootstrap的css文件和js文件-->
<script src="JQuery/JQuery.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<!-- 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>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">图书<span class="sr-only">(current)</span></a></li>
<li><a href="#">作者</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">出版社</a></li>
<li><a href="#">出版时间</a></li>
<li><a href="#">国外图书</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">图书编号</a></li>
<!--<li role="separator" class="divider"></li>-->
<!--<li><a href="#">One more separated link</a></li>-->
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">登录</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">系统设置 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">关于</a></li>
<li><a href="#">帮助</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<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>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">图书管理系统
<span class="glyphicon glyphicon-book pull-right" aria-hidden="true"></span>
</div>
<div class="panel-body">
<!--搜索框-->
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount"></label>
<div class="input-group">
<input type="text" class="form-control" id="exampleInputAmount">
</div>
</div>
<button type="submit" class="btn btn-primary">搜索</button>
<button type="button" class="btn btn-success pull-right">添加</button>
</form>
<br>
<!--图书列表-->
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>编号</th>
<th>书名</th>
<th>作者</th>
<th>出版社</th>
<th>出版时间</th>
<th>价格</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>三体</td>
<td>刘慈欣</td>
<td>东方出版社</td>
<td>2019/1/1</td>
<td>29.99</td>
<td class="text-center">
<button type="button" class="btn btn-primary btn-xs">编辑</button>
<button type="button" class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>三体</td>
<td>刘慈欣</td>
<td>东方出版社</td>
<td>2019/1/1</td>
<td>29.99</td>
<td class="text-center">
<button type="button" class="btn btn-primary btn-xs">编辑</button>
<button type="button" class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>三体</td>
<td>刘慈欣</td>
<td>东方出版社</td>
<td>2019/1/1</td>
<td>29.99</td>
<td class="text-center">
<button type="button" class="btn btn-primary btn-xs">编辑</button>
<button type="button" class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>三体</td>
<td>刘慈欣</td>
<td>东方出版社</td>
<td>2019/1/1</td>
<td>29.99</td>
<td class="text-center">
<button type="button" class="btn btn-primary btn-xs">编辑</button>
<button type="button" class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>三体</td>
<td>刘慈欣</td>
<td>东方出版社</td>
<td>2019/1/1</td>
<td>29.99</td>
<td class="text-center">
<button type="button" class="btn btn-primary btn-xs">编辑</button>
<button type="button" class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>三体</td>
<td>刘慈欣</td>
<td>东方出版社</td>
<td>2019/1/1</td>
<td>29.99</td>
<td class="text-center">
<button type="button" class="btn btn-primary btn-xs">编辑</button>
<button type="button" class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>三体</td>
<td>刘慈欣</td>
<td>东方出版社</td>
<td>2019/1/1</td>
<td>29.99</td>
<td class="text-center">
<button type="button" class="btn btn-primary btn-xs">编辑</button>
<button type="button" class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>三体</td>
<td>刘慈欣</td>
<td>东方出版社</td>
<td>2019/1/1</td>
<td>29.99</td>
<td class="text-center">
<button type="button" class="btn btn-primary btn-xs">编辑</button>
<button type="button" class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<!--分页-->
<div class="text-center">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</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">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
利用Bootstrap搭建网站页面的更多相关文章
- 利用ThinkPHP搭建网站后台架构
记录一下ThinkPHP搭建网站后台.调整好样式等操作步骤 下载好ThinkPHP(3.2.3),解压后将核心文件夹ThinkPHP以及index.php等文件复制到网站根目录如下图 对index.p ...
- Bootstrap 搭建基础页面
基于Bootstrap实现下图所示效果的页面,一个居中的标题和一个大按钮: <!DOCTYPE html> <html lang="zh-cn"> < ...
- 两周“学会”bootstrap搭建一个移动站点
一直想着用bootstrap搭建网站,它的自适应.元素封装完善.现成的Glyphicons字体图标,省去很多的css.js.ui的工作,可以快速搭建一个客户需要的站点.ytkah自己有一些div+cs ...
- 利用Bootstrap快速搭建个人响应式主页（附演示+源码）
1.前言 我们每个程序员都渴望搭建自己的技术博客平台与他人进行交流分享,但使用别人的博客模板没有创意.做网站后台的开发人员可能了解前端,可是自己写一个不错的前端还是很费事的.幸好我们有Bootstra ...
- 利用Columnal网格系统快速搭建网站的基本布局结构
1.下面是一些对响应式设计提供了不同程度支持的CSS框架: (1)Semantic(http://semantic.gs); (2)Skeleton(http://getskeleton.com); ...
- UI设计实战篇——利用Bootstrap框架制作查询页面的界面
Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...
- 利用Bootstrap框架制作查询页面的界面
UI设计实战篇——利用Bootstrap框架制作查询页面的界面 Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...
- (转)UI设计实战篇——利用Bootstrap框架制作查询页面的界面
原文地址:http://www.cnblogs.com/grenet/p/3413085.html Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺 ...
- 从零开始利用vue-cli搭建简单音乐网站（二）
1.利用vue-router实现页面跳转 程序可以正常运行之后,下面我们需要配置路由实现页面的局部刷新,这一功能将用来实现网站页面的跳转. 打开程序目录,进入"src\router\inde ...
随机推荐
- [ASP.NET Core 3框架揭秘] 文件系统[2]：总体设计
在<抽象的"文件系统">中,我们通过几个简单的实例演示从编程的角度对文件系统做了初步的体验,接下来我们继续从设计的角度来进一步认识它.这个抽象的文件系统以目录的形式来组 ...
- 张孝祥java高新技术 --- jkd1.5 新特性 -- 精华总结
1. 抽象方法的使用 如果一个方法中大量出现if语句, 那么, 就应该考虑使用抽象来处理. 如下例: package com.lxl; public class Weekend { //周日 publ ...
- 关于IP网段划分
IP地址分类(A类 B类 C类 D类 E类) IP地址由四段组成,每个字段是一个字节,8位,最大值是255,, IP地址由两部分组成,即网络地址和主机地址.网络地址表示其属于互联网的哪一个网络 ...
- element表格点击行即选中该行复选框
关键代码如下 <el-table ref="multipleTable" :data="tableData" highlight-current-row ...
- 使用idea来部署git项目
使用idea来部署git项目 一).将项目交由git管理 VCS ---->import into Version Cntorl ------>create Git Repository ...
- 【Luogu P2024&P1892】食物链&团伙（并查集拓展域）
Luogu P1892 Luogu P2024 这两道一眼看过去很容易发现可以用并查集来做--但是当我们仔细阅读题面后,会发现其实并没有那么简单. 我们知道并查集可以很轻松地维护具有传递性的信息,也就 ...
- Python 信息提取-爬虫
import requests import re from bs4 import BeautifulSoup url = "http://python123.io/ws/demo.html ...
- 2019年12月2日Linux开发手记
开始学习在Linux下视频源捕获驱动框架,也就是V4L2(video4linux),本次关于v4l2的知识准备主要在于其的官方例程,理解官方例程也就差不多掌握了v4l2的基本内容.例程在:http:/ ...
- day20191001国庆默写
day20191001国庆默写恢复 重在理解,而不是死记硬背.认真专心看6遍,做6遍. 学会码字,每天码字二小时.持之以恒. 任重道远,出发,走多少算多少.100分的试卷,会做20分也比一个努力也没有 ...
- django中的restful规范
基于django的原生restful规范 主路由:url.py from django.conf.urls import url, include from django.contrib import ...