Web基础(从零开始)——Bootstrap使用方法（文档下载、引入及使用）

Bootstrap基于HTML、CSS和JS，使得Web开发更加快捷。

中文网站：http://www.bootcss.com/

官网：http://getbootstrap.com/

1.创建bootstrap文件夹

点击下载文档，并解压

包括三个文件夹

将以上三个文件复制到之前创建的文件夹中，这样我们就创建好了bootstrap文件夹

注：此文件中的css文件夹是bootstrap中的，而我们自己建立的css中保存我们自己写的，千万不要将两者混淆。

2.创建HTML骨架

使用VScode自动生成框架

将以下代码复制到head中

<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->

解释：

解决ie9以下浏览器对HTML5新增标签不认识，导致CSS不起作用：

解决ie9以下浏览器对css3 Media Query的不识别问题

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
    <title>Document</title>
</head>

<body>

</body>

</html>

3.引入相关样式文件：我们现在主要使用的是bootstrap.min.css中的内容，所以引用它就好了

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
</head>

<body>

</body>

</html>

4.书写内容

此时我们发现网页的背景颜色有些许区别（我也没咋看出来），页面的内外边距没了（看得出文字的顶部和左部没有间隙了），文字也变了

如果你发现了上述这些变化：恭喜你成功引入了bootstrap！

注：以上操作仅针对于HTML和CSS，还没有引入JS，后续会再写一个针对JS的。

Bootstrap使用：

1.查找官网选择你想要的样式

在CSS中选择你想要的样式

可以看到网页右边有很多东西，可以先看一看

假设我们选择了如图所示的按钮

2、找到相应的代码，复制，粘贴

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
</head>

<body>
    <button type="button" class="btn btn-primary">（首选项）Primary</button>
</body>

</html>

还可以在其他地方添加如图所示的效果，不一定是按钮，只需添加上相应的class就行

例：在一个div上添加：此时这个div盒子拥有了和前面的按钮一样的样式（包括鼠标移上去会变色）

<div class="btn btn-primary"></div>

由此可见，Bootstrap是通过不同的class控制不同的样式的，给谁加上这个class，谁就拥有了这个样式，我们也可以使用两个类名，来实现样式修改

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .test {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <button type="button" class="btn btn-primary test">（首选项）Primary</button>
    <div class="btn btn-primary"></div>
</body>

</html>

在bootstrap中的组件中有很多已经做好的东西：

使用方法是一样的，复制就好了

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .test {
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <ul class="nav nav-pills">
        <li role="presentation" class="active"><a href="#">Home</a></li>
        <li role="presentation"><a href="#">Profile</a></li>
        <li role="presentation"><a href="#">Messages</a></li>
    </ul>
    <!-- <button type="button" class="btn btn-primary test">（首选项）Primary</button>
    <div class="btn btn-primary"></div> -->

</body>

</html>

Web基础(从零开始)——Bootstrap使用方法（文档下载、引入及使用）

猜你喜欢