Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果

Bootstrap 网格系统

1、Bootstrap网格系统工作原理

Bootstrap的网格系统是指将页面布局划分为等宽的列。随着屏幕或视口尺寸的增加，系统会自动分为1~12列。

网格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。

开发者可以将内容放入这些创建好的布局中，然后通过列数的定义来模块化页面布局。

网格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器）尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。

Bootstrap的网格系统使用一系列容器类（container），行（row）和列（column）的组合来创建页面布局。

网格中每一行需要放在设置了 .container或 .container-fluid 类的容器中。

使用行.row来创建水平的列组。并且行必须包含在布局容器中，以便为其赋予合适的排列和内补

列使用样式.col-*-*，创建一组列并且只有列可以作为行的直接子元素。

例1：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><div class="row"><div class="col-sm-1 border">col-sm-1</div><div class="col-sm-1 border">col-sm-1</div><div class="col-sm-1 border">col-sm-1</div><div class="col-sm-1 border">col-sm-1</div><div class="col-sm-1 border">col-sm-1</div><div class="col-sm-1 border">col-sm-1</div><div class="col-sm-1 border">col-sm-1</div><div class="col-sm-1 border">col-sm-1</div><div class="col-sm-1 border">col-sm-1</div><div class="col-sm-1 border">col-sm-1</div><div class="col-sm-1 border">col-sm-1</div><div class="col-sm-1 border">col-sm-1</div></div><div class="row"><div class="col-sm-9 border">col-sm-9</div><div class="col-sm-3 border">col-sm-3</div></div><div class="row"><div class="col-sm-6 border">col-sm-6</div><div class="col-sm-6 border">col-sm-6</div></div><div class="row"><div class="col-sm-4 border">col-sm-4</div><div class="col-sm-4 border">col-sm-4</div><div class="col-sm-4 border">col-sm-4</div></div></div></body>
</html>

结果图：

2、网格系统前缀

栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-*、.col-sm-*、.col-md-*、.col-lg-*和.col-xl-*类名。

当同时使用这些类的时候，它会根据当前屏幕的大小来使相应的类生效，实现在不同屏幕下展示不同的页面结构。

Bootstrap 4的网格系统在各种屏幕和设备上的约定如下表所示：

例2：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><div class="row"><div class="col-sm-3 border">col-sm-3</div><div class="col-sm-9 border">col-sm-9</div></div><div class="row"><div class="col-md-3 border">col-md-3</div><div class="col-md-9 border">col-md-9</div></div></div></body>
</html>

结果图：

例3：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><div class="row"><div class="col-12 col-md-5 border">.col-12.col-md-8</div><div class="col-6 col-md-4 border">.col-6.col-md-4</div></div><div class="row"><div class="col-6 col-md-4 border">.col-6.col-md-4</div><div class="col-6 col-md-4 border">.col-6.col-md-4</div><div class="col-6 col-md-4 border">.col-6.col-md-4</div></div></div></body>
</html>

结果图：

3、利用网格系统实现导航栏效果

例4：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script><style>* {margin: 0;padding: 0;}li {list-style: none;}.row {margin-bottom: 0;}.container {background-color: #eee;}.col-sm-12 {text-align: center;padding: 10px;font-size: 30px;}li:hover {background-color: #fff;}</style>
</head><body><div class="container"><ul class="row"><li class="col-md-3 col-sm-12">首页</li><li class="col-md-3 col-sm-12">新闻资讯</li><li class="col-md-3 col-sm-12">关于我们</li><li class="col-md-3 col-sm-12">客户服务</li></ul></div>
</body></html>

结果图：

平板设备下页面效果：

切换到手机模式（在这里选择使用iPhone X），页面效果：

4、栅格系统中的列嵌套

栅格系统中内置的栅格系统可以将内容再次嵌套。实现的主要思路：我们在现有的div.col-md-*元素的内部，再去添加一个新的div.row元素和一系列的div.col-md-*元素。

例5：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script><style>.row>div {height: 50px;background-color: #eee;}.col-md-4 {border: 1px solid #fff;text-align: center;line-height: 50px;font-size: 30px;}.col-md-6 {border: 1px solid #fff;}</style>
</head><body><div class="container"><div class="row"><div class="col-md-4"><div class="row"><div class="col-md-6">第一列</div><div class="col-md-6">第二列</div></div></div><div class="col-md-4">第三列</div><div class="col-md-4">第三列</div></div></div>
</body></html>

结果图：

例6：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><div class="row"><div class="col-md-3 border">左排列</div><div class="col-md-9 border">右边列嵌套了一个row<div class="row"><div class="col-md-6 border">第一行第一列</div><div class="col-md-6 border">第一行第二列</div></div><div class="row"><div class="col-md-6 border">第二行第一列</div><div class="col-md-6 border">第二行第二列</div></div></div></div></body>
</html>

结果图：

5、栅格系统中的列偏移

栅格系统：使用.offset-md-*类将列向右侧偏移，主要是通过使用.offset-md-*获取到当前元素并且增加了当前元素左侧的边距（margin）来实现的。 md可以使用sm、xl和lg等替代，分别表示在不同屏幕下设置列的偏移。

例7：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script><style>.row div {height: 50px;background-color: #eee;font-size: 30px;}</style></head><body><div class="container"><div class="row"><div class="col-md-3">左侧</div><div class="col-md-3 offset-md-6">右侧</div></div></div>
</body></html>

结果图：

例8：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><div class="row"><div class="col-md-3 border">.col-md-3</div><div class="col-md-6 offset-md-2 border">.col-md-6 .offset-md-2</div></div><div class="row"><div class="col-md-3 offset-md-3 border">.col-md-3 .offset-md-3</div><div class="col-md-3 offset-md-3 border">.col-md-3 .offset-md-3</div></div><div class="row"><div class="col-md-6 offset-md-3 border">.col-md-6 .offset-md-3</div><div class="col-md-6 offset-md-3 border">.col-md-2 .offset-md-3</div></div></div></body>
</html>

结果图：

6、栅格系统中的自动布局列

利用特定于断点的列类来轻松调整列大小，而无需使用显式编号的类。

例9：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><div class="row"><div class="col border">1/2</div><div class="col border">1/2</div></div><div class="row"><div class="col border">1/3</div><div class="col border">1/3</div><div class="col border">1/3</div></div><div class="row"><div class="col border">1/4</div><div class="col border">1/4</div><div class="col border">1/4</div><div class="col border">1/4</div></div></div></body>
</html>

结果图：

创建跨多个行的等宽列，方法的插入w-100通用样式类，将列拆分为新行

例9：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><div class="row"><div class="col border">col</div><div class="col border">col</div><div class="w-100"></div><div class="col border">col</div><div class="col border">col</div></div></div></body>
</html>

结果图：

可以在一行多列的情况下，设置一列的宽度，其它列则会自动调整大小

例10：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><div class="row"><div class="col border">col</div><div class="col-8 border">col-8</div><div class="col border">col</div></div><div class="row"><div class="col-5 border">col-5</div><div class="col border">col</div><div class="col border">col</div></div></div></body>
</html>

结果图：

可变宽度内容示例。使用.col-{breakpoint}-auto类，可根据其内容的自然宽度来调整列的大小。

例11：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><div class="row justify-content-md-center"><div class="col col-lg-2 border">左</div><div class="col col-md-auto border">中(当屏幕尺寸大于等于768px时,可根据内容调整列宽度)</div><div class="col col-lg-2 border">右</div></div><div class="row"><div class="col border">左</div><div class="col col-md-auto border">中(当屏幕尺寸大于等于768px时,可根据内容调整列宽度)</div><div class="col col-lg-2 border">右</div></div></div></body>
</html>

结果图：

7、栅格系统中的重排序

Bootstrap4提供了.order-*类控制网页元素的排列顺序。 .order-*类从.order-1（排在最前）到.order-12（排在最后）一共12个级别。这些类是响应式的，可以按断点设置顺序（例如.order-1.order-md-2）。如果元素没有定义.order-*类，则默认排在前面。

排列顺序示例：例12：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><div class="row"><div class="col border">col</div><div class="col order-12 border">col-12</div><div class="col order-1 border">col-1</div><div class="col order-5 border">col-5</div></div></div></body>
</html>

结果图：

.order-first和.order-last类示例：例13：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script></head><body><div class="container"><div class="row"><div class="col order-last border">First in DOM,  ordered last</div><div class="col border">Second in DOM, unordered</div><div class="col order-first border">Third in DOM, ordered first</div></div></div></body>
</html>

模仿淘宝网站商品展示的页面效果，使用Bootstrap的网格系统进行布局

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /><script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script><script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script><style type="text/css">.product {border: 1px solid #ddd;}.product:hover {border: 1px solid #f00;}.product-image {position: relative;overflow: hidden;}.product-image img {width: 100%;}.product-image.find {position: absolute;left: 0px;bottom: -35px;display: block;width: 100%;line-height: 35px;background-color: rgba(255, 0, 0, 0.85);transition: 0.5s;}.product-image.find a {display: inline-block;width: 50%;font-size: 16px;color: #fff;text-align: center;text-decoration: none;}.product-image.find a.same {float: left;}.product-image.find a.simlar {float: right;}.product-image:hover.find {bottom: 0px;}.product-image:hover.find a {border-right: 1px solid #fff;}.product-content {padding: 5px 10px;}.product-content.price {font-size: 18px;color: #f00;}.product-content a {font-size: 14px;color: #000;text-decoration: none;}.product-content a:hover {color: #f00;text-decoration: underline;}</style>
</head><body><div class="container"><div class="row"><div class="col-sm-6 col-md-3"><div class="product"><div class="product-image"><a href="#"><img src="img/pic1.jpg" class="img-fluid" /></a><span class="find"><a href="#" class="same">找同款</a><a href="#" class="simlar">找相似</a></span></div><div class="product-content"><div class="price">&yen;66</div><span class="title"><a href="#">第一辑全套10册启蒙早教动画小猪佩奇书英文版绘本</a></span></div></div></div><div class="col-sm-06 col-md-3"><div class="product"><div class="product-image"><a href="#"><img src="img/pic2.webp" class="img-fluid" /></a><span class="find"><a href="#" class="same">找同款</a><a href="#" class="simlar">找相似</a></span></div><div class="product-content"><div class="price">&yen;83</div><span class="title"><a href="#">全套10册汪汪队故事书绘本汪汪队立大功儿童安全救援</a></span></div></div></div><div class="col-sm-6 col-md-3"><div class="product"><div class="product-image"><a href="#"><img src="img/pic3.webp" class="img-fluid" /></a><span class="find"><a href="#" class="same">找同款</a><a href="#" class="simlar">找相似</a></span></div><div class="product-content"><div class="price">&yen;220</div><span class="title"><a href="#">丁丁历险记全套22册儿童漫画故事书丁丁在刚果</a></span></div></div></div><div class="col-sm-6 col-md-3"><div class="product"><div class="product-image"><a href="#"><img src="img/pic4.jpg" class="img-fluid" /></a><span class="find"><a href="#" class="same">找同款</a><a href="#" class="simlar">找相似</a></span></div><div class="product-content"><div class="price">&yen;62</div><span class="title"><a href="#">睡衣小英雄故事书系列全套8册书彩图注音版</a></span></div></div></div></div></div></body></html>

结果图：

Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果相关推荐

练习篇：实现一个类似淘宝的商品展示列表页面
经过前面两大部分的详细讲解,相信大家对大部分的布局方式.组件的使用.逻辑业务编写都有了很深入的了解,那么接下来我们就用前面学习的一些知识来进行一个实践:实现一个淘宝风格的商品展示列表,通过这个实例我们 ...
JQuery模仿淘宝天猫魔盒抢购页面倒计时效果
1.效果及功能说明通过对时间的控制来告诉用户一个活动还剩多少时间,精确到秒. 2.实现原理首先定义活动的截至的时间,要重年份精确到毫秒,在获得当前的年份到秒钟,在用截至时间,减去现在的时间,剩下的 ...
模仿淘宝电脑端购物车页面
HTML代码 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
Bootstrap框架网格系统工作原理
Bootstrap 框架的网格系统工作原理如下: 1 .数据行 (.row) 必须包含在容器( .container )中,以便为其赋予合适的对齐方式和内距 (padding) . 如: &l ...
淘宝网站开发秘史：买来的系统花名文化由来
2003年4月7日,马云,在杭州,成立了一个神秘的组织.他叫来十位员工,要他们签了一份协议,这份协议要求他们立刻离开阿里巴巴,去做一个神秘的项目.这个项目要求绝对保密,老马戏称"连说梦话被老 ...
Selenium滑块验证登录天猫淘宝网站
模拟登录天猫和淘宝网址,直接跳过滑块验证的方法. import timefrom selenium.webdriver import Chrome from selenium.webdriver im ...
Android模仿淘宝详情页界面
话不多说-先上效果图: 图1中主要需要实现的效果: 1.轮播图 2.顶部导航栏的渐变 3.顶部导航栏随着滑动的位置选择对应的值以及点击滑动到对应位置 Android模仿淘宝详情页界面文件:url80. ...
淘宝网站简易分析评价
报告摘要: 电子商务对人类社会经济产生了重大影响,在创造巨大经济效益的同百度时,也从根本上改变了整个社会商务活动发展进程.我国电子商务在曲折进程中,已有很大程度的发展,越来越多的人开始参与网上购物.我 ...
PHP仿淘宝网站程序设计
PHP仿淘宝网站程序设计在学习了PHP相关知识后利用其完成了一个仿淘宝网站界面,以下是相应的屏幕截图 (详细代码请联系我QQ:2186527424) 首先,进入登陆界面,在没有账户的情况下,点击右下 ...

Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果

Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果相关推荐

最新文章

热门文章