Bootstrap

I love studying!!!

于 2024-09-09 23:15:35 发布

阅读量951

点赞数 16

文章标签： bootstrap html 前端

本文链接：https://blog.csdn.net/m0_73759720/article/details/142070174

版权

一、概念

1. 基本概念

Bootstrap 是一个开源的前端框架，用于快速开发响应式和移动优先的网站。响应式布局是一种网页设计方法，旨在使网站能够兼容多个终端设备，包括桌面电脑、平板电脑和手机等，而不需要为每个设备单独开发特定版本。文档地址包括https://www.bootcss.com/和https://v4.bootcss.com/，进入官网下载bootstrap文件引入代码并使用。

2. 下载步骤

进入https://www.bootcss.com/地址，看到如下的页面，点击如图：

再将以上两个文件夹放在一个文件夹里，最后使用响应式布局时引入，引入步骤如下

二、布局种类

1. PC端布局

PC端布局通常采用多列设计，充分利用宽屏显示器的空间，展示更多内容。导航菜单通常横向排列，放置在页面顶部或侧边栏，方便用户使用鼠标进行精确点击和悬停操作。而移动端布局则以单列设计为主，适应较窄的屏幕宽度，内容纵向排列，导航菜单多采用折叠形式（如汉堡菜单），并注重触屏操作的便捷性。通过响应式设计，网页能够根据屏幕尺寸自动调整布局和样式，确保在不同设备上都有良好的用户体验。通常是版心+通栏设计，如图：

2. 移动端布局

移动端布局设计专注于适应小屏幕设备，如智能手机和平板。通常采用单列布局，内容纵向排列，避免横向滚动。导航菜单通常采用折叠形式（如汉堡菜单），以节省空间，并便于用户通过点击展开访问。移动端设计注重触屏操作，交互元素如按钮和链接需要足够大，确保用户能轻松点击。布局和字体也需调整，以保证在较小屏幕上内容清晰可读。通过响应式设计，网页可以根据不同设备自动调整，提供一致的用户体验。移动端是百分比的移动端设计，如图：

3. 响应式布局

响应式布局是一种网页设计方式，使同一页面在不同设备的屏幕下展示不同的UI效果，确保在各种尺寸的屏幕上都有良好的用户体验。通过使用Bootstrap框架，开发者可以大大提高响应式页面的开发效率，利用其预定义的CSS类和组件，快速构建适应多种设备的网页布局，从而简化开发过程。响应式布局在PC端、平板电脑和移动端呈现不同的表现形式。

三、响应式的基础操作

1. 响应式的原理

响应式布局的原理是媒体查询。CSS媒体查询允许开发者为不同屏幕尺寸、分辨率等条件定义不同的样式规则。页面根据这些条件选择性地应用特定的样式，使其在各类设备上都有合适的布局和设计。

2. 基本模板

基本模板包括导航条，内容区及底部，运行此代码，可以得到不同尺寸下的不同样式，基本代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="./bootcss/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>

    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">Brand</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Pricing</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <div class="container mt-4">
        <div class="row">
            <!-- 左侧栏 -->
            <div class="col-md-4 col-sm-12">
                <div class="p-3 border bg-light">Left Sidebar</div>
            </div>
            <!-- 主内容 -->
            <div class="col-md-8 col-sm-12">
                <div class="p-3 border bg-light">Main Content</div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-light text-center p-3 mt-4">
        &copy; 2024 Your Company. All rights reserved.
    </footer>

    <!-- 引入 Bootstrap JS -->
    <script src="./bootcss/js/bootstrap.bundle.js"></script>
</body>

</html>

3. 栅格布局

栅格系统是响应式网页设计中的一个核心概念，用于将网页布局划分为若干列，方便内容的排列和布局。通过栅格系统，开发者可以在不同设备上创建一致的布局，并且可以根据屏幕尺寸灵活调整内容的排列方式。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>基本模板</title>
    <link rel="stylesheet" href="./bootcss/css/bootstrap.css">
    <style>
        .row>div {
            height: 60px;
            border: 1px solid red;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="row">
            <!-- 中等屏幕划分1行4列 最大数字12 -->
            <!-- 数字等于多少  div.col-md-数字 -->
            <h3>实例1</h3>
            <div class="col-md-3">
                1
            </div>
            <div class="col-md-3">
                2
            </div>
            <div class="col-md-3">
                3
            </div>
            <div class="col-md-3">
                4
            </div>
            <div class="col-md-3">
                5
            </div>
        </div>
        <h3>实例2</h3>
        <div class="row">
            <!-- 小屏幕：1行2列，中等：1行3个， 大：1行4个 -->
            <!-- 小：12/2 = 6 -->
            <!-- 中：12/3 = 4 -->
            <!-- 大：12/4 = 3 -->
            <div class="col-sm-6 col-md-4 col-lg-3"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"></div>
            <div class="col-sm-6 col-md-4 col-lg-3"></div>
        </div>
        <h3>实例3</h3>
        <div class="row">
            <!-- 小屏幕：第一列2/12， 二：7/12，三：3/12-->
             <div class="col-sm-2">第一列</div>
             <div class="col-sm-7">第二列</div>
             <div class="col-sm-3">第三列</div>
        </div>
    </div>


    <script>


    </script>
</body>

</html>