值得分享的最全面Bootstrap快速人门案例

2024-09-28 08:10:08

今天，我给小白们分享一下比较流行的Bootstrap框架，它在工作中得到许多公司的青睐，因此对于升职和加薪很重要。同时，我们可以快速完成开发任务，减少发开周期，有不对的地方望大家指正。

如果你想走的更远，那么请勤劳一点，多看看代码，多多练习代码，如果你仔细研究代码，自己也可以写出一部分的css比较好的插件。

一、Bootstrap简介

详见官网：

http://www.bootcss.com/

http://v3.bootcss.com/

1.练习准备资源准备：

下载bootstrap资源：

http:www.bootstrap.com

新建项目：bootstrap/code

在code下复制下载的dist目录下的所有文件，并且在js文件夹中引入jquery的js文件，如：jquery-1.11.3.min.js最后新建文件bt.html

2.快速开发实现：

注意在开发过程中如果修改css效果一定要在引入bootsrtap中的css文件，再重新添加类，本次开发案例原网站如下：

http://www.bootcss.com/

3.相关概念

3.1栅格系统

网页栅格从平面栅格系统中发展而来，它以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。栅格系统使得网页开发更加灵活与规范。

Bootstrap采用12栅格系统，把网页的总宽度平分为12份，开发人员可以自由按份组合。

3.2结构：

实现栅格，需要借助固定的结构---布局容器+行+列

3.2.1布局容器（.container 、.container-fluid）1）固定布局

.container

固定宽度并支持响应式（1170px、970px、750px）这里可以使用媒体查询@media

2）流式布局

.container-fluid

100%宽度，占据全部视口的容器

3.2.2行（.row）

有了容器布局我们才可以使用栅格系统，需要再写一个div.row来作为列的父级元素

3.2.3列(.col-md-*)

这里的*可以取值2-12

1）列偏移：

在一般情况下列是默认从做到右对齐的，在实际开发中，我们不需要左边对齐

.col-mod-* .col-md-offset-12-* 可以通过后面的整个类来实现。

2）列嵌套

和表格相比：在表格中，可以在td中再嵌套table

这里嵌套时，不需要再加.container,只需要加.row 再加.col-md-*即可

3）列排序

改变左右浮动，col-md-push-* 和 col-md-pull-* 注意push 和pull之和为12；

4.删除网格系统

通过下表可以详细查看bootstrap的栅格系统在各大屏幕设备的工作

二、全局CSS样式

5.列表

有序列表

无序列表

自定义列表

6.按钮

1）预定义样式

.btn-default .btn-primary .btn-success .btn-info .btn-warnint .btn-danger

Button .btn .btn-default

2）尺寸.btn-lg .btn-sm .btn-xs3）块级按钮.btn-block7.表单(1).垂直排列表单

在表单中，通常是提示信息和表单元素共同构成一组。

在bs中，提供.form-group 用来表示组的。

针对具体的那一个表单元素，可以使用.form-control（包括input、select、textarea）

效果如下：

PS:关于这个父元素，带有.form-group的元素，并不是必须是div。是块状元素就可以，比如li。

(2).水平排列

在form上，添加.form-horizontal，然后结合栅格系统。（此处，不需要使用.row，直接使用栅格列即可）

(3).内联表单

表单都放在一行

借助.form-inline

为form元素添加.form-inline

效果如下：

(4).文本域

Textarea，也是通过.form-control来控制的，宽度就不要再设置cols了。

但是他的高度还是要使用rows来设置

效果如下：

(5).单选和多选

单选和多选，结构需要做变化，如下：

效果如下：

在默认情况下，它是垂直排列的。

在大多数场景下，需要水平排列的。

需要使用.radio-inline，如下：

也可以使用手册上的结构：

关于checkbox和radio，总是有一点对不齐，所有浏览器都有这么一个毛病。

Bs封装的这个用法，解决这样的问题。

(6).辅助文本

在文本框的下方有一些提示信息，其实就是辅助文本。

只需要添加一个span.help-block

效果如下：

1.表格

基本样式

.table，应用在table标签上

条纹状表格

.table-striped

带边框的表格

.table-bordered

鼠标悬停

.table-hover

紧缩表格

.table-condensed

主要是指每一行的行高，变得更小一点

状态类

.active .success .info .warning .danger 应用在tr/td上

2.辅助类

l背景颜色

l三角符号

箭头

直接使用 .caret类，如下：

Ps：通常要结合 button 来使用，表示下拉菜单。

l关闭按钮

效果如下：

l快速浮动

.pull-left和.pull-right

l清除浮动

.clearfix

l块状居中

.center-block

l显示和隐藏

直接使用 .hidden 和 .show即可。

3.响应式工具

前面用来响应式栅格。

在响应式设计中，还有如下的一个需求：

在大屏幕下，所有的信息都会显示。

但是在小屏幕小，有针对性的隐藏某些信息。

针对这个需求，bs提供了一个响应式的工具，可以设置根据不同的屏幕，可以隐藏或显示指定的内容。

上述代码，当页面缩小到小于 992px以下，都会隐藏侧栏。

二.组件

1.well

例如，新浪微博的发布框

2.页头

.page-header来显示，如bootstrap的官网：

3.巨幕

很多网站，都有一个类似baner的地方，显示一些比较重要的信息。尤其是国外的网站，非常的常见，各种教程的网站。

比如bootstrap的官网：

使用如下：

结果如下：

4.label和badge

label，就是标签

典型的应用场景：

使用如下：

badge，就是徽章

典型场景，如微博的未读消息，邮箱、微信、qq等消息

通常需要结合其他元素来使用

效果如下：

5.警告框

通常是在后台操作的时候，会用到。

主要是在某个操作完成之后，进行的一种提示，删除成功，更新失败等。

基类

.alert

修饰类

.alert-success .alert-info .alert-warning .alert-danger

可关闭的警告框

添加.alert-dismissible

在内部添加一个关闭按钮 button，并且使用data-dismisss=“alert”启动关闭功能

警告框中的超链接

使用.alert-link

显示效果如下：

6.分页

用到的是列表，ul

基本使用，只需要给ul添加.pagination

当前页，可以加.active

如果要禁用某一页，需要加上 .disabled

使用如下：

当面默认的是中等大小，还可以更改分页的大小。

尺寸

.pagination-lg .pagination-sm

7.路径导航

路径导航，又称为面包屑导航。

在大多数网站中，都会有的一个结构。给用户一个明确的指示，还知道自己在哪儿，不至于迷路了。

典型的应用：

列表结构，在ol或者ul上添加 .breadcrumb

8.进度条

相对来说，出现的少一些。

典型应用场景 ---- 文件上传（图片）

基本使用

进度条，通常是由父元素和子元素共同构成的，

.progress（父） + .progress-bar（子）

进度条的颜色

.progress-bar-success .progress-bar-info .progress-bar-warning .progress-bar-danger

条纹效果

.progress-bar-striped

动画效果

.active

效果如下：

9.按钮组

前面，我们已经会单个的按钮，在web开发中，经常需要将按钮使用组的形式来呈现。

只需要将button放在一个容器（如div）中，给容器加一个 .btn-group

也可以更改按钮组的尺寸，

.btn-group-lg .btn-group-sm .btn-group-xs

三、返回顶部的按钮效果实现

注意引入字体文件css

代码如下:

四、代码分享

bt.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale = 1">
 <title>Bootstrap中文网</title>
 <link rel="stylesheet" href="css/bootstrap.min.css">
 <link href="http://cdn.bootcss.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 <style>
  .jumbotron{
   position: relative;
   padding: 40px 0;
   color: #fff;
   text-align: center;
   text-shadow: 0 1px 3px rgba(0,0,0,.4),0 0 30px rgba(0,0,0,.075);
   background: #020031;
   background: -moz-linear-gradient(45deg,#020031 0,#6d3353 100%);
    background: -webkit-gradient(linear,left bottom,right top,color-stop(0%,#020031),color-stop(100%,#6d3353));
   background: -webkit-linear-gradient(45deg,#020031 0,#6d3353 100%);
   background: -o-linear-gradient(45deg,#020031 0,#6d3353 100%);
   background: -ms-linear-gradient(45deg,#020031 0,#6d3353 100%);
   background: linear-gradient(45deg,#020031 0,#6d3353 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#020031', endColorstr='#6d3353', GradientType=1);
   -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
   -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
    box-shadow: inset 0 3px 7px rgba(0,0,0,.2),inset 0 -3px 7px rgba(0,0,0,.2);
  }
  .jumbotron a{
   color:rgba(255,255,255,.5)
   -webkit-transition:all .2s ease-in-out;
   -moz-transition:all .2s ease-in-out;
   -o-transition:all .2s ease-in-out;
   -ms-transition:all .2s ease-in-out;
   transition:all .2s ease-in-out;
  }
  .jumbotron a:hover{
   color:#fff;
  }
  .jumbotron a.btn{
   color:#fff;
  }
  .thumbnail{height:330px;}
  .footer{
   padding:30px 0;
   border-top:1px solid #e5e5e5;
   margin-top: 70px;
  }
  .footer a{color:#777;}
  .footer .about>div h4{
   color:#563d7c;
   font-size: 16px;
  }
  #scrollUp{
   background-color:#777;
   font-size: 40px;
   line-height: 1;
   text-align:center;
   text-decoration:none;
   position:fixed;
   right:20px;
   bottom:20px;
   overflow:hidden;
   width: 46px;
   height: 46px;
   border:none;
   opacity:.8;
   display:none;
  }
  .fa-angle-up:before{
   content:"\f106";
  }
 </style>
 <script src="js/jquery-1.11.3.min.js"></script>
 <script src= "js/bootstrap.min.js"></script>
</head>
<body>
 <nav class="navbar navbar-default navbar-fixed-top navbar-inverse ">
  <div class="container">
   <div class=" navbar-header">
    <a href=""class="navbar-brand">Bootstrap中文网</a></div>
   <ul class="nav navbar-nav">
    <li>
     <a href="">Bootstrap2中文文档</a>
    </li>
    <li>
     <a href="">Bootstrap3中文文档</a>
    </li>
    <li>
     <a href="">less教程</a>
    </li>
    <li>
     <a href="">网站实例</a>
    </li>
   </ul>
  </div>
 </nav>
 <div class="jumbotron masthead">
  <h1>Bootstrap</h1>
  <p>简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
  <a href="" class="btn btn-primary btn-lg">Bootstrap2中文文档(v2.3.2)</a>

  <br>
  <br>
  <p><a href=""><small>Bootstrap2中文文档(v2.3.2)</small></a></p>
 </div>
 <div class="container">
  <div class="page-header text-center">
   <h1>Bootstrap相关优质项目推荐</h1>
   <p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small>
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small>
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small>
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small>
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small>
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small>
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small>
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small>
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small>
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small>
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
  <div class="row">
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs1.png" alt="Headroom.js"></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
    <div class="thumbnail">
     <a href=""><img src="image/bs2.png" alt="jQuery API 中文文档/手册"></a>
     <div class="caption text-center">
      <h4>jQuery API<br>
       <small>中文手册</small>
      </h4>
      <p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册</p>
     </div>
    </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs3.png" alt=""></a>
      <div class="caption text-center">
       <h4>Bootstrap编码规范<br>
        <small>by @mdo</small>
       </h4>
       <p>Bootstrap编码规范：编写灵活、稳定、高质量的HTML和CSS代码的规范。</p>
      </div>
     </div>
   </div>
   <div class="col-md-3">
     <div class="thumbnail">
      <a href=""><img src="image/bs5.png" alt="w3schools 原版国内镜像"></a>
      <div class="caption text-center">
       <h4>w3schools<br>
        <small>原版国内镜像</small>
       </h4>
       <p>w3schools.com 是最受欢迎的前端技术教程网站，但是国内用户一直不能访问，并且国内的中文翻译版本十分陈旧。因此做了个镜像，希望英文好的同学直接去看原版教程吧！</p>
      </div>
     </div>
   </div>
  </div>
 </div>
 <footer class="footer">
  <div class="container">
   <div class="row foorer-top">
    <div class="col-sm-6 col-lg-6">
     <h4>
      <img src="image/logo .png" alt="">
     </h4>
     <p>本网站所列开源项目的中文版文档全部由<a href="http://www.bootcss.com">Bootstrap中文网</a>成员翻译整理，并全部遵循<a href="http://creativecommons.org/licenses/by/3.0/"target="_blank">CC BY3.0</a>协议发布。</p>
    </div>
    <div class="col-sm-6 col-lg-5 col-lg-offset-1">
     <div class="row about">
      <div class="col-xs-3">
       <h4>关于</h4>
       <ul class="list-unstyled">
        <li><a href="">关于我们</a></li>
        <li><a href="">广告合作</a></li>
        <li><a href="">友情链接</a></li>
        <li><a href="">招聘</a></li>
       </ul>
      </div>
      <div class="col-xs-3">
       <h4>联系方式</h4>
       <ul class="list-unstyled">
        <li><a href="">新浪微博</a></li>
        <li><a href="">电子邮件</a></li>
       </ul>
      </div>
      <div class="col-xs-3">
       <h4>旗下网站</h4>
       <ul class="list-unstyled">
        <li><a href="">Laravel中文网</a></li>
        <li><a href="">Ghost中国</a></li>
       </ul>
      </div>
      <div class="col-xs-3">
       <h4>赞助商</h4>
       <ul class="list-unstyled">
        <li><a href="">UCloud</a></li>
        <li><a href="">又拍云</a></li>
       </ul>
      </div>
     </div>
    </div>
   </div>
   <hr>
   <div class="row foot-bottom">
    <ul class="list-inline text-center">
     <li><a href="">京ICP备11008151号</a></li>|
     <li><a href="">京公网安备11010802014853</a></li>
    </ul>
   </div>
  </div>
 </footer>
 <a href="#top" id="scrollUp"><i class="fa fa-angle-up"></i></a>
 <script>
  $(function(){
  var $nav = $('#scrollUp');
  var win_height = $(window).height();

  //当窗口滚动的时候，如果 窗口上面隐藏的高度>=一屏高度 ，返回顶部图标应该显示；否则，隐藏
  $(window).scroll(function(){
   if($(window).scrollTop()>=win_height){
    $nav.fadeIn(500);
   }else{
    $nav.fadeOut(500);
   }
  });

  $nav.click(function(){
   // $(window).scrollTop(0); //没有动画
   $('html,body').animate({scrollTop:0}, 1000);
  });
 })
 </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

搭建Bootstrap离线文档的方法

虽然现在不联网的情况很少,但在本机上搭建一份Bootstrap离线文档以备不时之需也是很有必要的. 废话不多说,如果你也有同样的想法,可以参照以下步骤来做: 若你还没有安装过nodejs和Ruby,请先下载安装后再开始下面的步骤. 去Bootstrap官网下载源码. 下载完毕之后解压到任意位置,比如D:\. 从terminal进入源码目录,输入命令: npm install 接着从terminal输入下面的命令来安装Ruby的一个gem:Bundler(官网:http://bundler.io)
Bootstrap安装环境配置教程分享

Bootstrap 安装是非常容易的.此文是本人的学习汇总,便于以后查询学习,同时也希望给大家带来帮助. 一.下载 Bootstrap 您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本.当您点击这个链接时,您将看到如下所示的网页: 您会看到两个按钮: Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. D
值得分享和收藏的Bootstrap学习教程

首先先感谢朋友们对小编的支持,关注小编的文章,和小编一起学习进步,一直的陪伴,小编也一定会再接再厉,为大家分享更多精彩的文章. 在分享的过程中遇到了一些问题,这也给了我很大的启发,大家在搜索相关文章时都没有针对此类问题进行的系统整理文章,这也是小编需要在今后进行改进的. 所以本文就吸取这个经验,针对Bootstrap教程进行系统整理,希望对大家的学习有所帮助,便于大家学习. 小编的水平能力都很有限,还望大牛多给一些建议和看法,帮助小编进行改正和提高,如果文中确有不妥之处,还请谅解.希望能和大家共
Bootstrap每天必学之标签页（Tab）插件

标签页(Tab)通过结合一些 data 属性,您可以轻松地创建一个标签页界面. "如果您想要单独引用该插件的功能,那么您需要引用 tab.js.或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js." 一.用法您可以通过以下两种方式启用标签页: 通过 data 属性:您需要添加 data-toggle="tab" 或 data-toggle="pill" 到锚
Bootstrap每天必学之折叠（Collapse）插件

折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js,或者,正如 Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法下表列出了折叠(Collapse)插件用于处理繁重的伸缩的 class: 您可以通过以下两种方式使用折叠(Collapse)插件: 通过 data 属性:
Bootstrap每天必学之模态框（Modal）插件

本节课我们主要学习一下 Bootstrap 中的模态框插件, 这是一款交互式网站非常常见的弹窗功能插件. 更多关于Bootstrap模态框插件内容请点击专题<Bootstrap Modal使用教程>进行学习,希望大家喜欢,下面继续一．基本使用使用模态框的弹窗组件需要三层 div 容器元素,分别为 modal(模态声明层). dialog(窗口声明层).content(内容层).在内容层里面,还有三层,分别为 header(头部).body(主体).footer(注脚). //基本实例 &l
Bootstrap框架安装使用详解

Bootstrap框架安装使用简单介绍下载 Bootstrap 可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本. Download Bootstrap:下载 Bootstrap.点击该按钮,您可以下载 Bootstrap CSS.JavaScript 和字体的预编译的压缩版本.不包含文档和最初的源代码文件. Download Source:下载源代码.点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaS
Bootstrap每天必学之工具提示（Tooltip）插件

当您想要描述一个链接的时候,工具提示(Tooltip)就显得非常有用.工具提示(Tooltip)插件是受 Jason Frame 写的 jQuery.tipsy 的启发.工具提示(Tooltip)插件做了很多改进,例如不需要依赖图像,而是改用 CSS 实现动画效果,用 data 属性存储标题信息. 如果您想要单独引用该插件的功能,那么您需要引用 tooltip.js.或者,正如Bootstrap 插件概览一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min
Bootstrap每天必学之附加导航（Affix）插件

附加导航(Affix)插件允许某个 <div> 固定在页面的某个位置.您也可以在打开或关闭使用该插件之间进行切换.一个常见的例子是社交图标.它们将在某个位置开始,但当页面点击某个标记,该 <div> 会锁定在某个位置,不会随着页面其他部分一起滚动. 如果您想要单独引用该插件的功能,那么您需要引用 affix.js. 一.用法可以通过 data 属性或者通过 JavaScript 来使用附加导航(Affix)插件. 1.通过 data 属性:如需向元素添加附加导航(Affix)行为
Bootstrap CDN和本地化环境搭建

一.搭建bootstap环境可以用bootstrap的CDN服务,在 <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <script src=

值得分享的最全面Bootstrap快速人门案例

相关推荐

随机推荐