第一个bootstrap网页
2015-08-10 10:04
756 查看
bootstrap文件下载地址:
http://getbootstrap.com/getting-started/
打开上面的地址连接之后,能看见这样的三个download,第一个download下载的就是bootstrap相关的cssjs文件了,而第二个就是所有的bootstrap源代码
点击第一个download bootstrap下载,会得到bootstrap-3.3.5-dist压缩包,解压它,里面有三个文件夹css、js、fonts,每个文件夹下就是对应的相关文件了
在与这三个文件夹同一级的文件目录下,创建一个index.html文件,开始编辑该html文件的内容。
ok,打开就能看见该网页了,该html只为显示如何导入使用bootstrap开发网页
http://getbootstrap.com/getting-started/
打开上面的地址连接之后,能看见这样的三个download,第一个download下载的就是bootstrap相关的cssjs文件了,而第二个就是所有的bootstrap源代码
点击第一个download bootstrap下载,会得到bootstrap-3.3.5-dist压缩包,解压它,里面有三个文件夹css、js、fonts,每个文件夹下就是对应的相关文件了
在与这三个文件夹同一级的文件目录下,创建一个index.html文件,开始编辑该html文件的内容。
<!DOCTYPE html> <!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 hello world</title> <!-- 引入bootstrap的css文件 --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- 下面几行代码是对IE浏览器的支持,将来可以不写了,windows10已经把IE换掉,再说基本上早就没人使用IE了--> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt 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> <!-- bootstrap的js文件是基于jquery的,要先引用jquery文件,该引入必须在引入bootstrap的js文件之前 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 引入bootstrap的js文件 --> <script src="js/bootstrap.min.js"></script> </body> </html>
ok,打开就能看见该网页了,该html只为显示如何导入使用bootstrap开发网页
相关文章推荐
- Laravel 5.1.4 + Bootstrap 3.3.5 笔记一:Laravel 环境搭建
- 基于Servlet+JDBC+Bootstrap+MySQL+AJAX权限管理系统项目实战教程
- Bootstrap--组件之下拉菜单
- 利用Bootstrap制作一个流行的网页
- Bootstrap 准备工作
- Bootstrap的js插件之侧边栏停靠(affix)
- 2015.8.1 bootstrap学习(个人每日学习的随笔,比较凌乱
- Bootstrap的js插件之轮播(carousel)
- BootStrap模态框2
- BootStrap模态框
- Bootstrap的js插件之警告框(alert.js)
- Bootstrap的js插件之弹出框(popover)
- Bootstrap的js插件之按钮(button)
- bootstrap 一些有趣的用法
- Bootstrap的js插件之折叠(collapse)
- Bootstrap和IE何时能相亲相爱啊~
- bootstrap 判断设备大小改变网格布局
- bootstrap 注意点
- bootstrap 线上库
- hello bootstrap