技术分析之BootStrap

最新推荐文章于 2023-04-20 14:26:13 发布

王丽君csdn

最新推荐文章于 2023-04-20 14:26:13 发布

阅读量999

点赞数

分类专栏： WEB 文章标签： BootStrap

本文链接：https://blog.youkuaiyun.com/wlj323/article/details/51236612

版权

WEB 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了响应式网页的概念及其重要性，详细讲解了BootStrap框架的定义、应用，以及如何在HBuilder中引入和使用BootStrap。通过引入viewport元标签和使用全局CSS，如布局容器和栅格系统，实现响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

**技术分析之BootStrap前端框架的概述**

1. 什么是响应式网页？
* 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。
* 无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；
* 换句话说，页面应该有能力去自动响应用户的设备环境。
* 响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了

2. 什么是BootStrap框架？
* Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。
* Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
* 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。
* Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
* Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目

3. BootStrap框架的应用
* 如果想完成响应式页面的开发，前端框架就可以选择BootStrap框架。

4. BootStrap框架的使用
* 去官方网站下载BootStrap相关的文件（官网地址：http://www.bootcss.com 官方中文网站），在我提供的资料中已经包含了相关的文件

**技术分析之BootStrap框架的准备工作**

1. 在HBuilder中引入BootStrap的CSS、JS等文件
* 先解压bootstrap-3.3.5-dist.zip文件到指定的磁盘下
* 在HBuilder的项目上点击右键 --> 选择导入 --> 选择常规 --> 选择文件系统 --> 点击下一步 --> 选择解压后的文件 --> 勾选bootstrap-3.3.5-dist --> 完成

2. 需要在HTML文件中引入BootStrap的CSS和JS等
* 首先BootStrap框架提供了网络引入的方式（前提条件是联网的情况下）
* 如果不能联网，使用相对路径的方式引入即可


<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">


<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">


<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>


<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

* 注意：引入JS文件是有顺序的，一定要先引入JQuery的JS文件，再引入BootStrap的JS文件

3. 为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签
* <meta name="viewport" content="width=device-width, initial-scale=1">

**技术分析之BootStrap框架的全局CSS**

1. 什么是全局的CSS？
* BootStrap的框架提供了一系列的CSS的样式.这些样式可以直接使用

2. 布局容器
* Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。
* .container 类用于固定宽度并支持响应式布局的容器
<div class="container">
...
</div>

* .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器
<div class="container-fluid">
...
</div>

3. 栅格系统
* 栅格系统概念：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
* 定义行：.row 的样式来定义
* 定义列：.col-lg-n .col-md-n .col-sm-n .col-xs-n （注意：不管选择哪种方式，列数都是固定的，值为12。n的值加在一起等于12）