bootstrap简介

最新推荐文章于 2024-08-26 18:34:51 发布

龙城老z

最新推荐文章于 2024-08-26 18:34:51 发布

阅读量201

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap

本文链接：https://blog.youkuaiyun.com/weixin_42435721/article/details/87998034

Bootstrap 专栏收录该内容

0 篇文章

订阅专栏

本文档介绍了如何创建H5文档，通过简单的步骤实现HTML5页面的搭建，并讲解了移动设备优先策略的实现方法。此外，还详细阐述了如何在项目中引入Bootstrap，包括CSS样式和JS文件的引入方式，以及如何利用Bootstrap提供的类名来设置全局CSS样式，实现快速布局和美化。

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

一、引入文件

1、必须是H5的文档
在编辑器中输入！，然后按tab键即可生成h5文档。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

2、移动设备优先
在头文件中添加以下代码

<meta name="viewport" content="width=device-width, initial-scale=1">

3、引入文件到项目中

引入css样式

<link rel="stylesheet" href="/Public/styles/bootstrap.min.css">

引入js

 <script type="text/javascript" src="/Public/js/jquery.js"></script>     //依赖于jquery，要先引入
 <script type="text/javascript" src="/Public/js/bootstrap.js"></script>

二，全局的CSS样式

官方的：设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
解释：bootstrap给用户写了很多css样式，我们可以通过类名来使用
<标签名 class=“类名”></标签名>

布局容器
1、固定的宽度
.container 类用于固定宽度并支持响应式布局的容器。

<div class="container" style="border:1px solid #f00;">固定宽度的容器</div>

2、百分百宽度
.container-fluid 类用于100%宽度，占据全部视口的容器

表格样式

在这里插入图片描述