Bootstrap

最新推荐文章于 2024-01-08 10:00:00 发布

h294590501

最新推荐文章于 2024-01-08 10:00:00 发布

阅读量206

点赞数

分类专栏：前端基础文章标签： Bootstrap

本文链接：https://blog.csdn.net/h294590501/article/details/80544575

版权

前端基础专栏收录该内容

13 篇文章 1 订阅

订阅专栏

Bootstrap

Bootstrap：它是一个简洁、直观、强悍的前端开发框架，让 web 开发更迅速、简单。

1_用于前端开发的框架。
2_基于 HTML5、CSS3 和 JavaScript 技术。
3_制作网站的页面。

Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。

响应式布局基于 HTML5 和 CSS3 才可以实现。

响应式布局：一个网页可以自动适配设备的宽度，在手机，平板电脑，台式电脑上看到的是同一个页面。

Bootstrap 包含的内容

1_设置全局 CSS 样式：基本的 HTML 元素均可以通过 class 设置样式并得到增强效果。
2_组件：无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
3_JavaScript 插件：jQuery 插件为 Bootstrap 的组件赋予了“活的生命”。

Bootstrap 的目录结构

bootstrap/
├── css/ 全局的 CSS 样式，把所有的标签重新定义了样式。
│ ├── bootstrap.css 样式文件，标准版
│ ├── bootstrap.min.css 压缩版，我们开发的时候使用压缩版
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.min.css
├── js/ JavaScript 的插件目录。
│ ├── bootstrap.js JS 文件，标准版
│ └── bootstrap.min.js 压缩版，我们开发的时候使用压缩版
└── fonts/ 字体图标，用于在网页上使用各种 BootStrap 提供的小图标，如果不用，这个文件夹可以不复制。
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

//压缩版与标准版的功能是一样的，压缩版文件更小，更省资源，加载速度更快。
//但是没有换行，没有注释，变量名都很短。

创建 Bootstrap 模板文件的步骤

1_复制 bootstrap-3.3.7-dist.zip 解压出来的三个文件夹 css、js、fonts 到项目中。
2_复制 jQuery 框架 jquery-3.2.1.min.js 文件到 js 目录下。
3_创建 HTML 文件，复制“基本模板”代码到我们创建的 HTML 文件中。

模板的详细解释

<!DOCTYPE html>
<html lang="zh-CN">
<!--指定为中文-中国-->
    
<head>
    
    
<!-- 指定网页的字符集为 utf-8-->
<meta charset="utf-8">
    
<!--使用微软最新的浏览器 Edge 的内核来解析当前的 HTML 文件，最新的浏览器都支持 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
    
<!-- 响应式布局参数：
viewport： 视口的参数
width=device-width：默认的网页宽度是设备的宽度
initial-scale=1: 初始的缩放比 1：1
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
    
<!-- 上述 3 个 meta 标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>我的第一个 Bootstrap 程序</title>
    
<!-- 1. 导入 bootstrap 的全局 css 样式 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
    
<!-- 2. 导入 jQuery 框架 -->
<script src="js/jquery-3.2.1.min.js"></script>
    
    
<!-- 3. 导入 bootstrap 框架 -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>

h294590501

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap

BootstrapBootstrap：它是一个简洁、直观、强悍的前端开发框架，让 web 开发更迅速、简单。1_用于前端开发的框架。2_基于 HTML5、CSS3 和 JavaScript 技术。3_制作网站的页面。Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。响应式布局基于 ...
复制链接

扫一扫