Bootstrap起步|学习笔记

简介: 快速学习Bootstrap起步

开发者学堂课程【前端开发框架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>

相关文章
|
前端开发 开发者 容器
Bootstrap- 响应式工具|学习笔记
快速学习 Bootstrap- 响应式工具
116 0
Bootstrap- 响应式工具|学习笔记
|
Web App开发 弹性计算 前端开发
实验4 利用 BootStrap 创建简单页面| 学习笔记
快速学习实验4 利用 BootStrap 创建简单页面
195 0
实验4 利用 BootStrap 创建简单页面| 学习笔记
|
移动开发 前端开发 JavaScript
Bootstrap- 起步|学习笔记
快速学习 Bootstrap- 起步
174 0
Bootstrap- 起步|学习笔记
|
前端开发 开发者
Bootstrap-组件 |学习笔记
快速学习 Bootstrap-组件
86 0
|
前端开发 开发者 容器
Bootstrap-栅格系统-扩展|学习笔记
快速学习 Bootstrap-栅格系统-扩展
88 0
Bootstrap-栅格系统-扩展|学习笔记
|
前端开发 开发者 容器
Bootstrap-栅格系统|学习笔记
快速学习 Bootstrap-栅格系统
125 0
Bootstrap-栅格系统|学习笔记
|
前端开发 开发者
Bootstrap-全局样式 |学习笔记
快速学习 Bootstrap-全局样式
87 0
Bootstrap-全局样式 |学习笔记
|
移动开发 编解码 前端开发
Bootstrap-简介 |学习笔记
快速学习 Bootstrap-简介
88 0
|
JavaScript 前端开发 开发者
Bootstrap-插件|学习笔记
快速学习 Bootstrap-插件
138 0
Bootstrap-插件|学习笔记
|
前端开发 Java Python
Bootstrap学习笔记3--图片样式
看到他们一个个的编辑器用起来感觉好炫酷,心想一定要找个最最最适合自己的软件。抱着这种心态把所有编辑器轮流安装用了一圈。可安装完才想起来,公司最近查的紧,严禁使用未申报的软件,回过头来还是接着用Sublime Text3吧...
135 0