bootstrap 之准备开发
定制bootstrap所有效果和插件都导入页面,会增加带宽负荷,发生冲突 http://getbootstrap.com/customize/ 下载预编译版https://github.com/twbs/bootstrap/releases/download/v3.0.2/bootstrap-3.0.2-dist.zip https://github.com/twbs/bootstrap/archive/v3.0.2.tar.gz 下载源代码版https://github.com/twbs/bootstrap/archive/v3.0.2.zip Bootstrap 文件结构bootstrap图片是使用ImageOptim工具进行压缩的 bootstrap.css 完整的boostrap样式表 bootstrap-responsive.css响应式布局,必须置于bootstrap.css之后,否则不具有响应式布局的功能 bootstrap.js 所有JavaScript响应式布局 编码规范在导入CSS文件时,应该明确定义rel和type声明 <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"> 图片的智能响应参见https://github.com/filamentgroup/Responsive-Images 需要使用两个相关文件rwd-images.js和.htaccess 使用rwd-images.js检测当前设备的屏幕分辨率,如果是大屏幕设备,向页面头部区域添加Base标记 .htaccess文件决定请求所需要的是原始图片还是小尺寸的图片 响应式设计1.添加meta标签<meta name="viewport" content="width=device-width,initial-scale=1.0"> 2.启用响应式CSS<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen"> 文本风格<h3>强调</h3> <p class="muted">提示</p> <p class="text-warning">警告类文本</p> <p class="text-error">错误类文本</p> <p class="text-info">通知类文本</p> <p class="text-success">成功类文本</p> 文本对齐风格<p class="text-left">文本左对齐</p> <p class="text-center">文本居中对齐</p> <p class="text-left">文本左对齐</p> 缩略语风格<p> <abbr class="initialism" title="Cascading Style Sheets">CSS</abbr>是层叠样式 </p> 地址风格<address> <a href="mailto:wengcc@ihep.ac.cn">地址</a> <br> A <br> B <br> </address> 引用风格<blockquote cite="http://www.baidu.com" class="pull-right"> <p> 101010101010101010101010 </p> </blockquote> 代码块<p>PHP的变量名 <code> $i=1;</code> </p> <pre> hello </pre> 缀式文本框<div class="input-prepend"> ??? <span class="add-on">E-mail</span> ??? <input class="span2" id="prependedInput" type="text" placeholder="xxx@xx.xx"> </div> <div class="input-append"> ??? <input class="span2" type="text" id="appendedInput"> ??? <span class="add-on">@ihep.ac.cn</span> </div> <div class="input-prepend input-append"> ??? <span class="add-on">E-mail</span> ??? <input class="span2" type="text" id="prependedInput" placeholder="Email"> ??? <span class="add-on">@163.com</span> </div> <div class="input-prepend input-append"> ??? <input type="button" class="btn" value="user" /> ??? <input type="text" /> ??? <button class="btn">注册</button> </div> 下拉按钮<div class="input-prepend input-append"> <input type="button" class="btn" value="Email"> <input type="text"> <div class="btn-group"> <button class="btn">@163.com</button> <button class="btn" data-toggle="dropdown" tabindex="-1"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">@126.com</a></li> <li><a href="#">@sohu.com</a></li> <li><a href="#">@qq.com</a></li> <li><a href="#">@263.com</a></li> </ul> </div> <button class="btn">登录</button> </div> 搜索框<form class="form-search" action=""> <div class="input-append"> <input class="span3" type="text"> <button class="btn" type="submit">快速搜索</button> </div> </form> <form class="form-search" action=""> ??? <input type="text" class="search-query"> </form> //可以使用form-inline类将表格以行内显示 http://www.berlinix.com/web/Bootstrap.php http://kanoha.org/page/2/ http://www.oschina.net/p/topcoat (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |