杭州网站建设
本内容完全由佚站互联成员原创并且免费提供交流学习,如有转载,请注明出处。

通过之前几篇文章学习Bootstrap的基础知识之后,让我们来开始Bootstrap基本框架的学习吧!

 

构建基础HTML文档结构

在进行引入与开发之前,你需要构建自己的HTML文档基础结构,结构规则我们按照最新的HTML5规则来编写,让我们看看应该如何编写。<!DOCTYPE html><html lang="zh-cn"><head></head><body></body></html>

 

引入自适应标签

由于Bootstrap3是以移动优先为主要准则,所以为了实现响应式布局的效果,我们需要在head标签中引入对应的meta标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
通过这个标签,我们能够保证页面在所有设备上初始化的时候,会保持1.0的比例。
除此之外,如果你想要防止用户在移动设备上访问你网站的时候通过手势进行缩放,那么你就可以在该标签中加入user-scalable=no的属性,使得你的网站更贴近native app。

 

使用栅格布局

如果你想要采用栅格布局,需要保证布局外部容器的类是container。
也就是将整个页面结构写在<div class="container"></div>容器之内。

 

关于栅格布局

栅格布局是Bootstrap里面非常重要的一个概念,因为它牵涉到整体页面结构以及响应式的使用。
我们会在下篇文章中着重介绍该布局的使用方法。

佚站互联 YEAHZAN,杭州网站建设 创新团队。本文版权所有,转载时请注明出处。

对此文章有疑问?可以留言提问,或者通过 在线联系 我们来获得帮助。