Bootstrap栅格系统与常用组件

本文详细介绍了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>) */
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值