Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统_bootstrappc和手机自适应,bootstrap适应手机屏幕资源-CSDN文库

bootstrap栅格系统

1星 192 浏览量 2020-09-02 07:17:22 上传评论 1 收藏 100KB PDF 举报

Bootstrap栅格系统是一种基于12列的响应式布局框架，旨在帮助开发者构建适应不同设备屏幕大小的网页。这种系统能够确保网页在PC、平板、手机等不同设备上呈现出优雅的自适应效果，优化用户体验。Bootstrap栅格系统的核心原理是通过预定义的CSS类来控制元素的宽度和排列方式，使得在不同分辨率的设备上，元素可以自动调整其尺寸和位置。在Bootstrap中，栅格系统使用`.row`类定义一行，并使用`.col-*-*`类来设置列的宽度。这里的`*`可以是`xs`(额外小屏，通常是手机)，`sm`(小屏，如平板)，`md`(中屏，桌面显示器)或`lg`(大屏，宽屏显示器)。每个`.col-*-*`类后面跟随的数字表示该列占据的12列网格中的份额。例如，`.col-xs-2`表示在额外小屏上占用2列，`.col-md-8`则表示在中屏上占用8列。为了确保列的总和不超过12，可以组合使用这些类。在实际应用中，我们可以通过以下步骤实现Bootstrap栅格系统： 1. 引入Bootstrap资源：首先需要将Bootstrap的CSS、JavaScript文件及字体资源引入到HTML文件中。这通常包括将`bootstrap.css`、`bootstrap.js`和字体文件复制到项目目录，并在`<head>`部分添加相应的`<link>`和`<script>`标签。 2. 创建容器：在HTML结构中，使用`.container`或`.container-fluid`类创建一个包裹所有内容的容器。`.container`会使内容居中，而`.container-fluid`则会让内容充满整个视口。 3. 定义行和列：在容器内，使用`.row`类创建行。然后在行内添加列，每个列都用`.col-*-*`类定义。例如，`<div class="col-xs-2">`定义了一个在小屏设备上占用2列的元素。 4. 响应式设计：通过结合使用不同屏幕尺寸的`.col-*-*`类，可以实现元素在不同设备上的自适应布局。例如，同一个元素可能在手机上占用2列(`col-xs-2`)，在平板上占用4列(`col-md-4`)，在PC上占用8列(`col-lg-8`)。 5. 调整内容：在列内添加内容，并使用Bootstrap提供的其他组件，如卡片、按钮、表单等，进一步丰富页面。通过这样的方式，Bootstrap栅格系统能够帮助开发者快速构建响应式网页，提高开发效率，同时保证了网页在不同设备上的视觉一致性和用户体验。理解并熟练掌握Bootstrap的栅格系统是现代网页开发中的必备技能之一。

资源推荐

资源详情

资源评论

Bootstrap自动适应自动适应PC、平板、手机的、平板、手机的Bootstrap栅格系统栅格系统

主要介绍了Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统的相关资料,需要的朋友可以参考下

栅格系统英文为“grid systems”，也有人翻译为“网格系统”，运用固定的格子设计版面布局，其风格工整简洁，在二战后大受欢迎，已成为今日出版物设计的主流风格之一。

1692年，新登基的法国国王路易十四感到法国的印刷水平差强人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的，重视功能性的新字

体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36个小

格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是世界上最早对字体和版面进行科学实验的活

动，也是栅格系统最早的雏形。

我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使

用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin

用于生成更具语义的布局。

也就是说Bootstrap把一个元素的宽度划分成12份。我们则在这个被划分成12份的行安排元素。

一、基本目标一、基本目标

制作如下的两行，这两行因为设备的不同里面各个单元格的宽度会改变：

在手机小屏幕上，上行A占2份B占10份，AB分享了这12份，下行A占1份B占1份C占10份，ABC分享了这12份。

在平板的中等屏幕上，上行A占8份B占4份，AB分享了这12份，下行A占10份B占1份C占1份，ABC分享了这12份。

在PC的大屏幕上，上行A占4份B占8份，AB分享了这12份，下行A占1份B占10份C占1份，ABC分享了这12份。

二、制作过程二、制作过程

先在网页文件夹中配置好Bootstrap，在官网（点击打开链接）下载组件即可，用于生产环境的Bootstrap版本（点击打开链接），Bootstrap3对2并不兼容，建议直接根据其开发文档

使用Bootstrap3。将Bootstrap解压之后把得到的3个文件夹css,fonts,js拷贝到站点目录下面。如果是Eclipse的JSP Web Project的话就把它们放到WebRoot文件夹下面。

之后代码如下，详情请看注释：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="css/bootstrap.css" rel="stylesheet" media="screen">

<meta name="viewport"

content="width=device-width,initial-scale=1.0,user-scalable=no">

<title>栅格系统</title>

</head>

<body>

<div class="container-fluid">

<div class="row">

<div class="col-xs-2 col-md-8 col-lg-4 bg-warning">

A

</div>

<div class="col-xs-10 col-md-4 col-lg-8 bg-primary">

B

</div>

</div>

<div class="row">

<div class="col-xs-1 col-md-10 col-lg-1 bg-warning">

A

</div>

<div class="col-xs-1 col-md-1 col-lg-10 bg-primary">

B

</div>

<div class="col-xs-10 col-md-1 col-lg-1 bg-success">

C

</div>

</div>

</div>

</body>

</html>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

内容反馈

fdffd请问

2024-03-29

骗子，就一个pdf #上传者态度恶劣 #标题与内容不符 #毫无价值

weixin_38660108

粉丝: 6
资源: 924

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip