最前沿

她们那时做工程项目合作开发的这时候，后端通常会利皮扬卡React、Vue或是Angular作为架构此基础，即使那些架构的自然生态早已足够多成形，因此在工程项目之中须要加进的控制技术，她们大体上都能全力支持

但在这类特定的销售业务场景下，比如说子公司官方中文网站如是说、公益活动页等那些，相比之下机能较为简单，其主要就用以做展现及如是说的，因此对积极响应式的明确要求就较为高了，总之是期望两套标识符，能与此同时在图形界面端、智能手机端、终端端都有较为好的效用

因此她们那时就来谈谈，怎样透过BootStrap来做积极响应式的中文网站，她们采用的版是v.3.4.1，尽管那时有新一代的v5.0的版，但就现阶段来说v.3.0的版仍然却是最平衡，采用最少的版

积极响应式架构Bootstrap

加装导入

英文官方中文网站门牌号：https://v3.bootcss.com/

先从下面的官方中文网站门牌号把Bootstrap源标识符包浏览留下来，里头会包涵bootstrap的css、js及手写体文档，把那些文档复制到你的工程项目之中，接着在网页导入

// 导入css文档 <link rel=“stylesheet” href=“./css/bootstrap.min.css”> // 假如你须要用以bootstrap的js应用程序 // 因此你更要导入js文档 // bootstrap是如前所述jquery的 // 因此要先导入jquery <script src=“.js/jquery.min.js”></script> <script src=“.js/bootstrap.min.js”></script>

积极响应式实现

一、导航条

导航条是在您的应用或中文网站中作为导航页头的积极响应式此基础组件，它们在终端设备上可以折叠并且可开可关，大家只要把官方下面的模板copy到工程项目之中，接着改改文字和logo就行了

我先写一个事例，透过这个例子大家应该看得更明白点

<!– 导航栏 –>// 最外层div加上navbar navbar-default样式 // navbar-fixed-top样式可以让导航固定在顶部 // 实原理就是设置position:fixed<div class=“navbar navbar-default navbar-fixed-top”> <div class=“container”> // 这里是终端端折叠起来后要显示的效用 // 一定要加上navbar-header样式类 <div class=“navbar-header”>// 注意按钮下面的data-target属性 // 这个属性的值带#,一定要和下面的折叠面板id对应 // 加上navbar-toggle、collapsed样式类<button type=“button” class=“navbar-toggle collapsed” data-toggle=“collapse” data-target=“#nav_mobile_list”> <span class=“icon-bar”></span> <span class=“icon-bar”></span> <span class=“icon-bar”></span> </button> // logo显示 <img class=“navbar-brand” src=“./images/logo.png” alt=“logo” /> </div>// 这里是非终端端平铺要显示的效用 // 或是终端端折叠起来后面板要显示的效用 // 加上样式类collapse、navbar-collapse // 与此同时一下要带上一个id<div class=“collapse navbar-collapse” id=“nav_mobile_list”> // 固定样式类nav navbar-nav <ul class=“nav navbar-nav”> <li class=“active”> <a class=“link”>首页</a> </li> <li> <a class=“link”>关于我们</a> </li> <li> <a class=“link”>企业团队</a> </li> <li> <a class=“link”>产品介绍</a> </li> <li> <a class=“link”>联系我们</a> </li> </ul> </div> </div> </div>

最终的效用

导航的积极响应式效用效用

二、中间内容积极响应式

Bootstrap积极响应式的核心内容就是它的栅格系统，栅格系统用于透过一系列的行与列的组合来创建网页布局，那些行和列其实是透过css3的媒体查询，来实那时不同尺寸的设备上，达到一个积极响应式的效用

栅格系统系统把1行划分为12列，透过不同的样式类来控制，当前的内容在哪些尺寸设备上占多少列，这里她们先来谈谈几个核心的样式类

1、.container 类用于固定宽度并全力支持积极响应式布局的容器，不同设备对应的宽度如下

大屏（≥1200px）：1170px、中等屏幕（≥992px）：970px

小屏幕智能手机（≥768px）：750、手机屏幕（<768px）：100%宽度

2、.col对应的系列类，不同的类名只在特定的屏幕尺寸生效

.col-xs-对应手机小屏幕、.col-sm-对应手机智能手机

.col-md-对应中等屏幕、.col-lg-对应的大屏幕

比如说对下面这样一个div

// 大屏幕尺寸设备，它占一行的3/4 // 中等屏幕尺寸设备，它占一行的2/4 // 小屏幕智能手机尺寸设备，它占一行的3/4 // 手机屏幕尺寸设备，它占满一行4/4 <div class=“col-xs-12 col-sm-9 col-md-6 col-lg-3”></div>

下面我却是透过一个实例给大家演示一下

// 首先用container包裹 <div class=“container”> <h5 class=“title-1”>金融板块</h5> <p class=“title-2”>Financial sector</p> // 要积极响应式的行内容用row样式类 <div class=“row”> // 列的话就透过col的不同类名来控制 // 是占一行，却是占12格中的多少 // 这里是手机的话占满一行 // 智能手机以上就占1/3 // 这里我没有设置中等屏幕和大屏幕的尺寸 // 因此这两个尺寸就用智能手机的效用 <div class=“col-xs-12 col-sm-4”> <div class=“item-wrap”> <img class=“icon” src=“./images/huo-dong1.jpg”alt=“activity” /> <div class=“text-wrap”> <div class=“title”>支付核心销售业务系统</div> <div class=“price”>工程项目规模：240万/年</div> <div class=“desc”> 她们团队从2000年子公司成立开始，就一直承接全力支持领域内的核心销售业务系统的合作开发和运维；对支付的核心销售业务系统的主体功能非常的熟悉。 </div> </div> </div> </div> <divclass=“col-xs-12 col-sm-4”> <div class=“item-wrap”> <img class=“icon” src=“./images/huo-dong2.jpg” alt=“activity” /> <div class=“text-wrap”> <div class=“title”>商城系统</div> <div class=“price”>工程项目规模：60万（一期实施中）</div> <div class=“desc”> 2019年1月开始，她们开始为一家大型企业做新零售的商城系统。该系统涵盖了P2P转账、P2B支付以及三层体系的门店支付系统的管理。此外，这个系统还提供了两套Open API，可以供第三方进行接入。 </div> </div> </div> </div> <divclass=“col-xs-12 col-sm-4”> <div class=“item-wrap”> <img class=“icon” src=“./images/huo-dong3.jpg” alt=“activity” /> <div class=“text-wrap”> <div class=“title”>互联网财产险售前全力支持平台(微信)</div> <div class=“price”>工程项目规模：120万（原型构建中）</div> <divclass=“desc”> 2019年3月份，透过与另外一家大型软件合作开发集成子公司合作，给一家跨国保险子公司核心销售业务系统替换提供咨询服务，并计划从今年下半年开始，为对方合作开发两套互联网电子出单平台。平台将串联微信、支付宝和银联等支付通道，如前所述微信自然生态展开互联网财产险售前服务。 </div> </div> </div> </div> </div> </div>

最终效用