1 下载Bootstrap
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。当前下载的Bootstrap版本为v3.3.7
http://getbootstrap.com/ http://v3.bootcss.com/
http://www.runoob.com/bootstrap/bootstrap-tutorial.html
2 Bootstrap包含的文件
css: Bootstrap最重要的部分,预先设计好的样式文件。
fonts: Bootstrap用到的字体。
js: Bootstrap用到的JS插件。
3 使用Bootstrap
现在网页中使用Bootstrap需要在网页中加载Bootstrap用到的css样式表,js文件。
1) BootStrap的JS插件依赖于Jquery库,需要在以下网站下载Jqeruy:
http://jquery.com/
2) 编写第一个Bootstrap
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/index.css" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="icon" href="./img/index.png"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1 class="page-header">使用<small>Bootstrap编写网页</small></h1> <p>helloWorld </p> </div> </body> </html>