Bootsrtap学习之一：如何使用Bootstrap

时间 2019-11-13

标签 bootsrtap 学习之一如何使用 bootstrap 栏目 Bootstarp 繁體版

原文原文链接

#Bootsrtap学习之一：如何使用Bootstrap @(Bootstrap)[网页] ##导言笔者自学了html和css,正在学习javascript中，一直想要开发一个我的网站，了解到前端有不少框架能够帮助快速开发网页，从网上各类前端框架中选择了Bootstrap，目前将一步步学习此框架，并编写Bootstrap教程，帮助更多的人学习bootstrap.javascript

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合做开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它便是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。 --摘自百度百科css

[TOC]html

##1.Bootstrap框架的下载 只涉及Windows平台的安装使用 网页打开bootstrap中文网，选择用于生产环境的Bootstrap，下载bootstrap框架。注意：在解压获得文件夹中写html文件，与css,font,js,位于同一目录下前端

2.框架的使用

而后开始编写html文件，这里给出整个测试源码html5

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>text</title>
	<link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
</head>
<body>
	<h1>Hello,World!</h1>
	</body>
	<script src="js/jquery.js"></script>
	<script stc="js/bootstrap.min.js"></script>
</html>

1.咱们将bootstrap的样式文件引入网页java

<link rel="stylesheet" href="css/bootstrap.min.css" media="screen">

2.将js文件引入网页，因为js通常依赖于JQuery库，因此咱们要引入JQuery库jquery

<script src="js/jquery.js"></script>
<script stc="js/bootstrap.min.js"></script>

3.viewport的标签能够修改大部分移动设备上面的显示，为确保适当绘制和触屏缩放bootstrap

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

4.使用html5新的标签，在IE9如下浏览器并不支持这些标签，修复这个问题引用以下浏览器

<!--[if lt IE 9]>
    <script src="http://labfile.oss.aliyuncs.com/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="http://labfile.oss.aliyuncs.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

意思就是说若是用户 IE 浏览器的版本小于 IE9，那么就会加载这两个 js 文件库，如今就可使用这些新的标签，而且能够在这些标签上添加样式了。性能优化

参考实验楼Bootstrap3.0入门学习