Bootstrap快速入门

最新推荐文章于 2025-05-08 14:43:07 发布

冰镇可乐爱开发

最新推荐文章于 2025-05-08 14:43:07 发布

阅读量282

点赞数

CC 4.0 BY-SA版权

文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_50721317/article/details/124457473

本文介绍Bootstrap框架的基本概念，包括其作为前端开发框架的优势，如预定义样式和响应式设计。重点讲解如何通过下载、引入文件和使用栅格系统创建兼容不同设备的页面，提供了一个示例代码来演示布局过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap

基本概念

一个前端开发的框架
- 框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码
基于HTML,CSS,JavaScript
好处
1. 定义了很多的css样式和js插件，我们开发人员可以直接使用这些样式和插件
2. 响应式布局：同一套页面可以兼容不同分辨率的设备(手机，电脑等)

快速入门

下载bootstrap
在需要时使用的的项目中把文件夹复制

创建页面，引入需要的css,js文件

    <link href="css/bootstrap.min.css.map" rel="stylesheet">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>

响应式布局

同一套页面可以兼容不同分辨率的设备
实现：依赖于栅格系统，将一行平均分为12个格子，可以指定元素占几个格子

步骤

定义容器
- 容器分类
  1. container：两边会有留白
  2. container-fluid：每一种设备都是100%的宽度
定义行
1. row
定义元素。指定该元素在不同设备上所占的格子数目
1. 设备代号
  1. xs:超小屏幕 <768px
  2. sm:小屏幕 <768px
  3. md:中等屏幕 >992
  4. lg：大屏幕 >1200
  5. 使用示例：col-xs-格子数量
注意事项：
1. 一行格子数超过12个格子之后会自动换行
2. 适用于大于等于分界点的设备
3. 如果真实设备小于了设置的栅格类属性的设备代码的最小值，会一个元素占满一整行

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-1 col-sm-2">栅格</div>
            <div class="col-lg-1 col-sm-2">栅格</div>
            <div class="col-lg-1 col-sm-2">栅格</div>
            <div class="col-lg-1 col-sm-2">栅格</div>
            <div class="col-lg-1 col-sm-2">栅格</div>
            <div class="col-lg-1 col-sm-2">栅格</div>
        </div>
    </div>
</body>
</html>