外贸网站设计专家万邦在响应式建站领域由来已久，为了符合现在的市场需求，响应式的外贸网站设计越来越主流了，随着移动终端的多样化，客户在获取信息资源方面自然就多样化，优统的pc无法满足，其实响应式这一概念早在10年就提出来了，为什么一直到现在才开始流行起来，任何一处种新的技术需要一个过程，再加上最初的响应式的技术信息资料很少，还存在很多的缺陷，经过这些年的积累，各种成熟的响应式的框架开始出来，并不断的更新完善。

高端的技术永远只掌握在少数人手中，所以要想推广这些技术的发展，还需要工作在第一线的广用设计师和程序员来使用，而起决定性作用并不是这些设计师和程序员，而是市场，市场不热，设计师们不会主动去学习新的技术，那样会投入很多的时间和精力。所以真正推出响应式建站的是现在的移动终端的发展。

现在最主流的是手机，平板其次，很多用户不想去建三个站，那样太麻烦，不管是管理上还是更新信息方面，要投入不少的人力，所以有没有这样一种网站，能够根据不同的终端打开同一个网站，信息是一样的，只是布局出现相应的变化。大家都在研究，其中应该最广泛的就是bootstrap，可以说它是一个轻量级的框架，外贸网站建设中，很多公司都是用框架来减轻工作量，领今天万邦就来讲讲bootstrap的入门。

我们直接从应用开始，对于框架，我们都知道都需要下载几个重要的文件，我们可以bootstrap网站中下载，我们在html中加载以下几个必须的文件
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

在加载三个文件前，还有两项是必要的，对于响应式外贸网站设计，必须要有viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

加载完这些文件后，我们就可以开始来熟悉bootstrap的使用规则和固定知识点
首先我们要讲栅格系统，这是响应式基础知识，这是响应式的基础。bootstrap是由行和列的网格方式来组成的，bootstrap是把整个屏幕宽度分为12列，这些网站都存放在一个容器中，我们称这个容器为container。

所以我们在编写body，第一个类就是container，即 <div class="container"></div>
有了总的容器，那么接下来就是它是行，用row类，即<div class="row"></div>

上面我们讲到了容器container，那么我们来讲讲这种容器的布局方式，我们知道我们在搭建网站时候，都会想布局的方式，是做全屏还是固定的，对于bootstrap来说，它分为两种布局模式，一种是固定模式1200px， 另一种是全屏的模式我们称为流式布局，流式布局的写法则是container-fluid，即<div class="container-fluid"></div>

现在接下来讲行，先行后列，列的写法是col-lg-, col-md-, col-sm-, col-xs-, 我们来讲讲是什么意思

bootstrap把屏幕分为以下几种
1，>=1200px (大于等于1200px）                 用 col-lg-                pc端
2，992-1200px（992到1200px之间）         用 col-md-              不常用
3，768-992px （768到992px）                 用 col-sm-               小平板端
4，<768px (小于768px）                           用 col-xs-                手机端

在应用列数时说明
我想将一行分为三列，在大于1200px的屏幕下面，可以这样写
<div  class="container">
    <div class="row">
           <div class="col-lg-4">第一列</div>
           <div class="col-lg-4">第二列</div>
           <div class="col-lg-4">第三列</div>
     </div>
</div>

如果我想让他们在平板端显示四列，在手机端显示2列，那我们该如何做呢，我们可以直接加在每一列的后面
<div  class="container">
    <div class="row">
           <div class="col-lg-4 col-sm-3 col-xs-6">第一列</div>
           <div class="col-lg-4 col-sm-3 col-xs-6">第二列</div>
           <div class="col-lg-4 col-sm-3 col-xs-6">第三列</div>
     </div>
</div>

讲完网格，我们来讲讲它的辅助类，辅助说明它是来完善和补充很多的常用的效果，为了更快的完成开发
有几个常用的，比如文本类，背景类
文本类的都是用text-参数， 这样的方式参数具体查看手册
背景类是用bg-参数，同上
eg：  <div  class="text-danger">文本内容</div>

再来讲一下浮动，浮动分为左浮动和右浮动，我们知道div是块级元素，块元素都是占一行，有时我们需要将块元素进行浮动，这个这时候，元素进行浮动后就变行内元素，行内元素是有多大就占多大的空间，那么bootstrap的浮动的写法是 左浮动：pull-left  , 右浮动：pull-right。只需要在class加上左或右浮动，就会变为行内元素。在加上浮动后，父级的块元素就是与之脱离关关系，这样时候，就需要清除浮动，让父元素随着变化，清除浮动用clearfix。

eg： <div  class="aa  clearfix">
            <div class="pull-left">左边浮动</div>
            <div class="pull-right">右边浮动</div>
       </div>

块元素的一个常用属性，这里我们在进行外贸网站设计时候，常用各种居中的样式，这样时候bootstrap也非常方便快捷，在类上面加上center-block，那么这个块元素就会水平居中了，那么文本居中也是一个写法，text-center;
eg: <div class="center-block text-cneter">我的文本</div>

再来补充一个知识点，垂直居中，那这个怎么写呢，我们先来一个思路，我们可以让元素绝对定位，距离顶部50%，距离左边50%，这样我们就会让这个块元素的左上角的顶点居于屏幕的正中心了，其实这个块元素并不是占中间，这个时候，我们需要用css的特性来完成这个调整，transform，自定义的写法如下
{
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
这样可以让块元素垂直居中。

在元素显示方面有visible-lg: 有我们在手机端时候要屏蔽掉一些元素，只有在pc端(大于1200px)的时候，才会显示出来，这个时候我们需要用到visible-lg
eg： <div class="visible-lg"></div>

表格的应用，我们只需要在table加上类table即可，例如
<table class="table">
   <thead>
           <tr>
                 <th>主营业务</th>
                 <th>地址</th>
                 <th>公司名称</th>
           </tr>
   </thead>
   <tbody>
           <tr>
                 <td>外贸网站设计</td>
                 <td>深圳</td>
                 <td>万邦网络科技</td>
            </tr>
   </tbody>
</table>

表格还有很多常用的类，例如：
隔行换色：table-striped
鼠标翻转：table-hover
增加边框：table-bordered.