开发者学堂课程【前端开发框架Bootstrap使用教程:Bootstrap 起步】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/360/detail/4221
Bootstrap 起步
一、Bootstrap基本模板
打开 bootstrap 中文网
基本模板例子
拷贝并粘贴下面给出的 HTML 代码,这就是一个最简单的 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 -->
<linkhref="css/bootstrap.min.css(引入的一个样式
表)"rel="stylesheet">
<!-- HTML5 shim and Respond.js forIE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if It IE 9]>
<script src="//cdn. bootcss.com/html5shiv/3.7.2/html5shiv.min js"></script>
(script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js" >
</script>
<![endif]-->
</head>
<body>
<h1>像好,世界!</h1>
<!--jQuery (necessary for Bootstrap's JavaScript plugins)-->
<script src-"//cdn.bootcss.com/ jquery/1.11.3/jquery.min.js">
</script>
<!--Include all compiled plugins(below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
(建议手动输入熟悉一下)
打开开发环境
输入D:\web\L01_bootstrapbase
创建一个 HTML 文件
需要一个 bootstrapbase 并添加到 html
然后引入一个 jQuery
也可以直接在下载 bootstrap 的下面复制图中三个代码直接引入文件
<!DOCTYPE html>
<html lang=”em”>
<head>
<meta charset=”UTF-8”>
<meta http-equiv=”x-ua-compatible”content=”IE=edge”>
<metaname=”viewport”content=”width=device-width,initial-scale=1”>
<title>这是第一个 bootstrap 网页</title>
<link href=”bootstrap.min.css”rel=”stylesheet”>
<script src=”//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js”></script>
<script src=”//cdn.bootcss.com/respond.js/1.4.2/respond.min.js”></script>
</head>
<body>
<div class=”jquery-2.2.1.min.js”></script>
<p>你好!</p>
</div>
<script src=”jquery-2.2.1.min.js”></script>
<script src=”bootstrap.min,js”></script>
</body>
</html>