前端Bootstrap的使用(一)

现在普遍地认为前端是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表示超小屏幕占三即占全屏