前端必知：36.如何使用bootstrap框架

最新推荐文章于 2024-02-26 16:51:43 发布

小姚学前端

最新推荐文章于 2024-02-26 16:51:43 发布

阅读量1.5k

点赞数 2

分类专栏： HTHL+CSS 文章标签：前端 bootstrap html

本文链接：https://blog.csdn.net/qq_52799985/article/details/132069110

版权

HTHL+CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

一.介绍

Bootstrap框架是一个功能强大而易于使用的工具，能够帮助开发者快速构建现代化的网站和应用程序。它提供了响应式设计、预定义样式和组件、浏览器兼容性、定制主题以及集成的JavaScript插件等功能。通过使用Bootstrap，你可以节省大量的开发时间，同时确保你的网站在不同设备上获得出色的显示效果。希望通过本文的介绍，你对Bootstrap框架有了更深入的了解，并能够在你的项目中充分利用它的优势。

bootstrap框架的优势

响应式设计：

Bootstrap的响应式设计使得网站能够适应不同屏幕尺寸和设备。它提供了一套灵活的网格系统，使得布局的创建变得简单而直观。不管是在桌面、平板还是手机上，你的网站都能够提供出色的用户体验。

预定义样式和组件：

Bootstrap提供了丰富的预定义样式和组件，使得网站的开发变得轻松。它提供了大量的按钮、表单元素、导航栏、卡片、警告框等组件，让你在网站中快速添加各种功能和元素。此外，这些组件经过精心设计，具有现代而美观的外观。

统一的浏览器兼容性：

Bootstrap经过广泛测试，确保在各种主流浏览器中具有良好的兼容性。不必担心为每个浏览器调试和编写特定的CSS代码，Bootstrap已经为你处理了这些问题，让你专注于更重要的开发任务。

定制主题：

Bootstrap允许你通过自定义主题来满足项目的特定需求。你可以修改变量、样式选项，或者使用Sass预处理器，轻松地创建出与众不同的外观和风格。这意味着你可以为你的网站添加个性化的色彩和风格。

集成的JavaScript插件：

Bootstrap内置了许多常用的JavaScript插件，如轮播、模态框、下拉菜单等。这些插件具有丰富的功能和选项，可以轻松地为网站添加交互效果，而无需从头编写复杂的JavaScript代码。

Bootstrap框架的不足

页面加载速度：

使用完整的Bootstrap框架可能导致页面加载速度较慢。由于其包含了大量的CSS和JavaScript文件，如果没有进行合理的优化和压缩，可能会增加页面的加载时间。对于需要追求极致性能的项目，可能需要考虑精简和定制化使用框架的部分。

样式冲突：

由于Bootstrap框架具有强大的默认样式，容易导致与自定义样式冲突的问题。当你需要对某些组件或元素进行自定义样式时，可能需要编写更具体的CSS选择器来覆盖或修改框架的默认样式。

学习曲线：

尽管Bootstrap框架的文档和教程非常丰富，但学习曲线仍然存在。熟悉框架的各种类和组件，以及合适的使用方法需要一定的时间和经验。初学者可能需要花费一些时间来熟悉框架的用法和理念。

网站的风格相似性：

由于Bootstrap框架的广泛应用，很多网站使用了类似的外观和布局，可能导致缺乏个性化和独特性。如果你想要打造一个与众不同的网站风格，可能需要更多的定制化工作，以免网站看起来过于通用。

依赖于JavaScript：

Bootstrap框架的一些功能和组件需要依赖JavaScript来实现，如果用户在浏览器中禁用了JavaScript，可能会导致某些功能无法正常使用。因此，对于需要考虑到无障碍性和兼容性的项目，需要注意这一点并提供替代方案。

二.使用方法

引入Bootstrap样式文件：

在HTML文件中的<head>标签内，使用<link>标签引入Bootstrap的样式文件。从 Bootstrap 的官方网站Bootstrap中文网 (bootcss.com)下载最新的样式文件，并将其链接到你的HTML文件中。例如：
<link rel="stylesheet" href="path/to/bootstrap.min.css">

使用Bootstrap的组件：

Bootstrap提供了一系列的CSS样式和JavaScript组件，你可以在你的HTML文件中使用它们。通过添加各种预定义的CSS类名，你可以使你的元素具有不同的样式。例如，使用CSS类名 "btn btn-primary" 可使按钮元素呈现蓝色的背景和白色的文字。

栅格系统：

Bootstrap的栅格系统是其最强大和核心的特性之一。通过使用栅格系统，你可以轻松地创建响应式的布局，使网页的元素在不同的屏幕尺寸下自动适应。栅格系统由行（<div class="row">）和列（<div class="col">）组成。你可以将内容包裹在这些行和列中，并使用相应的CSS类名来定义每列的宽度和在不同屏幕尺寸下的布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap/cdn.bootcdn.net_ajax_libs_twitter-bootstrap_5.2.3_css_bootstrap.min.css">
    <link rel="stylesheet" href="../css/my.css">
</head>
<body>
    <h1>举杯邀明月</h1>
    <span class="h1">对影成三人</span>
    <span class="h2">对影成三人</span>
    <!-- bootstrap 的栅格系统
         栅格系统  的外层必须有一个类名container 
         每一行的类名为 row
         每一列的类名为 col

         使栅格系统在不同的屏幕宽度下，显示不同的布局方式，可以使用
         col- 前缀 添加 列宽 列数 来设置
         列宽设置依据
               sm 屏幕最小是576px
               md 屏幕最小是768px
               lg 屏幕最小是992px
               xl 屏幕最小是1200px
               xxl 屏幕最小是1400px

        col-lg-4   含义是，在 大于720 小于 960的宽度下，占据4列栅格
        栅格系统，把屏幕的总宽度默认分隔成12列，元素可以在这12列中布局
    --> 
    <div class="container wp">
         <div class="row">
            <div class="col col-sm-5 col-lg-6">黑云压城城欲摧</div>
            <div class="col col-sm-5 col-sm-3">黑云压城城欲摧</div>
            <div class="col">黑云压城城欲摧</div>
            <div class="col">黑云压城城欲摧</div>
         </div>
         <div class="row">
            <div class="col col-lg-6">山雨欲来风满楼</div>
            <div class="col col-lg-6">黄梅时节家家雨</div>
            <div class="col col-lg-6">山雨欲来风满楼</div>
         </div>
    </div>
</body>
</html>