1. bootstrap简单介绍_栅格_布局容器
bootstrap：快速搭建网站的功能组件，封装了很多代码（bootstrap、jquery自行下载和导入，图片自行下载放到项目目录下）
网站：
bootstrap中文网站
1.1 bootstrap简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>孙健</td>
<td>18</td>
<td>打游戏</td>
</tr>
<tr>
<td>敬文东</td>
<td>20</td>
<td>看电影</td>
</tr>
<tr>
<td>汪伟</td>
<td>21</td>
<td>敲代码</td>
</tr>
</tbody>
</table>
</body>
<script src="jquery.js"></script>
</html>
1.2 布局容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.c1{
background-color:tan;
height:100px;
}
.c2{
background-color:pink;
height:100px;
}
.c3{
background-color:green;
height:100px;
}
</style>
</head>
<body>
<!-- container-fluid占满整个屏幕 -->
<!-- container 左右两边有留白 -->
<div class="container-fluid">
<div class="row">
<!-- // col-md-offset-3 栅格偏移,向右偏移3个栅格的意思-->
<!-- // col-md-6 占6个栅格,默认从左边开始-->
<div class="col-md-6 c1 col-md-offset-3">
<div class="row">
<div class="col-md-6 c3"></div>
</div>
</div>
<!-- <div class="col-md-8 c2"></div>-->
</div>
</div>
<!--<div class="container c1"></div>-->
</body>
<script src="jquery.js"></script>
</html>
1.3 栅格单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.c1{
background-color:tan;
height:100px;
}
.c2{
background-color:pink;
height:100px;
}
.c3{
background-color:green;
height:100px;
}
</style>
</head>
<body>
<!-- container-fluid占满整个屏幕 -->
<!-- container 左右两边有留白 -->
<div class="container-fluid">
<div class="row">
<!-- // col-md-offset-3 栅格偏移,向右偏移3个栅格的意思 md - 90px 1080px 540px-->
<!-- // col-md-6 占6个栅格,默认从左边开始 540px-->
<!-- md针对中等屏幕的,sm小屏幕,xs超小屏幕-->
<div class="col-md-6 c1 col-sm-6 col-xs-6"></div>
<div class="col-md-6 c2 col-sm-6 col-xs-6" ></div>
</div>
</div>
<!--<div class="container c1"></div>-->
</body>
<script src="jquery.js"></script>
</html>
1.4 表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4">
<h1 class="text-center">欢迎来到德莱联盟</h1>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</body>
<script src="jquery.js"></script>
</html>
2. bootstrao组件和插件简单使用
2.1 简单样式演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<select name="" id="" class="form-control">
<option value="1">xx1</option>
<option value="2">xx2</option>
</select>
<span class="glyphicon glyphicon-ok" style="color:red;font-size:100px;"></span>
<br>
<button class="btn btn-primary">提交</button>
<button class="btn btn-success">提交</button>
<button class="btn btn-danger">提交</button>
<button class="btn btn-danger btn-lg">提交</button>
<button class="btn btn-danger btn-sm btn-block">提交</button>
<a href="" class="btn btn-info">狗急了</a>
<i class="fa fa-address-book fa-5x" style="color:green;"></i>
<i class="fa fa-automobile fa-spin" style="color:yellow;font-size:100px;"></i>
<hr>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<hr>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">商品介绍</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">售后保障</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">商品评价(0) </a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">规格与包装</a></li>
<li role="presentation"><a href="#good" aria-controls="good" role="tab" data-toggle="tab">本店好评商品</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
有魅力,女朋友都感动哭了
</div>
<div role="tabpanel" class="tab-pane" id="profile">
漏气管换
</div>
<div role="tabpanel" class="tab-pane" id="messages">
不耐用
</div>
<div role="tabpanel" class="tab-pane" id="settings">
180-180
</div>
<div role="tabpanel" class="tab-pane" id="good">
日本的把
</div>
</div>
</div>
</body>
<script src="jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
2.2 导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.c1{
background-color:tan;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-inverse c1">
<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>
<!-- 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="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</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">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
<script src="jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
2.3 巨幕
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.c1{
background:url("timg.jpg");
height:500px;
}
</style>
</head>
<body>
<div class="jumbotron c1">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</body>
<script src="jquery.js"></script>
</html>
2.4 进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
30%
</div>
</div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">请填写个人信息</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
<script src="jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>
2.5 轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" >
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="1.jpg" alt="...">
<div class="carousel-caption">
美女1号
</div>
</div>
<div class="item">
<img src="2.jpg" alt="...">
<div class="carousel-caption">
技师2号
</div>
</div>
<div class="item">
<img src="3.jpg" alt="...">
<div class="carousel-caption">
技师3号
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</body>
<script src="jquery.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
$('.carousel').carousel({
interval: 1000
})
</script>
</html>
3. 自定义web框架（nbweb项目）
3.1 目录结构
3.2 static文件夹
作用：
放静态文件
xx.css文件
h1{
color:tan;
}
.c1{
width:100px;
height:200px;
background-color:yellow;
}
xx.js文件
confirm('年满18周岁了吗?')
3.3 templates文件夹
作用：
模板文件，每个页面的样式
beatfulpage.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="xx.css">
</head>
<body>
<h1>欢迎来到spa会所</h1>
<a href="/person">个人中心</a>
<h1>%xxoo%</h1>
<div class="c1"></div>
<img src="1.jpg" alt="">
</body>
<script src="xx.js"></script>
</html>
index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>新用户页面</h1>
</body>
</html>
person.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>这是个人中心页面</h1>
</body>
</html>
3.4 manage.py文件
作用：
因为我们的项目都是在服务器中运行，不可能在pycharm中右键运行，这个文件的作用就是可以让项目运行起来
import sys
from wsgi import run
from models import create_model
# python manage.py xx xx2
# 执行py文件时,后面携带的参数,可以通过py文件中的sys模块的sys.argv这个属性拿到,是个列表,列表第一项是文件名称,第二项之后,都是携带的参数
commands = sys.argv # xx xx2
# ['manage.py', 'xx', 'oo']
# 运行项目的指令: python manage.py runserver
# 数据库同步指令: python manage.py migrate
a1 = commands[1]
if a1 == 'runserver':
run()
elif a1 == 'migrate':
create_model()
3.5 models.py文件
作用：
操作数据库
import pymysql
def create_model():
conn = pymysql.connect(
host='127.0.0.1',
port=3306,
user='root',
password='',
database='nbweb',
charset='utf8'
)
cursor = conn.cursor()
sql = 'create table userinfo(id int primary key auto_increment, name char(10) not null, age int unsigned);'
cursor.execute(sql)
conn.commit()
conn.close()
3.6 urls.py文件
作用：用于发起请求的文件路径
在这里插入代码片
import views
urlpatterns = [
# ('/', views.html),
# ('/xx.css', views.css),
# ('/1.jpg', views.jpg),
# ('/xx.js', views.js),
# ('/person', views.person),
('/index', views.index),
]
3.7 views.py文件
作用：
文件里都是功能函数
import time
# def html(conn):
# # 连接数据库,拿数据,将数据添加到html文件中,到页面展示
# now = str(time.time())
# with open('templates/beatfulpage.html', 'r', encoding='utf-8') as f:
# data = f.read()
# data = data.replace('%xxoo%', now).encode('utf-8')
#
# conn.send(data)
#
# conn.close()
# # return data
#
# def css(conn):
# with open('statics/xx.css', 'rb') as f:
# data = f.read()
# # return data
# conn.send(data)
#
# conn.close()
# def jpg(conn):
# with open('statics/1.jpg', 'rb') as f:
# data = f.read()
# # return data
# conn.send(data)
#
# conn.close()
# def js(conn):
# with open('statics/xx.js', 'rb') as f:
# data = f.read()
# # return data
# conn.send(data)
#
# conn.close()
# def person(conn):
# with open('templates/person.html', 'rb') as f:
# data = f.read()
# # return data
# conn.send(data)
# conn.close()
# 必须要写一个conn形参
def index(conn):
with open('templates/index.html', 'rb') as f:
data = f.read()
# return data
conn.send(data)
conn.close()
3.8 wsgi.py文件
作用：
核心代码，进行http通信，接受请求，响应数据
import socket
import time
from threading import Thread
from urls import urlpatterns
def run():
server = socket.socket()
IP_PORT = ('127.0.0.1', 8001)
server.bind(IP_PORT)
server.listen()
while True:
conn, addr = server.accept()
from_client_msg = conn.recv(1024)
from_browser_msg = from_client_msg.decode()
print(from_browser_msg)
path = from_browser_msg.split(' ')[1]
conn.send(b'HTTP/1.1 200 ok\r\n\r\n')
for item in urlpatterns:
if item[0] == path:
# t = Thread(target=item[1],args=(conn,))
# t.start()
data = item[1](conn)
break
# server.close()
3.9 readme文件
作用：
介绍项目的使用和功能
1 配置路径对应的函数关系 urls.py文件中,有参考例子
2 去views.py文件中写 视图函数
3 templates文件夹中创建html文件
4. 小提示和小练习
4.1 小提示
1. bootstrap中封装好的js使用jquery框架写的，所以如果想用bootstrap中的js组件，必须导入jquery
2. 前端样式组件库和图标的网站，除了bootstrap外，还有一下几种
前端样式组件库：
ant-design-vue
element
图标：
fontawesome
iconfont阿里矢量图
4.2 小练习
用bootstrap完成以下页面：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="page-header">
<h1>信息收集卡 <small>共三步</small></h1>
</div>
<div class="progress ">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100"
style="width: 33%;">
1/3
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
基本信息
<span class="glyphicon glyphicon-pushpin pull-right"></span>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-4 col-md-offset-2">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="姓名">
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">手机</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" placeholder="手机">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email" placeholder="邮箱">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="password" placeholder="密码">
</div>
</div>
<div class="form-group">
<label for="avatar" class="col-sm-2 control-label">头像</label>
<div class="col-sm-10">
<input type="file" id="avatar">
<p class="help-block">只支持png,jgp,gif格式.</p>
</div>
</div>
<div class="form-group">
<label for="attr" class="col-sm-2 control-label">属性</label>
<div class="col-sm-10">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="attr" value="option1"
checked>
我是一个好人
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
你是一个坏人
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3"
disabled>
我不是一个人
</label>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<button class="btn btn-success pull-right">下一步</button>
</div>
</body>
<script src="jquery.js"></script>
</html>
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="icon" href="xx.ico"> 浏览器自动给后台发请求,要这个小图标, 默认请求路径为 href"/favicon.ico" -->
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<form class="form-inline">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="搜索">
</div>
<button type="submit" class="btn btn-primary">搜索</button>
<a href="" class="btn btn-success pull-right">添加</a>
<!-- <input type="submit">-->
<!-- <button></button>-->
</form>
<table class="table table-bordered table-striped" style="margin-top: 10px;">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td class="text-center">
<a href="" class="btn btn-success">
<span class="glyphicon glyphicon-pencil"></span>
编辑
</a>
<a href="" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span>
删除
</a>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
<td class="text-center">
<a href="" class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-pencil"></span>
编辑
</a>
<a href="" class="btn btn-danger btn-sm">
<span class="glyphicon glyphicon-remove"></span>
删除
</a>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
<td class="text-center">
<a href="" class="btn btn-success">
<span class="glyphicon glyphicon-pencil"></span>
编辑
</a>
<a href="" class="btn btn-danger">
<span class="glyphicon glyphicon-remove"></span>
删除
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<nav aria-label="Page navigation" class="pull-right">
<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>
</body>
<script src="jquery.js"></script>
</html>
版权声明：本文为weixin_46818279原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。