开发者社区> 学堂小助手> 正文

02_Bootstrap起步2|学习笔记

简介: 快速学习 02_Bootstrap起步2
+关注继续查看

开发者学堂课程【前端开发框架 Bootstrap 使用教程02_Bootstrap起步2】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/360/detail/4221


02_Bootstrap 起步2


一、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>


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
08_Bootstrap 全局 css 样式_排版3|学习笔记
快速学习08_Bootstrap 全局 css 样式_排版3
46 0
02_Bootstrap起步2|学习笔记
快速学习 02_Bootstrap起步2
28 0
28_Bootstrap组件_分页 |学习笔记
快速学习28_Bootstrap组件_分页
29 0
06_Bootstrap 全局 css 样式_排版1|学习笔记
快速学习06_Bootstrap 全局 css 样式_排版1
29 0
34_Bootstrap组件_面版,具有响应式特性的嵌入内容,Well|学习笔记
快速学习34_Bootstrap组件_面版,具有响应式特性的嵌入内容,Well
16 0
29_Bootstrap 组件_路径导航,标签,徽章 | 学习笔记
快速学习 29_Bootstrap 组件_路径导航,标签,徽章
31 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18420 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
24957 0
04-Bootstrap 全局 css 样式_栅格系统 1|学习笔记
快速学习04-Bootstrap 全局 css 样式_栅格系统 1
30 0
Bootstrap3.0入门学习系列规划[持续更新]
详情请看http://aehyok.com/Blog/Detail/5.html 个人网站地址:aehyok.com QQ 技术群号:206058845,验证码为:aehyok 本文文章链接:http://www.cnblogs.com/aehyok/p/3981965.html 感谢您的阅读,如果您对我的博客所讲述的内容有兴趣,那不妨点个推荐吧,谢谢支持:-O。
478 0
1783
文章
0
问答
来源圈子
更多
技术图谱:由专家组参与技术图谱的绘制与编写,知识与实践的结合让开发者们掌握学习路线与逻辑,快速提升技能 电子书:电子书由阿里内外专家打造,供开发者们下载学习,更与课程相结合,使用户更易理解掌握课程内容 训练营:学习训练营 深入浅出,专家授课,带领开发者们快速上云 精品课程:汇集知识碎片,解决技术难题,体系化学习场景,深入浅出,易于理解 技能自测:提供免费测试,摸底自查 体验实验室:学完即练,云资源免费使用
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载