IT评测·应用市场-qidao123.com

标题: 快速学习Bootstrap前端框架 [打印本页]
作者: 诗林    时间: 2025-3-11 10:46
标题: 快速学习Bootstrap前端框架
什么是 Bootstrap？


Bootstrap 是一个开源的前端框架，用于快速开辟响应式（Responsive）和雅观的网页。它包含：
✅ HTML 组件（导航栏、按钮、表单等）
✅ CSS 样式（网格系统、排版、颜色等）
✅ JavaScript 交互（模态框、轮播图、工具提示等）

官网：Bootstrap · The most popular HTML, CSS, and JS library in the world.

<hr> Bootstrap 主要特性

1. 响应式设计（Responsive）
• 适配桌面、平板、手机等差别设备
• 使用 Flexbox & Grid 结构
2. 丰富的 UI 组件
• 按钮、表单、表格、导航栏等
3. 基于 CSS & JavaScript
• CSS 组件（颜色、排版、间距）
• JavaScript 插件（模态框、轮播图、告诫框）
4. 易用性
• 只需引入 Bootstrap 的 CSS 和 JS，即可快速构建页面

<hr> 如何使用 Bootstrap？


方法 1：CDN 引入（保举）

无需下载，直接在 HTML 头部引入：
  1. <!-- Bootstrap 5 CDN -->
  2. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  3. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
复制代码
方法 2：当地安装
  1. npm install bootstrap
复制代码
然后在 index.html 引入：
  1. <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
  2. <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
复制代码


<hr> 1. 网格系统（Grid System）


Bootstrap 使用 row + col 结构，基于 12 列栅格系统：
  1. <div class="container">
  2.     <div class="row">
  3.         <div class="col-md-4">列1</div>
  4.         <div class="col-md-4">列2</div>
  5.         <div class="col-md-4">列3</div>
  6.     </div>
  7. </div>
复制代码
col-md-4 表示：
• md（medium）屏幕 及以上占 4/12 列
• 适配桌面、平板、手机等差别屏幕尺寸

自顺应结构
  1. <div class="row">
  2.     <div class="col-sm-6 col-lg-3">小屏 6 列，大屏 3 列</div>
  3.     <div class="col-sm-6 col-lg-3">小屏 6 列，大屏 3 列</div>
  4.     <div class="col-sm-6 col-lg-3">小屏 6 列，大屏 3 列</div>
  5.     <div class="col-sm-6 col-lg-3">小屏 6 列，大屏 3 列</div>
  6. </div>
复制代码
差别设备宽度
     断点
     col-sm-*
     col-md-*
     col-lg-*
           小屏（≤576px）
     100% 宽度
     50%
     33.33%
   

<hr> 2. 按钮（Buttons）


Bootstrap 提供多种按钮样式：
  1. <button class="btn btn-primary">主按钮</button>
  2. <button class="btn btn-secondary">次要按钮</button>
  3. <button class="btn btn-success">成功</button>
  4. <button class="btn btn-danger">危险</button>
  5. <button class="btn btn-warning">警告</button>
  6. <button class="btn btn-info">信息</button>
复制代码
按钮大小
  1. <button class="btn btn-lg btn-primary">大按钮</button>
  2. <button class="btn btn-sm btn-secondary">小按钮</button>
复制代码

<hr> 3. 表单（Forms）

  1. <form>
  2.     <div class="mb-3">
  3.         <label class="form-label">
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4