Bootstrap第一章 bs入门

最新推荐文章于 2024-01-04 20:40:54 发布

LW0512

最新推荐文章于 2024-01-04 20:40:54 发布

阅读量368

点赞数

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108936652

版权

bootstrap 专栏收录该内容

8 篇文章

订阅专栏

本文是Bootstrap入门教程，介绍了Bootstrap的起源、网址、优点、框架内容、文件结构以及如何使用这个流行的前端框架。Bootstrap提供了CSS、JS基础结构，包含网格系统、链接样式和组件，并支持自定义和jQuery插件。

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

Bootstrap入门

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

3：bootstarp优点：

--移动设备优先：自 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文件介绍：

最新版本的 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>

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

9:bs框架已经把html里面的标签的内外边距取消了。