现在普遍地认为前端是HTML+CSS+JS
Bootstrap就是一个前端开发框架,提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。
其实就是便于人们开发较为精美的前端样式,有大量写好的样式,直接调用即可
Bootstrap下载地址
官方地址:http://getbootstrap.com
中文地址:www.bootcss.com
在引用前需要引入jquery
<script scr="jquery/jquery-1.7.2.min.js"></script>
<script scr="dist/js/bootstrap.min.js"></script>
Bootstrap插件依赖Bootstrap.js
Bootstrap.js基于jQuery
下面举一些例子,用以入门,真正开发需要结合文档
Bootstrap中的排版 —— 标题
Class中内联 class="h1/h2/h3......" 例如<span class="h1">标题一</span>
标题(h1 ~ h6 / .h1 ~ .h6) h1:36px; h2:30px; h3:24px;
副标题 (small) h5:14px; h6:12px;
Bootstrap中的排版 —— 对齐
由于Bootstrap是引用外部的css,大部分是通过类修饰标签的形式
.text-left
.text-center
.text-right
Bootstrap中的排版 —— 大小写
.text-lowercase
.text-uppercase
.text-capitalize
Bootstrap中的排版 —— 表格
带边框的表格 .table-bordered
条纹状表格 .table-strped
悬停变色 .table-hover
紧凑风格 .table-condensed
Bootstrap中的排版 —— 按钮
Bootstrap给HTML大部分表单都设置了默认样式,我们可以给表单添加相应的类名,以实现变淡的水平排列,个性化定制等
<button class="btn btn-default">这是一个标准按钮样式</button>
<button class="btn btn-success">这是一个原始按钮样式</button>
<button class="btn btn-info">这是一个用于要弹出信息的按钮</button>
<button class="btn btn-warning">这是一个需要谨慎操作的按钮</button>
<button class="btn btn-danger">这是一个危险动作的按钮</button>
按钮大小:
<button class="btn btn-default btn-lg">这是一个调整大小的按钮</button>
按钮全屏:
<button class="btn btn-info btn-block">这是一个设置全屏的按钮</button>
禁用按钮:
<button class="btn btn-warning disabled="disabled">这是一个被禁用的按钮</button>
Bootstrap中的排版 —— 图片
图片 - 形状
圆角 .img-rounded
圆形 .img-circle
带有边框的圆角图形 .img-thumbnail
其余辅助类 ~
文本颜色、背景颜色
状态设置、三角符号
Bootstrap中的排版 —— 渐进
meta标签中的Viewport
1.width,height
2.user-scalable,initial-scale
3.maximum-scale,minimum-scale
<script>
//手机淘宝参考
var metaEl = doc.createElement('meta');
var scale = isRetina ? 0.5:1;
mataEl.setAttribute('name', 'viewport');
mataEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=‘ + scale + ’, minimum-scale=', user-scalable=no' );
if(docEl.firstElementChild) {
document.documentElement.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
documen.write(wrap.innerHTML);
}
<script>
其中第二行代码:检测是否为视网膜屏
栅格布局:
<style>
*{
padding:0;
margin:0;
}
@media screen and (min-width:*px) and (max-width:*px){
}
</style>
<div class="test col-lg-3 col-md-4 col- sm-6 col- xs-12"></div>
Class = “col-lg-3 col-md-4 col-sm-6 col-xs-12”
Bootstrap 自动把屏幕分成12等分,
col-lg-3表示大屏幕占三即占屏幕1/4
col-md-4表示中等屏幕占四即占屏幕1/3
col- sm-6表示小屏幕占三即占屏幕1/2
col- xs-12表示超小屏幕占三即占全屏