Bootstrap介绍

最新推荐文章于 2024-09-10 12:07:44 发布

间接性踌躇满志，持续性混吃等死

最新推荐文章于 2024-09-10 12:07:44 发布

阅读量273

点赞数 1

本文链接：https://blog.csdn.net/weixin_45846312/article/details/105942512

版权

Bootstrap介绍

关于Bootstrap，官方是这样介绍的：Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。这句话中，重点在于响应式以及移动设备优先。

所谓"响应式布局"，就是你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是 CSS 媒体查询（Media Query）的功劳。

除了响应式和移动设备优先，Bootstrap还提供了非常多的组件，比如表单、按钮、下拉菜单、输入框组、提示框、图标等，都是拿来即用并且使用效果非常好。

如何使用BootStrap

关于使用如何bootstrap，你只需要把bootstrap相关的js文件、css文件下载到本地就可以使用，由于bootstrap是基于jquery设计的，所以在引入bootstrap.js文件前，要先引入jquery.js。

下载bootstrap的三种常用方法

方法一：到官网下载zip压缩包（链接地址https://www.bootcss.com/
）

bootstrap/
├── less/   //css源码 
├── js/    //js源码
├── fonts/  //字体源码
├── dist/  预编译过的bootstrap文件
│   ├── css/
│   ├── js/
│   └── fonts/  
└── docs/
    └── examples/   //官方说明文档

解压从官网下载的压缩包后，将dist目录下的bootstrap.css和bootstrap.js引入到HTML中即可

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap入门</title>
    <link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.css">

</head>
<body>
    <div class="container">
        
        <h1 class="page-title">hello bootstrap</h1>
        <button type="button" class="btn btn-default">（默认样式）Default</button>
        <button type="button" class="btn btn-primary">（首选项）Primary</button>

        <button type="button" class="btn btn-success">（成功）Success</button>

        <button type="button" class="btn btn-info">（一般信息）Info</button>

        <button type="button" class="btn btn-warning">（警告）Warning</button>

        <button type="button" class="btn btn-danger">（危险）Danger</button>

        <button type="button" class="btn btn-link">（链接）Link</button>
    </div>
</body>
<script src="jquery-3.4.1/jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7/dist/js/bootstrap.js"></script>
<script></script>
</html>

方法二：CDN引入（有网络的情况下）
CDN引入比较简单，直接到官网复制CDN地址，在head标签中引入即可

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <h1 class="page-title">hello bootstrap</h1>
    </div>
</body>
</html>

方法三：Bower、npm或者Composer工具安装

bootstrap的使用

1 普通的HTML文档

<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>bootstrap</title>
</head>
<body>
   <!-- 待完善内容 -->
</body>
</html>

2 引入bootstrap的css、js以及jquery.js文件

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap</title>
    <!-- bootstrap媒体查询,对移动设备更加友好 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.css">
</head>
<body>
    <!-- 待完善内容 -->
</body>
<script src="jquery-3.4.1/jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7/dist/js/bootstrap.js"></script>
</html>

在官网找到相关示例代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap</title>
    <!-- bootstrap媒体查询,对移动设备更加友好 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.css">
    <style>
        p{
            line-height: 35px;
            padding-left: 15px;
        }
        .container{
            margin-top: 80px;

        }
    </style>
</head>
<body>
    <div class="container">
        <h2 class="page-title">bootstrap情境背景色的使用</h2>
        <p class="bg-primary"> i like bootstrap very much!</p>
        <p class="bg-success">i like bootstrap very much!</p>
        <p class="bg-info">i like bootstrap very much!</p>
        <p class="bg-warning">i like bootstrap very much!</p>
        <p class="bg-danger">i like bootstrap very much!</p>
    </div>
</body>
<script src="jquery-3.4.1/jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7/dist/js/bootstrap.js"></script>
</html>