学习笔记2—bootstrap简介以环境搭建
一、bootstrap简介 1.Bootstrap起初是由twitter两个人开发的,2011年在GitHub上发布开源项目。 2.bootstrap的优点: 1)移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。 2)浏览器支持:所有的主流浏览器都支持bootstrap。 3)容易上手:只要有html、css、js的基础,就可以轻松学习bootstrap了。 4)响应式设计:bootstrap的响应式css能够自适应于台式电脑以及各种移动终端。 5)
二、bootstrap的下载安装 1. 打开http://getbootstrap.com/getting-started/#download ,点击“Download Bootstrap”开始下载。下载下来的是预编译的压缩版本。 2.解压后得到的层级关系(文件夹)如下: bootstrap: ?-- dist ? ? ? ? ?----css ? ? ? ? ?----fonts ? ? ? ? ?-----js 值得一说的是:fonts文件夹下的Glyphicons 的字体,是一个可选的 Bootstrap 主题。 三、HTML模板:(摘自W3Cschool 教程) 一个使用了bootstrap的基本html模板如下:
<!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- 引入 Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --> <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello,world!</h1> <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) --> <script src="https://code.jquery.com/jquery.js"></script> <!-- 包括所有已编译的插件 --> <script src="js/bootstrap.min.js"></script> </body> </html>以上代码包括浏览器兼容的一些操作。 Note: less 是一门css预处理语言。让css易于维护与扩充。Less 可以运行在 Node、浏览器和 Rhino 平台上。 参考链接:http://www.w3cschool.cc/bootstrap/bootstrap-environment-setup.html 内嵌于浏览器的测试编辑工具: http://www.w3cschool.cc/try/tryit.php?filename=bootstrap3-environment-setup 可视化布局: http://www.w3cschool.cc/try/bootstrap/layoutit/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |