bootstrap框架使用基础&对比

最新推荐文章于 2025-06-07 08:28:40 发布

weixin_45846980

最新推荐文章于 2025-06-07 08:28:40 发布

阅读量514

点赞数

CC 4.0 BY-SA版权

文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/weixin_45846980/article/details/105919000

本文介绍了BootStrap框架的基本用途，强调其在前端页面开发中的便利性，节省了自定义样式和处理浏览器兼容性的繁琐工作。通过学习官方文档和使用基础模板，开发者可以快速上手。文章还提到了BootStrap的响应式布局、移动设备优先的设计理念，以及丰富的组件和栅格系统，这些都使得网页开发更加高效。

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

1.bootStrap是干嘛的？有什么用处？

我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。

2.bootStrap怎么用？

1.bootstrap官网
学习bootstrap最主要是学会看文档，bootstrap本是一个已经定义一些样式的框架，在最基础的bootstrap框架下，也可以做出好看的页面，再改变里面一些样式来符合我们的要求。所以学会看文档才能更好更简单的学习bootstrap
在这里插入图片描述
进入官网在上方的导航栏后就可以看到文档

3.基础模板

在vs code中安装bootstrap插件就会有有类似html5基础模板显示
代码：bs3-template:html5
但是原版模板样式有些是不需要这么繁琐的，可以自定义一个模板
原版模板

<!DOCTYPE html>
<html lang="">
    <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>Title Page</title>

        <!-- Bootstrap CSS -->
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1 class="text-center">Hello World</h1>

        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Bootstrap JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

修改整理过后模板

<!DOCTYPE html>
<html lang="">
    <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>Title Page</title>

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

      
    </head>
    <body>
        <h1 class="text-center">Hello World</h1>

        <!-- jQuery -->
        <script src="bootstrap-3.3.7-dist/js/jquery-1.12.4.min.js"></script>
        <!-- Bootstrap JavaScript -->
        <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    </body>
</html>