Bootstrap基本内容

最新推荐文章于 2023-03-09 13:54:08 发布

佩大奇

最新推荐文章于 2023-03-09 13:54:08 发布

阅读量392

点赞数

分类专栏： bootstrap3 文章标签： bootstrap

本文链接：https://blog.csdn.net/m0_68373541/article/details/123808820

版权

本文详细介绍了Bootstrap的基本概念，包括其作为前端开发框架的优势，如响应式布局和预定义的CSS样式与JS插件。文章深入讲解了快速入门Bootstrap的方法，如何引入资源并创建HTML页面。此外，还重点阐述了Bootstrap的栅格系统，用于实现不同设备的兼容性，并提供了设备代号和栅格元素的使用规则。最后，概述了全局CSS样式，如按钮、图片、表格、表单和组件（如导航条、分页条和轮播图）的样式和用法。

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

一、基本概念

一个前端开发的框架

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

2.好处：

（1）.定义了很多的css样式和js插件。开发人员可以直接使用这些样式和插件得到丰富的页面效果

（2）.响应式布局：同一套页面可以兼容不同分辨率的设备

(3) . 看文档bootstrap3

二、快速入门

1.下载bootstrap:

2.在项目中引入bootstrap：件三个文件夹复制到项目里面

3.创建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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css" >
</head>
<body>
<h1>你好，世界！</h1>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.6.0.min.js" ></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js" ></script>
</body>
</html>

三、Bootstrap_栅格系统

1、响应式布局

*同一套页面可以兼容不同分辨率的设备

*实现：依赖于栅格系统：将一行平均分成12个格子

*步骤：

1.定义容器：相当于之前的table。

*容器的分类：

1.container : 每一种设备的宽度式固定的百分比：两边留白

2.container-fluid : 每一种设备都是100%宽度

2.定义行：相当于之前的tr。样式：row

3.定义元素：指定该元素在不同设备上，所占的各自数目。

*设备代号：

1.xs ：超小屏幕手机(<768px) : col-xs-12

2.sm : 小屏幕平板（>=768px)

3.md : 中等屏幕桌面显示器（>=992px)

4.lg : 大屏幕大桌面显示器（>=1200px)

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css" >


    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="js/jquery-3.6.0.min.js" ></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js" ></script>
<style>
    .inner{
        border :1px solid red;
    }
</style>
</head>
<body>
<!--定义容器-->
<div class="container-fluid">
        <!-- 2.定义行-->
    <div class="row">
        <!--3.定义元素
                在大显示器一行12个格子
                在pad上一行6个格子
        -->

        <div class="col-lg-1 col-sm-2 inner">wahhh</div>
        <div class="col-lg-1 col-sm-2 inner">wahhh</div>
        <div class="col-lg-1 col-sm-2 inner">wahhh</div>
        <div class="col-lg-1 col-sm-2 inner">wahhh</div>
        <div class="col-lg-1 col-sm-2 inner">wahhh</div>
        <div class="col-lg-1 col-sm-2 inner">wahhh</div>
        <div class="col-lg-1 col-sm-2 inner">wahhh</div>
        <div class="col-lg-1 col-sm-2 inner">wahhh</div>
        <div class="col-lg-1 col-sm-2 inner">wahhh</div>
        <div class="col-lg-1 col-sm-2 inner">wahhh</div>
        <div class="col-lg-1 col-sm-2 inner">wahhh</div>
        <div class="col-lg-1 col-sm-2 inner">wahhh</div>
    </div>
</div>
</body>
</html>

注意：

1.一行中如果格子数目超过12个，则超出部分的格子自动换行。

2.类属性可以向上兼容（>定义的尺寸），向下不兼容。

3.如果设备宽度小于设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

效果：

（说明：不同页面大小显示的格式不一样）