Bootatarp 第一章入门

最新推荐文章于 2025-06-04 10:03:47 发布

原创最新推荐文章于 2025-06-04 10:03:47 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

Bootstarp 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了Bootstrap框架的基础知识，包括框架的简介、网址、优点、内容结构、文件介绍以及如何使用Bootstrap来构建网页。Bootstrap通过取消HTML标签的内外边距简化了页面布局。

1 bootstarp简介：

--Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。
--Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

2 bootstarp网址：

--中文网址：https://www.bootcss.com/
--外文网址： http://getbootstrap.com/
--菜鸟网络：https://www.runoob.com/bootstrap/bootstrap-grid-system.html

3bootstarp优点：

--移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
--浏览器支持：所有的主流浏览器都支持 Bootstrap。 
--容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
--响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

4 Bootstrap 框架的内容：

--基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
--CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
--组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
--JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
--定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

5 Bootstrap文件介绍：

<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>

6：Bootstrap基本结构：

<!DOCTYPE html>
	<html lang="zh-CN">
	  <head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>

		<!-- Bootstrap -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
		<!--[if lt IE 9]>
			解决IE9以下浏览器不支持h5的问题
		  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
		  解决IE9以下浏览器不支媒体查询的问题
		  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
		<![endif]-->
	  </head>
	  <body>
		<h1>你好，世界！</h1>

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
	  </body>
	</html>

7 如何使用bootstarp框架：

--下载bootstarp框架
--把用到文件引入到项目当中
--熟记应用bootstarp框架里面定义好的类的作用

8 bootstarp框架的内容：

--css样式
--css组件
--js插件