bootstrap讲义.doc

上传人：人****来

文档编号：4110020

上传时间：2024-07-30

格式：DOC

页数：64

大小：880.53KB

下载积分：14 金币

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档保存到电脑，查找使用更方便

14 金币

下载 开通VIP

还剩页未读，继续阅读

举报
申诉本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请申请举报、认领或删除 立即下载

配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关键词：
bootstrap 讲义

资源描述：

排版样式一．页面排版 Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。 1.页面主体 Bootstrap 将全局font-size 设置为14px，line-height 行高设置为1.428(即 20px)；<p>段落元素被设置等于1/2 行高(即10px)；颜色被设置为#333。 2.标题 //内联元素使用标题字体 <span class="h1">Bootstrap</span> 在h1 ~ h6 元素之间，还可以嵌入一个small 元素作为副标题， //在标题元素内插入small 元素 <h1>Bootstrap 框架<small>Bootstrap 小标题</small></h1> 在h1 ~ h6 下的small 样式也进行了改变，颜色变成淡灰色：#777，行高为1，粗度为400。 3.内联文本元素 //添加标记，<mark>元素或.mark 类 <p>Bootstrap<mark>框架</mark></p> //各种加线条的文本 <del>Bootstrap 框架</del> //删除的文本 <s>Bootstrap 框架</s> //无用的文本 <ins>Bootstrap 框架</ins> //插入的文本 <u>Bootstrap 框架</u> //效果同上，下划线文本 //各种强调的文本 <small>Bootstrap 框架</small> //标准字号的85% <strong>Bootstrap 框架</strong> //加粗700 <em>Bootstrap 框架</em> //倾斜 4.对齐 //设置文本对齐 <p class="text-left">Bootstrap 框架</p> //居左 <p class="text-center">Bootstrap 框架</p> //居中 <p class="text-right">Bootstrap 框架</p> //居右 <p class="text-justify">Bootstrap 框架</p> //两端对齐，支持度不佳 <p class="text-nowrap">Bootstrap 框架</p> //不换行 5.大小写 //设置英文文本大小写 <p class="text-lowercase">Bootstrap 框架</p> //小写 <p class="text-uppercase">Bootstrap 框架</p> //大写 <p class="text-capitalize">Bootstrap 框架</p>//首字母大写 6.缩略语 //缩略语 Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr> 7.地址文本 //设置地址，去掉了倾斜，设置了行高，底部20px <address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address> 8.引用文本 //默认样式引用，增加了做边线，设定了字体大小和内外边距 <blockquote> Bootstrap 框架 </blockquote> //反向 <blockquote class="blockquote-reverse "> Bootstrap 框架 </blockquote> 9.列表排版 //移出默认样式 <ul class="list-unstyled"> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> </ul> //设置成内联 <ul class="list-inline"> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> <li>Bootstrap 框架</li> </ul> //水平排列描述列表 <dl class="dl-horizontal"> <dt>Bootstrap</dt> <dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd> </dl> 10.代码 //内联代码 <code><section></code> //用户输入 press <kbd>ctrl + ,</kbd> //代码块 <pre><p>Please input...</p></pre> Bootstrap 还列举了<var>表示标记变量，<samp>表示程序输出，只不过没有重新复写CSS。表格和按钮一．表格 Bootstrap 提供了一些丰富的表格样式供开发者使用。 1.基本格式 //实现基本的表格样式 <table class="table"> 注：我们可以通过Firebug 查看相应的CSS。 2.条纹状表格 //让<tbody>里的行产生一行隔一行加单色背景效果 <table class="table table-striped"> 注：表格效果需要基于基本格式.table 3.带边框的表格 //给表格增加边框 <table class="table table-bordered"> 4.悬停鼠标 //让<tbody>下的表格悬停鼠标实现背景效果 <table class="table table-hover"> 5.状态类 //可以单独设置每一行的背景样式 <tr class="success"> 注：一共五种不同的样式可供选择。样式说明 active 鼠标悬停在行或单元格上 success 标识成功或积极的动作 info 标识普通的提示信息或动作 warning 标识警告或需要用户注意 danger 表示危险或潜在的带来负面影响的动作 6.隐藏某一行 //隐藏行 <tr class="sr-only"> 7.响应式表格 //表格父元素设置响应式，小于768px 出现边框 <body class="table-responsive"> 二．按钮 Bootstrap 提供了很多丰富按钮供开发者使用。 1.可作为按钮使用的标签或元素 //转化成普通按钮 <a href="###" class="btn btn-default">Link</a> <button class="btn btn-default">Button</button> <input type="button" class="btn btn-default" value="input"> 注意事项有三点： (1).针对组件的注意事项虽然按钮类可以应用到<a> 和<button> 元素上，但是，导航和导航条组件只支持 <button> 元素。 (2).链接被作为按钮使用时的注意事项如果<a> 元素被作为按钮使用-- 并用于在当前页面触发某些功能-- 而不是用于链接其他页面或链接当前页面中的其他部分，那么，务必为其设置role="button" 属性。 (3).跨浏览器展现我们总结的最佳实践是：强烈建议尽可能使用<button> 元素来获得在各个浏览器上获得相匹配的绘制效果。另外，我们还发现了Firefox <30 版本的浏览器上出现的一个bug，其表现是：阻止我们为基于<input> 元素所创建的按钮设置line-height 属性，这就导致在 Firefox 浏览器上不能完全和其他按钮保持一致的高度。 2.预定义样式 //一般信息 <button class="btn btn-info">Button</button> 样式说明 btn-default 默认样式 btn-success 成功样式 btn-info 一般信息样式 btn-warning 警告样式 btn-danger 危险样式 btn-primary 首选项样式 btn-link 链接样式 3.尺寸大小 //从大到小的尺寸 <button class="btn btn-lg">Button</button> <button class="btn">Button</button> <button class="btn btn-sm">Button</button> <button class="btn btn-xs">Button</button> 4.块级按钮 //块级换行 <button class="btn btn-block">Button</button> <button class="btn btn-block">Button</button> 5.激活状态 //激活按钮 <button class="btn active">Button</button> 6.禁用状态 //禁用按钮 <button class="btn active disabled">Button</button> 表单和图片一．表单 Bootstrap 提供了一些丰富的表单样式供开发者使用。 1.基本格式 //实现基本的表单样式 <form> <div class="form-group"> <label>电子邮件</label> <input type="email" class="form-control" placeholder="请输入您的电子邮件"> </div> <div class="form-group"> <label>密码</label> <input type="password" class="form-control" placeholder="请输入您的密码"> </div> </form> 注：只有正确设置了输入框的type 类型，才能被赋予正确的样式。支持的输入框控件包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和color。 2.内联表单 //让表单左对齐浮动，并表现为inline-block 内联块结构 <form class="form-inline"> 注：当小于768px，会恢复独占样式 3.表单合组 //前后增加片段 <div class="input-group"> <div class="input-group-addon">￥</div> <input type="text" class="form-control"> <div class="input-group-addon">.00</div> </div> 4.水平排列 //让表单内的元素保持水平排列 <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">电子邮件</label> <div class="col-sm-10"> <input type="email" class="form-control" placeholder="请输入您的电子邮件"> </div> </div> </form> 注：这里用到了col-sm 栅格系统，后面章节会重点讲解，而control-label 表示和父元素样式同步。 5.复选框和单选框 //设置复选框，在一行 <div class="checkbox"> <label> <input type="checkbox">体育 </label> </div> <div class="checkbox"> <label> <input type="checkbox">音乐 </label> </div> //设置禁用的复选框 <div class="checkbox disabled"> <label> <input type="checkbox" disabled>音乐 </label> </div> //设置内联一行显示的复选框 <label class="checkbox-inline"> <input type="checkbox">体育 </label> <label class="checkbox-inline disabled"> <input type="checkbox" disabled>音乐 </label> //设置单选框 <div class="radio disabled"> <label> <input type="radio" name="sex" disabled>男 </label> </div> 6.下拉列表 //设置下拉列表 <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> 7.校验状态 //设置为错误状态 <div class="form-group has-error"> 注：还有其他状态如下 has-error 错误状态 has-success 成功状态 has-warning 警告状态 //label 标签同步相应状态 <label class="control-label">Input with success</label> 8.添加额外的图标 //文本框右侧内置文本图标 <div class="form-group has-feedback"> <label>电子邮件</label> <input type="email" class="form-control"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> 注：除了glyphicon-ok 外，还有几个如下表： glyphicon-ok 成功状态 glyphicon-warning-sign 警告状态 glyphicon-remove 错误状态 9.控制尺寸 //从大到小 <input type="password" class="form-control input-lg"> <input type="password" class="form-control"> <input type="password" class="form-control input-sm"> 注：也可以设置父元素form-group-lg、form-group-sm，来调整。二．图片 Bootstrap 提供了一些丰富的图片样式供开发者使用。 1.图片形状 //三种形状 <img src="img/pic.png" alt="图片" class="img-rounded"> <img src="img/pic.png" alt="图片" class="img-circle"> <img src="img/pic.png" alt="图片" class="img-thumbnail"> //响应式图片 <img src="img/pic.png" alt="图片" class="img-responsive"> 栅格系统一．移动设备优先在HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。 //分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 二．布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于padding 等属性的原因，这两种容器类不能相互嵌套。 //固定宽度 <div class="container"> ... </div> //100%宽度 <div class="container-fluid"> ... </div> 栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12 列。通过一系列的行(row)与列(column)的组合来创建页面布局。工作原理如下： 1.“行（row）”必须包含在.container （固定宽度）或.container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。 2.通过“行（row）”在水平方向创建一组“列（column）”。 3.你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。 4.类似.row 和.col-xs-4 这种预定义的类，可以用来快速创建栅格布局。 Bootstrap 源码中定义的mixin 也可以用来创建语义化的布局。 5.通过为“列（column）”设置padding 属性，从而创建列与列之间的间隔（gutter）。通过为.row 元素设置负值margin 从而抵消掉为.container 元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。 6.负值的margin 就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。 7.栅格系统中的列是通过指定1 到12 的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4 来创建。 8.如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）” 所在的元素将被作为一个整体另起一行排列。 9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*不存在，也影响大屏幕设备。 //创建一个响应式行 <div class="container"> <div class="row"> ... </div> </div> //创建最多12 列的响应式行 <div class="container"> <div class="row"> <div class="col-md-1 a">1</div> <div class="col-md-1 a">2</div> <div class="col-md-1 a">3</div> <div class="col-md-1 a">4</div> <div class="col-md-1 a">5</div> <div class="col-md-1 a">6</div> <div class="col-md-1 a">7</div> <div class="col-md-1 a">8</div> <div class="col-md-1 a">9</div> <div class="col-md-1 a">10</div> <div class="col-md-1 a">11</div> <div class="col-md-1 a">12</div> </div> </div> //为了显示明显的CSS .a { height: 100px; background-color: #eee; border:1px solid #ccc; } //总列数都是12，每列分配多列 <div class="container"> <div class="row"> <div class="col-md-4 a">1-4</div> <div class="col-md-4 a">5-8</div> <div class="col-md-4 a">9-12</div> </div> <div class="row"> <div class="col-md-8 a">1-8</div> <div class="col-md-4 a">9-12</div> </div> </div> 栅格参数表如上图所示，栅格系统最外层区分了四种宽度的浏览器：超小屏(<768px)、小屏 (>=768px)、中屏(>=992px)和大屏(>=1200px)。而内层.container 容器的自适应宽度为：自动、750px、970px 和1170px。自动的意思为，如果你是手机屏幕，则全面独占一行显示。 //四种屏幕分类全部激活 <div class="container"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 a">4</div> </div> </div> //有时我们可以设置列偏移，让中间保持空隙 <div class="container"> <div class="row"> <div class="col-md-8 a">8</div> <div class="col-md-3 col-md-offset-1 a">3</div> </div> </div> //也可以嵌套，嵌满也是12 列 <div class="container"> <div class="row"> <div class="col-md-9 a"> <div class="col-md-8 a">1-8</div> <div class="col-md-4 a">9-12</div> </div> <div class="col-md-3 a"> 11-12 </div> </div> </div> //可以把两个列交换位置，push 向左移动，pull 向右移动 <div class="container"> <div class="row"> <div class="col-md-9 col-md-push-3 a">9</div> <div class="col-md-3 col-md-pull-9 a">3</div> </div> </div> 辅组类和响应式工具一．辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、显示关闭图标等等。 1. 情景文本颜色样式名描述 text-muted 柔和灰 text-primary 主要蓝 text-success 成功绿 text-info 信息蓝 text-warning 警告黄 text-danger 危险红 //各种色调的字体 <p class="text-muted">Bootstrap 视频教程</p> <p class="text-primary">Bootstrap 视频教程</p> <p class="text-success">Bootstrap 视频教程</p> <p class="text-info">Bootstrap 视频教程</p> <p class="text-warning">Bootstrap 视频教程</p> <p class="text-danger">Bootstrap 视频教程</p> 2. 情景背景色 bg-primary 主要蓝 bg-success 成功绿 bg-info 信息蓝 bg-warning 警告黄 bg-danger 危险红 //各种色调的背景 <p class="bg-primary">Bootstrap 视频教程</p> <p class="bg-success">Bootstrap 视频教程</p> <p class="bg-info">Bootstrap 视频教程</p> <p class="bg-warning">Bootstrap 视频教程</p> <p class="bg-danger">Bootstrap 视频教程</p> 3.关闭按钮 <button type="button" class="close">×</button> 4.三角符号 <span class="caret"></span> 5.快速浮动 <div class="pull-left">左边</div> <div class="pull-right">右边</div> 注：这个浮动其实就是float，只不过使用了!important 加强了优先级。 6.块级居中 <div class="center-block">居中</div> 注：就是margin:x auto；并且设置了display:block;。 7.清理浮动 <div class="clearfix"></div> 注：这个div 可以放在需要清理浮动区块的前面即可。 8.显示和隐藏 <div class="show">show</div> <div class="hidden">hidden</div> 二．响应式工具在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容。响应式工具类，就提供了这种解决方案。 //超小屏幕激活显示 <div class="visible-xs-block a">Bootstrap</div> //超小屏幕激活隐藏 <div class="hidden-xs a">Bootstrap</div> 注：对于显示的内容，有三种变体，分别为：block、inline-block、inline。图标菜单按钮组件一．小图标组件 Bootstrap 提供了免费的263 个小图标（数了两次），具体可以参考中文官网的组件链接：http://v3.bootcss./ponents/#glyphicons。可以使用<i>或<span>标签来配合使用，具体如下： //使用小图标 <i class="glyphicon glyphicon-star"></i> <span class="glyphicon glyphicon-star"></span> //也可以结合按钮 <button class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star"></span> </button> <button class="btn btn-default btn"> <span class="glyphicon glyphicon-star"></span> </button> <button class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-star"></span> </button> <button class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-star"></span> </button> 二．下拉菜单组件下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。 //基本格式 <div class="dropdown"> <button class="btn btn-default" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> </div> 按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置 data-toggle="dropdown"才能有效。对于菜单部分，设置class="dropdown-menu"才能自动隐藏并添加固定样式。设置class="caret"表示箭头，可上可下。 //设置向上触发 <div class="dropup"> //菜单项居右对齐，默认值是dropdown-menu-left <ul class="dropdown-menu dropdown-menu-right"> //设置菜单的标题，不要加超链接 <li class="dropdown-header">网站导航</li> //设置菜单的分割线 <li class="divider"></li> //设置菜单的禁用项 <li class="disabled"><a href="#">产品</a></li> //让菜单默认显示 <div class="dropdown open"> 三．按钮组组件按钮组就是多个按钮集成在一个容器里形成独有的效果。 //基本格式 <div class="btn-group"> <button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">右</button> </div> //将多个按钮组整合起来便于管理 <div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">右</button> </div> <div class="btn-group"> <button type="button" class="btn btn-default">1</button> <button type="button" class="btn btn-default">2</button> <button type="button" class="btn btn-default">3</button> </div> </div> //设置按钮组大小 <div class="btn-group btn-group-lg"> <div class="btn-group> <div class="btn-group btn-group-sm"> <div class="btn-group btn-group-xs"> //嵌套一个分组，比如下拉菜单 <div class="btn-group"> <button type="button" class="btn btn-default">左</button> <button type="button" class="btn btn-default">中</button> <button type="button" class="btn btn-default">右</button> <div class="btn-group"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">首页</a></li> <li><a href="#">资讯</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> </div> </div> 注意：这里<div>中并没有实现class="dropdown"，通过源码分析知道嵌套本身已经有定位就不需要再设置。而右边的圆角只要多加一个class="dropdown-toggle"即可。 //设置按钮组垂直排列 <div class="btn-group-vertical"> //设置两端对齐按钮组，使用<a>标签 <div class="btn-group-justified"> <a type="button" class="btn btn-default">左</a> <a ty

展开阅读全文

咨信网温馨提示：
1、咨信平台为文档C2C交易模式，即用户上传的文档直接被用户下载，收益归上传人（含作者）所有；本站仅是提供信息存储空间和展示预览，仅对用户上传内容的表现方式做保护处理，对上载内容不做任何修改或编辑。所展示的作品文档包括内容和图片全部来源于网络用户和作者上传投稿，我们不确定上传用户享有完全著作权，根据《信息网络传播权保护条例》，如果侵犯了您的版权、权益或隐私，请联系我们，核实后会尽快下架及时删除，并可随时和客服了解处理情况，尊重保护知识产权我们共同努力。
2、文档的总页数、文档格式和文档大小以系统显示为准(内容中显示的页数不一定正确)，网站客服只以系统显示的页数、文件格式、文档大小作为仲裁依据，个别因单元格分列造成显示页码不一将协商解决，平台无法对文档的真实性、完整性、权威性、准确性、专业性及其观点立场做任何保证或承诺，下载前须认真查看，确认无误后再购买，务必慎重购买；若有违法违纪将进行移交司法处理，若涉侵权平台将进行基本处罚并下架。
3、本站所有内容均由用户上传，付费前请自行鉴别，如您付费，意味着您已接受本站规则且自行承担风险，本站不进行额外附加服务，虚拟产品一经售出概不退款（未进行购买下载可退充值款），文档一经付费（服务费）、不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
4、如你看到网页展示的文档有www.zixin.com.cn水印，是因预览和防盗链等技术需要对页面进行转换压缩成图而已，我们并不对上传的文档进行任何编辑或修改，文档下载后都不会有水印标识（原文档上传前个别存留的除外），下载后原文更清晰；试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓；PPT和DOC文档可被视为“模板”，允许上传人保留章节、目录结构的情况下删减部份的内容；PDF文档不管是原文档转换或图片扫描而得，本站不作要求视为允许，下载前可先查看【教您几个在下载文档中可以更好的避免被坑】。
5、本文档所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用；网站提供的党政主题相关内容(国旗、国徽、党徽－－等)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
6、文档遇到问题，请及时联系平台进行协调解决，联系【微信客服】、【QQ客服】，若有其他问题请点击或扫码反馈【服务填表】；文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“【版权申诉】”，意见反馈和侵权处理邮箱：1219186828@qq.com；也可以拔打客服电话：0574-28810668；投诉电话：18658249818。

关于本文

本文标题：bootstrap讲义.doc
链接地址：https://www.zixin.com.cn/doc/4110020.html