bootstrap----入门使用

最新推荐文章于 2024-09-28 08:36:51 发布

背地里装个英雄

最新推荐文章于 2024-09-28 08:36:51 发布

阅读量309

点赞数

本文链接：https://blog.csdn.net/qq_44193064/article/details/105928792

版权

一.了解bootstrap:
(1).bootstrap是一个前端开发时使用的框架。前端开发主要写HTML5、css3、JavaScript。而bootstrap框架主要为我们提供两个最重要的文件：bootstrap.min.css和bootstrap.min.js。

(2).在bootstrap4.x版本中，bootstrap.min.js需要依赖两个文件：jquery-3.3.1.slim.min.js和popper.min.js。jquery不用多说了，但是popper.min.js这个框架对制作和美化下拉框、文字提示、弹出框等非常有用。

二.简单的使用:
(1).方法一
bootstrap重要的是两个文bootstrap.min.css和bootstrap.min.js。使用bootstrap框架有两个方法，一是在官网下载bootstrap，解压缩后找到bootstrap.min.css和bootstrap.min.js复制粘贴到您正在开发的项目下，具体放在工程里面的哪一级哪个目录下自己决定，然后在需要用到该框架的.html文件里用标签引入bootstrap.min.css，用

eg;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- Bootstrap CSS -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!--你自己写的样式文件，尽量不要放在bootstrap.min.css之前-->
		<link href="css/your-style.css" rel="stylesheet">
	</head>
	<body>
		<div>hello</div>
		<!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<!--官方建议这三个<script>标签写在body结束标签之前，三个标签顺序不能搞乱-->
		<script src="js/jquery-3.3.1.slim.min.js"></script>
		<script src="js/popper.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

(2).方法二:
是不需要下载任何文件，使用BootstrapCDN快速地将 Bootstrap 应用到你的项目中,所有文件会通过http请求自动下载并引入到自己的项目中。

<!Doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
  </html>

注意:为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，我们需要在网页的 head 之中添加 viewport meta 标签。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

width=device-width 表示宽度是设备屏幕的宽度。
initial-scale=1 表示初始的缩放比例。
shrink-to-fit=no 自动适应手机屏幕的宽度。