在HTML网页中引入Bootstrap前端框架

最新推荐文章于 2024-05-19 01:30:07 发布

lzssing

最新推荐文章于 2024-05-19 01:30:07 发布

阅读量3.4w

点赞数 8

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/qq_21429153/article/details/55212569

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

Bootstrap百度百科介绍：

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

这是优雅的分割线....................................

要想在HTML网页中试用Bootstrap,至少需要引入三个文件

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
   
   <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
   
   <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

然后将所有使用Bootsrap样式的代码写在如下DIV中，二者选一。

   <div class="container">
   //这里写你bootstrap样式的代码
   </div>

    <div class="container-fluid">
   //这里写你bootstrap样式的代码
   </div>

以下是本人编写的一个例子网页代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>首页</title>
	<!-- 设置文档编码 -->
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<!--  -->
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<!-- 新 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	<!-- CSS样式 -->
	<style type="text/css">
		.container div{
			text-align:center;
		}
	</style>
</head>
<body>
	<div class="container">
		<div ><h4>请选择你要进行的操作</h4></div>
		<br/>
		<div ><button type="button" class="btn btn-primary btn-lg btn-block active" οnclick="location=''" >我要出租汽车</button></div>
		<br/>
		<div ><button type="button" class="btn btn-primary btn-lg btn-block" disabled="disabled" οnclick="location=''">我要租赁汽车</button></div>
	</div>
</body>
</html>

注：

引入文件时，我是在线引入，为了方便不联网的情况，我们可以先将这三个文件下载下来，然后在引入本地路径的CSS文件和JS文件。至于如何获得这三个文件，麻烦点的可以去Bootstrap的官网http://v3.bootcss.com/和JQuery

的官网http://jquery.com/下载相应的文件下来，这样可以加深对Bootsrtap的了解；最简单的就是直接访问这三个网页

http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css

http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js

http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js

将网页内容直接保存下来，文件名跟网页名称一致。

lzssing

关注

8
点赞
踩
26

收藏

觉得还不错? 一键收藏
2
评论
在HTML网页中引入Bootstrap前端框架

Bootstrap百度百科介绍： Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由
复制链接

扫一扫