初识BootStrap框架
文章目录
前言
提示：这里可以添加本文要记录的大概内容：
因为公司没有前端,所以把对后端特别友好的BootStrap框架进行封装成了EADP.但是由于之前从未听说过此框架.所以系统性的学习了一下.
感受
这个框架是基于jquery框架的前端框架,一般情况下要与jquery结合使用,使用方式也与其他的框架差不多.样式非常的简约,但是也非常好看.Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。这里的响应式就是随着窗口的大小而改变.
一、BootStrap是什么？
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
一、什么是 Bootstrap 网格系统（Grid System）？
BootStrap的官方文档是这样描述的:“Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。”
简单来说就是把屏幕分成十二列.可以根据自己的偏好来想要让自己的组件占有多大位置,如下图所示:
<div class="container">
<h1>Hello, world!</h1>
<div class="row">
<div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第一列</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<h4>第二列 - 分为四个盒子</h4>
<div class="row">
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
Consectetur art party Tonx culpa semiotics. Pinterest
assumenda minim organic quis.
</p>
</div>
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
</div>
<div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim.
</p>
</div>
</div>
</div>
</div>
</div>
二、使用步骤
1.引入库
在使用之前需要下载BootStrap的压缩包.也要引入jquery.开发工具则不限制.eclipse,idea
都可.但是比较推荐HBuilder X这个IDE.界面简单,而且内置了服务器.默认端口号是8848,这个需要注意一下,防止端口号冲突.可以直接对页面效果预览,对初学者及其友好.在使用之前要在中引入css和js.如下图所示:
<head>
<meta charset="utf-8">
<title>模态框</title>
<link rel="stylesheet" href="bootStrap/css/bootstrap.min.css"/>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="bootStrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>
2.表单控件
以下将代码粘贴出来:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单控件</title>
<link rel="stylesheet" type="text/css" href="bootStrap/css/bootstrap.min.css"/>
</head>
<body>
<!-- 表单布局,水平表单,设置样式,form-horizonal -->
<form action="#" class="form-horizontal" role="form">
<h2 align="center">
用户信息表
</h2>
<!-- 表单中的表单元素zu -->
<div class="form-group">
<label for="uname" class="control-label col-md-2">姓名:</label>
<div class="col-md-8">
<input type="text" id="name" class="form-control" placeholder="请输入姓名"/>
</div>
</div>
<div class="form-group">
<label for="pwd" class="control-label col-md-2">密码:</label>
<div class="col-md-8">
<input type="text" id="name" class="form-control" placeholder="请输入密码"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">爱好:</label>
<div class="col-md-8 col-lg-offset-1" >
<label class="checkbox-inline">
<input type="checkbox" name="hobby"/>唱歌
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby"/>跳舞
</label>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2">城市:</label>
<div class="col-md-8">
<select class="form-control">
<option>请选择城市</option>
<option>北京</option>
<option>上海</option>
</select>
</div>
</div>
<div class="form-group">
<label for="remark" class="control-label col-md-2">简介:</label>
<div class="col-md-8">
<textarea id="remark" class="form-control "></textarea>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-lg-offset-5">
<button class="btn btn-info">提交</button>
</div>
</div>
</form>
<hr />
<!-- 内联表单 -->
<form class="form-inline">
<div class="form-group">
<label for="userName">姓名:</label>
<input type="text" id="username" class="form-control" placeholder="请输入姓名"/>
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input type="text" id="password" class="form-control" placeholder="请输入密码"/>
</div>
<div class="form-group">
<button class="btn btn-info">提交</button>
</div>
</form>
</body>
</html>
效果如下:
3.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
<link rel="stylesheet" type="text/css" href="bootStrap/css/bootstrap.min.css"/>
</head>
<body>
<!-- 表单
1,文本框 .form-control表单控件的大小
-->
<input type="text"/><br />
<select>
<option>请选择城市</option>
<option>北京</option>
<option>上海</option>
</select><br />
<textarea></textarea> <br />
<div class="row">
<div class="col-md-3">
<select class="form-control">
<option>请选择城市</option>
<option>北京</option>
<option>上海</option>
</select><br />
<select class="form-control" multiple="multiple">
<option>请选择城市</option>
<option>北京</option>
<option>上海</option>
</select><br />
</div>
</div>
<div class="row">
<div class="col-md-3">
<input class="form-control" type="text"/><br />
<input class="form-control input-lg" type="text"/><br />
<input class="form-control input-sm" type="text"/><br />
<textarea class="form-control"></textarea>
</div>
</div>
<input type="checkbox" name="hobby"/>唱歌
<input type="checkbox" name="hobby"/>跳舞
<input type="radio" name="sex"/>男
<input type="radio" name="sex"/>女
<hr />
<!-- 垂直显示 -->
<div class="row">
<div class="col-md-3">
<div class="checkbox"">
<label><input type="checkbox" name="hobby"/>唱歌</label>
</div>
<div class="checkbox"">
<label><input type="checkbox" name="hobby"/>跳舞</label>
</div>
</div>
</div>
<!-- 水平显示 -->
<div class="row">
<div class="col-md-3">
<label class="checkbox-inline">
<input type="checkbox" name="hobby"/>唱歌
</label>
<label class="checkbox-inline">
<input type="checkbox" name="hobby"/>跳舞
</label>
</div>
</div>
<!-- 单选框-->
<div class="row">
<div class="col-md-3">
<div class="radio">
<label><input type="radio" name="sex"/>男</label>
</div>
<div class="radio"">
<label><input type="radio" name="sex"/>女</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<label class="radio-inline">
<input type="radio" name="sex" value="男"/>男
</label>
<label class="radio-inline">
<input type="radio" name="sex" value="女"/>女
</label>
</div>
</div>
<button class="btn">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-default">按钮</button>
<button class="btn btn-link">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-primary">按钮</button>
<br />
<hr />
<!-- 通过按钮样式设置其他元素为按钮效果 -->
<a href="#" class="btn btn-success">a标签</a>
<span class="btn btn-danger">span标签</span>
<!-- 设置按钮的大小 -->
<button class="btn btn-primary btn-lg">按钮</button>
<button class="btn btn-primary btn-sm">按钮</button>
<button class="btn btn-primary btn-xs">按钮</button>
<br />
<hr />
<!-- 按钮禁用,真正意义上的禁用 -->
<button class="btn btn-primary btn-xs" onclick="alert('点击事件')" disabled>按钮</button>
<!-- 样式上禁用,但并非真正的禁用 -->
<button class="btn btn-danger btn-xs disabled" onclick="alert('样式禁用')">按钮</button>
</body>
</html>
4.常用样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用样式</title>
<link rel="stylesheet" type="text/css" href="bootStrap/css/bootstrap.css"/>
</head>
<body>
1,列表
<!-- 无序列表
<ul><li></li></ul>
有序列表
<ol><li></li></ol>
定义列表
<dl><dt><dd></dd></dt></dl> -->
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
</ol>
<dl>
<dt>第一</dt>
<dd>定义列表1</dd>
<dt>第二</dt>
<dd>定义列表3</dd>
</dl>
<hr/>
<!-- 去点列表 -->
<ul class="list-unstyled">
<li>去点列表1</li>
<li>去点列表2</li>
</ul>
<!-- 内联列表-->
<ul class="list-inline">
<li>首页</li>
<li>java</li>
<li>python</li>
</ul>
<div class="container">
<div class="row">
<div class="col-md-4">4列</div>
<div class="col-md-8">8列</div>
</div>
</div>
<hr/>
<!-- 单行代码 -->
this is a simple code<br />
<code>this is a simple code</code><br/>
<code>this is a simple code
this is a simple code</code>
<!-- 快捷键 -->
<p>使用<kbd>ctrl</kbd>+<kbd>s</kbd>进行保存</p>
<!-- 多行代码 -->
<pre class="pre-scrollable">
public void recordItem(BizEntity e, String belongUserId) throws Exception {
Assert.notNull(e, "对象不能为空。");
String unitId = null;
if (e instanceof IUnit) {
unitId = ((IUnit)e).getUnitId();
}
CheckWorkflowLog checkWorkFlowLog = new CheckWorkflowLog();
checkWorkFlowLog.setBeanId("paper");
checkWorkFlowLog.setDataId(e.getId());
checkWorkFlowLog.setCreateTime(DateUtil.getSysDateTimestamp());
// checkWorkFlowLog.setCreateUserId(e.getCreateUserID());
checkWorkFlowLog.setCreateUserId("后台线程");
checkWorkFlowLog.setUnitId(unitId);
checkWorkFlowLog.setBelongUserId(belongUserId);
if (e instanceof BizCheckEntity) {
checkWorkFlowLog.setPrevRoleId("2");
checkWorkFlowLog.setRoldId("3,4");
// checkWorkFlowLog.setRoleIded(vo.getRoleIded());
// checkWorkFlowLog.setSignState(vo.getSignState());
// checkWorkFlowLog.setSignType(vo.getSignType());
checkWorkFlowLog.setCheckStatus(CHECK_STATUS_TEACHER_SUBMIT);
}
SessionFactory sessionFactory = applicationContext.getBean("sessionFactory", SessionFactory.class);
Session session = sessionFactory.openSession();
// session.evict(checkWorkFlowLog);
session.save(checkWorkFlowLog);
session.flush();
}
</pre>
<!-- 当长度过长时,可以添加滚动条 -->
<pre class="pre-scrollable">
<ol>
<li>........................</li>
<li>........................</li>
<li>........................</li>
<li>........................</li>
<li>........................</li>
<li>........................</li>
<li>........................</li>
<li>........................</li>
<li>........................</li>
<li>........................</li>
<li>........................</li>
<li>........................</li>
</ol>
</pre>
<hr />
<br />
<table class="table table-bordered table-striped table-hover table-condensed">
<tr class="info">
<th>java</th>
<th>数据库</th>
<th>javaScript</th>
</tr>
<tr class="success">
<th>面向对象</th>
<th>oracle</th>
<th>json</th>
</tr>
<tr class="active">
<th>数组</th>
<th>mysql</th>
<th>ajax</th>
</tr>
<tr class="danger">
<th>java</th>
<th>数据库</th>
<th>javaScript</th>
</tr>
<tr>
<th>面向对象</th>
<th>oracle</th>
<th>json</th>
</tr>
<tr>
<th>数组</th>
<th>mysql</th>
<th>ajax</th>
</tr>
</table>
</body>
</html>
5.缩略图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>缩略图</title>
<link rel="stylesheet" type="text/css" href="bootStrap/css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div class="row">
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/1.png" style="width: 240 ;height: 360;" alt="..."/>
<h3>高圆圆</h3>
<p>高圆圆，原名高园园，1979年10月5日出生于北京市丰台区，祖籍河北唐山，中国内地影视女演员、模特。1996年，被广告公司发掘，随后拍摄大量的商业广告，在广告圈中崭露头角。1997年，主演个人首部大银幕作品《爱情麻辣烫》，从此开始了她的演艺生涯。2003年，凭借古装武侠爱情剧《倚天屠龙记》受到广泛关注</p>
<button class="btn btn-info">
<span class="glyphicon glyphicon-heart"></span>喜欢</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论</button>
</div>
</div>
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/2.png" style="width: 240 ;height: 360;" alt="..."/>
<h3>图灵</h3>
<p>计算机之父</p>
<button class="btn btn-info">
<span class="glyphicon glyphicon-heart"></span>喜欢</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论</button>
</div>
</div>
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/1.png" style="width: 240 ;height: 360;" alt="..."/>
<h3>高圆圆</h3>
<p>高圆圆，原名高园园，1979年10月5日出生于北京市丰台区，祖籍河北唐山，中国内地影视女演员、模特。1996年，被广告公司发掘，随后拍摄大量的商业广告，在广告圈中崭露头角。1997年，主演个人首部大银幕作品《爱情麻辣烫》，从此开始了她的演艺生涯。2003年，凭借古装武侠爱情剧《倚天屠龙记》受到广泛关注</p>
<button class="btn btn-info">
<span class="glyphicon glyphicon-heart"></span>喜欢</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论</button>
</div>
</div>
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/2.png" style="width: 240 ;height: 360;" alt="..."/>
<h3>图灵</h3>
<p>计算机之父</p>
<button class="btn btn-info">
<span class="glyphicon glyphicon-heart"></span>喜欢</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论</button>
</div>
</div>
</div>
<div class="row">
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/1.png" style="width: 240 ;height: 360;" alt="..."/>
<h3>高圆圆</h3>
<p>高圆圆，原名高园园，1979年10月5日出生于北京市丰台区，祖籍河北唐山，中国内地影视女演员、模特。1996年，被广告公司发掘，随后拍摄大量的商业广告，在广告圈中崭露头角。1997年，主演个人首部大银幕作品《爱情麻辣烫》，从此开始了她的演艺生涯。2003年，凭借古装武侠爱情剧《倚天屠龙记》受到广泛关注</p>
<button class="btn btn-info">
<span class="glyphicon glyphicon-heart"></span>喜欢</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论</button>
</div>
</div>
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/2.png" style="width: 240 ;height: 360;" alt="..."/>
<h3>图灵</h3>
<p>计算机之父</p>
<button class="btn btn-info">
<span class="glyphicon glyphicon-heart"></span>喜欢</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论</button>
</div>
</div>
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/1.png" style="width: 240 ;height: 360;" alt="..."/>
<h3>高圆圆</h3>
<p>高圆圆，原名高园园，1979年10月5日出生于北京市丰台区，祖籍河北唐山，中国内地影视女演员、模特。1996年，被广告公司发掘，随后拍摄大量的商业广告，在广告圈中崭露头角。1997年，主演个人首部大银幕作品《爱情麻辣烫》，从此开始了她的演艺生涯。2003年，凭借古装武侠爱情剧《倚天屠龙记》受到广泛关注</p>
<button class="btn btn-info">
<span class="glyphicon glyphicon-heart"></span>喜欢</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论</button>
</div>
</div>
<!-- 缩略图 -->
<div class="col-md-3">
<div class="thumbnail">
<img src="img/2.png" style="width: 240 ;height: 360;" alt="..."/>
<h3>图灵</h3>
<p>计算机之父</p>
<button class="btn btn-info">
<span class="glyphicon glyphicon-heart"></span>喜欢</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>评论</button>
</div>
</div>
</div>
</div>
</body>
</html>
6.导航
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航</title>
<link rel="stylesheet" type="text/css" href="bootStrap/css/bootstrap.min.css"/>
</head>
<body>
<p>标签式的导航菜单</p>
<ul class=" nav nav-tabs">
<li class="active"> <a href="05-常用样式.html">常用样式</a></li>
<li><a href="05-常用样式.html">常用样式</a></li>
<li><a href="08-缩略图.html">缩略图</a></li>
<li><a href="09-面板.html">面板</a></li>
<li><a href="表单.html">表单</a></li>
<li><a href="表单控件.html">表单控件</a></li>
</ul>
<hr />
<p>标签式的导航菜单</p>
<ul class=" nav nav-pills">
<li class="active"> <a href="05-常用样式.html">常用样式</a></li>
<li><a href="05-常用样式.html">常用样式</a></li>
<li><a href="08-缩略图.html">缩略图</a></li>
<li><a href="09-面板.html">面板</a></li>
<li><a href="表单.html">表单</a></li>
<li><a href="表单控件.html">表单控件</a></li>
</ul>
<hr/>
<p>面包屑式导航栏<p>
<ul class="breadcrumb">
<li class="active"> <a href="05-常用样式.html">常用样式</a></li>
<li><a href="05-常用样式.html">常用样式</a></li>
<li><a href="08-缩略图.html">缩略图</a></li>
<li><a href="09-面板.html">面板</a></li>
<li><a href="表单.html">表单</a></li>
<li><a href="表单控件.html">表单控件</a></li>
</ul>
<p>分页导航</p>
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><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>
</body>
</html>
7.下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
<link rel="stylesheet" href="bootStrap/css/bootstrap.min.css"/>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="bootStrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
喜欢的频道
<!-- 设置下拉箭头 -->
<span class="caret"></span>
</button>
<!-- 准备的下来菜单 -->
<ul class="dropdown-menu">
<li class="dropdown-header">科普</li>
<li><a href="05-常用样式.html" target="_blank">人与自然</a></li>
<!-- 分割线 -->
<li class="divider"></li>
<li class="dropdown-header">搞笑</li>
<li class="active"><a href="05-常用样式.html" target="_blank">人与自然</a></li>
<li class="disabled"><a href="05-常用样式.html" target="_blank">人与自然</a></li>
<li><a href="05-常用样式.html" target="_blank">人与自然</a></li>
</ul>
</div>
</body>
</html>
8.模态框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模态框</title>
<link rel="stylesheet" href="bootStrap/css/bootstrap.min.css"/>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="bootStrap/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 操作模态框 -->
<!-- 打开模态框: $('#identifier').modal('show')
关闭模态框: $('#identifier').modal('hide') -->
<!-- 1,通过date属性 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态框</button>
<button class="btn btn-primary" id="btn">打开模态框</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="uname" class="col-md-2 control-label" >姓名</label>
<div class="col-md-8">
<input type="text" id="uname" class="form-control" placeholder="请输入姓名"/>
</div>
</div>
<div class="form-group">
<label class="pwd" class="col-md-2 control-label" >密码</label>
<div class="col-md-8">
<input type="text" id="uname" class="form-control" placeholder="请输入密码"/>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary" id="submit_btn">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script type="text/javascript">
//绑定按钮的点击事件
$("#btn").click(function(){
//手动打开模态框
$("#myModal").modal("show");
});
$("#submit_btn").click(function(){
$("#myModal").modal("hide");
});
</script>
</body>
</html>
总结
这些只是最常用的组件,BootStrap还提供了许多样式.可以参阅BootStrap的菜鸟文档:https://www.runoob.com/bootstrap/bootstrap-tutorial.html.
1198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
