栅格系统开发入门-基于Bootstrap

最新推荐文章于 2022-05-30 22:04:22 发布
最新推荐文章于 2022-05-30 22:04:22 发布
阅读量253 收藏
点赞数
分类专栏： 网页技术相关 文章标签： bootstrap javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43203591/article/details/119772525
版权

应用场景

基于Bootstrap框架尝试栅格系统入门。

实现-基于Bootstrap

效果

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

代码实现

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
  <title>Bootstrap-栅格系统</title>

  <!-- Bootstrap -->
  <link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  <style>
    .inner{
      border:1px solid red;
    }
  </style>
</head>
<body>
<h1>栅格系统</h1>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<!--定义容器
容器分为两类：
- container：两边留白
- container-fluid：每一种设备都是100%宽度
-->
<div class="container">
<!--  定义行-->
  <div class="row">
<!--    定义元素
在大显示器上一行12个格子
在中显示器上一行6个格子
-->
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
    <div class="col-lg-1 col-sm-2 inner">栅格</div>
  </div>
</div>
</body>
</html>

总结

容器可分为两种：

  • container：两边留白
  • container-fluid：每一种设备都是100%宽度

推荐使用container容器。

郎家岭伯爵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用 Sass 开发一个栅格系统
wkj1206的博客
12-24 266
确定样式 一个栅格系统所有的样式分为： 容器类：.container-* 行：.row、.row--flex 列：.col-*、.col-*-* 响应式工具类：.hidden-*、.visible-*-* 定义基本数据 $grid-columns: 12; // 每行的列数 $medias-list: xs, sm, md, lg, xl; // 媒体类型 // 媒体尺寸断点 $screen-breakpoints-list: ( xs: (max: 575px), sm: (mi.
Bootstrap入门书籍之（三）栅格系统
09-02
Bootstrap栅格系统是网页设计和开发中的一个关键组成部分，尤其对于构建响应式网站至关重要。Bootstrap框架的栅格系统提供了一种高效、灵活的方式来组织和排列网页内容，使其能够在各种屏幕尺寸上良好展示，从手机到...
栅格系统
weixin_44583881的博客
02-26 173
栅格系统 开发工具与关键技术：DW Css3 作者：陈子乔 撰写时间：2019年2月9日 在制作表格时,通常会使用到栅格系统，而栅格系统怎样的呢？ 如图所示： 图（1） 代码： 效果图： 图（2） 代码： 效果图： 由图...
web-前端开发之栅格系统的简单应用
h_Snow_1的博客
09-26 1071
这个是用一个例子来描述了栅格系统的简单应用，因为山歌系统站位为12，所以我们可以利用这个区制作一些简单方便的表格 //其中下方的图片排列使用了栅格系统的模板 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-sc
bootstrap栅格网页布局开发
Byte_Dance的博客
03-03 354
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt;     //安装检测手机真实尺寸的语句 &lt;meta name="viewport" content="width=device-width, initial-scale=1,
BootStrap的栅格系统的基本写法（布局）
weixin_30753873的博客
01-17 151
代码如下： <!DOCTYPE html> <html> <head> <title>BootStrap的基础入门</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"...
基于Bootstrap框架菜鸟入门教程(推荐)
08-29
Bootstrap的栅格系统支持1到12的列值，这意味着你可以将12个单位分配给一个行内的列。如果一个行内的列总和超过12，超出的部分将会自动换行。这种灵活的布局方式使得页面在不同屏幕尺寸下都能保持良好的展示效果。 ...
Bootstrap开发实战之第一次接触Bootstrap
09-02
在实际开发中，通常会将这些资源链接到HTML文件中，然后利用Bootstrap的栅格系统、组件和样式来构建页面。例如，创建第一个Bootstrap页面时，会涉及到引入必要的CSS和JS文件，设置基本的HTML结构，使用Bootstrap的类...
Bootstrap入门教程一Hello Bootstrap初识
01-19
Bootstrap是基于 HTML5、CSS3和Javascriopt开发的，它在 jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件，为实现快速开发提供了一套前端工具包，包括丰富的...
Bootstrap框架的12栅格系统
热门推荐
美奇软件开发工作室
04-10 1万+
Bootstrap 栅格系统Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。什么是栅格（Grid）？在平面设计中，栅格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用 HTM...
bootstrap--栅格系统详解（源码分析）
weixin_47942860的博客
03-17 2106
对bootstrap源码进行了简单的分析，通过递归可以实现响应式布局，以及介绍了栅格系统的精妙之处。1.bootstrap是什么？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
服务网格与微服务开发框架融合实践
github_33929692的博客
09-11 846
读者需具备基础： - 已对微服务有一定实践经验，使用过一种以上的微服务开发框架 - 对 Service Mesh 有一定理解，知道他是什么，运作机制，可以通过我过去的分享来了解[Service Mesh 在华为公有云的实践](https://gitbook.cn/books/5a1e7dca387c5b4ee351790b/index.html) 话题范围： - 不会讨论灰度发布，限流，熔断...
什么是栅格系统
baidu_32542573的博客
12-03 3907
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。  我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：  网格系统的实现原理非常简单，仅...
Web前端开发之CSS学习笔记10—栅格布局（网格布局）
qq_45709187的博客
05-30 4500
目录【网格布局grid】1.网格布局的构成 2.父容器grid container3.生成网格容器 display:grid/inline-grid4.构建网格 grid-template-columns/grid-template-rows（1）grid-template-columns（2）grid-template-rows5.定位空间 grid-template-areas和grid-area4.设置间隙grid-gap5.网格对齐方式（1）justify-content ：区域内容的水平对齐（2）
JS自定义栅格系统
hq.zheng的博客
06-27 1601
一.静态页面代码&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;JS自定义栅格系统&lt;/title&gt; &lt;style&gt; /* * 设置通用样式 */ *{ margin: 0;
HTML/PHP/MySQL实现登录界面、连接数据库、数据库查询、数据在页面展示
weixin_43203591的博客
04-06 1万+
应用场景 帮女朋友做作业，需要用xampp实现网站建设，要求建立后台数据库、使用PHP实现页面查询、页面内容更新等功能。 本人自查自学，使用了较多的基础知识点，在此处记录下。 代码实现 以下涉及数据库连接、数据库查询、数据库字段设置、文件跳转、文件变量请自行根据自己情况进行设置。 代码仅实现登录、连接数据库、数据库查询等核心功能，页面美化功能部分代码不在此处展示。如有需要请自行进行美化。 代码文件1：HTML登录界面代码 <html> <head> <title>Logi
JavaScript：点击图片后更换图片
weixin_43203591的博客
08-12 6641
背景 单击图片实现更换图片。本例中代码实现单击图片后交替显示两张图片。 实现 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>灯泡</title> </head> <body> <img id = "pic" src = "on.png"> <!--此处应注意图片位置，确保图片在当前
JavaScript：点击按钮打开/关闭网页
weixin_43203591的博客
08-13 3194
背景 使用JavaScript实现点击按钮打开指定网页，点击另一个按钮关闭之前打开的网页。 实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Window对象</title> </head> <body> <input id = "openBtn" type = button value=
1-4_前端框架BootStrap.pdf
01-19
总的来说，"1-4_前端框架BootStrap.pdf" 是一本介绍 Bootstrap 框架的教程，通过详细讲解 Bootstrap 的概念、栅格系统、CSS 组件和 JavaScript 插件，帮助读者快速上手并掌握 Bootstrap 框架的使用。该教程内容丰富...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值