Bootstrap栅格系统与常用组件

最新推荐文章于 2024-06-22 18:29:21 发布

暮白寒窗雪

最新推荐文章于 2024-06-22 18:29:21 发布

阅读量1.4k

点赞数 5

文章标签： bootstrap

本文链接：https://blog.csdn.net/tiben/article/details/119355900

版权

本文详细介绍了Bootstrap的栅格系统，包括栅格系统的基本描述、布局容器、基本使用、屏幕适配和列的操作。此外，还讲解了Bootstrap的常用组件，如全局CSS样式，特别是排版部分的内容，如标题、表格、表单、按钮和图片样式等。

摘要由CSDN通过智能技术生成

Bootstrap栅格系统与常用组件

一、Bootstrap栅格系统

1、BootStrap框架
使用方式
A、下载编译包,在页面中导入其核心的css文件和JavaScript文件

<link href="bootstrap.min.css" ref="stylesheet"/>
<script src="../js/jquery-3.4.1.js"></script>
 <script src="bootstrap.min.js" type="text/javascript></script>

B、使用CDN提供的文件地址(必须联网)

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>

（一）栅格系统基本描述

1、栅格系统（Grid Systems）
即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上，一个印刷版面上划分了若干个格子，非常方便排版，后来，栅格系统被应用于网页布局中，使用响应式栅格系统进行页面布局时，可以让一个网页在不同大小的屏幕上，呈现出不同的结构。例如，在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏
2、简单版栅格系统
代码如下
编写HTML结构

<body>
  <div class="row"><header>页头</header></div>
  <div class="row">
    <nav class="col1">导航</nav>
    <div class="col2">主要内容</div>
    <aside class="col1">侧边栏</aside>
  </div>
  <div class="row"><footer>页尾</footer></div>
</body>

编写CSS样式代码

<style>
  .row {
    width: 100%; }
   .row :after {
     /* 通过伪元素:after清除浮动 */
    clear: left;  /* 清除左浮动 */
    content: '';	
    display: table;   /* 该元素会作为块级表格来显示（类似 <table>） */