[JavaScript] BootStrap框架

最新推荐文章于 2023-08-01 09:58:36 发布

秃小陈

最新推荐文章于 2023-08-01 09:58:36 发布

阅读量219

点赞数

分类专栏： BootStrap JavaScript 笔记文章标签： html bootstrap css

本文链接：https://blog.csdn.net/m0_47652477/article/details/116429784

版权

本文介绍了BootStrap框架的基本概念、快速入门方法，详细讲解了栅栏系统布局的使用，并探讨了全局CSS样式和JS插件，包括按钮、图片、表格和表单等组件的应用。

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

第一章 BootStrap

1.1 概述

BootStrap：一个前端开发的框架，基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷

框架：一个半成品的软件，开发人员可以在框架的基础上进行开发，简化编码

好处

定义了很多的css样式和js插件。我们开发人员可以直接使用这些样式和插件得到丰富的页面效果
响应式布局

1.2 快速入门

下载bootstrap
在项目中引入
创建html页面，，引入必要的资源文件

代码如下

<!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">
    <title>Hello BootStrap</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery-3.6.0.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Hello BootStrap!</h1>

</body>
</html>

1.2 栅栏系统布局

栅栏系统：将一行平均分为12个格子，可以指定元素占几个格子

步骤

定义容器（相当于定义一个table）
1. 容器分类
  1. container : 左右两侧都有一定的宽度留白 (看下面的图片)
  2. contain-fluid : 在每一种设备上面都是100%宽度显示
定义行（相当于tr）样式： row
定义元素（相当于td），指定该元素在不同的设备上，占用的格子的数目样式：col-设备代号-格子数目
1. 超小屏幕 手机 (<768px)：.col-xs-
2. 小屏幕 平板 (≥768px)：.col-sm-
3. 中等屏幕 桌面显示器 (≥992px)： .col-md-
4. 大屏幕 大桌面显示器 (≥1200px)：.col-lg-

在这里插入图片描述

代码如下

<!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">
    <title>Hello BootStrap</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery-3.6.0.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <style>
        [inner] {
    
            border: 1px solid hotpink;
            text-align: center;
        }
    </style>
</head>
<body>
<!--1. 定义容器-->
<div class="container-fluid">
    <!--定义行-->
    <div class="row">
        <!--        这里有12个格子,每个格子占一个位置-->
        <div class="col-lg-1 col-sm-2 col-xs-4" inner>栅格</div>
        <div class="col-lg-1 col-sm-2 col-xs-4" inner>栅格</div>
        <div class="col-lg-1 col-sm-2 col-xs-4" inner>栅格</div>
        <div