始于设计 - 专于体验 - 合于沟通 - 久于转化 - 终于口碑 !      16年高端网站建设、跨境电商独立站定制开发、300+专业技术,设计团队、国家高新技术企业
外贸网站设计Bootstrap的从入门到精通一

发布者:万邦     目录:外贸网站设计     阅读数:19277

外贸网站设计专家万邦在响应式建站领域由来已久,为了符合现在的市场需求,响应式的外贸网站设计越来越主流了,随着移动终端的多样化,客户在获取信息资源方面自然就多样化,优统的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.

上一篇: 外贸网站设计HTML5中四十个最重要的技术点

下一篇: 最新外贸网站设计10个重要知识点

签约 精毅集团官网
高端品牌外贸网站设计 - 万邦 03 月签约