bootstrap学习笔记

bootstrap学习路线

全局CSS
组件
JavaScript插件

安装bootstrap插件。bootstrap中css,fonts,js,拷贝到WebContent。
在一个网页中引入bootstrap相关的文件

设置移动设备优先的元数据<meta name = “viewport”.......>
引入jQuery的js文件，务必在引入bootstrap的js文件之前先写好
引入bootstrap的js文件

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
   <link rel="stylesheet" type="text/css" href="bootstrap/css/carousel.css">
   <link rel="stylesheet" type="text/css" href="css/flat-ui.css">
   <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
   <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

案例：完成一个图片的响应设计交互

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>淘宝 首页</title>
 6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 <link rel="shortcut icon" href="images/favicon.io">
 8 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
 9 <link rel="stylesheet" type="text/css" href="bootstrap/css/carousel.css">
10 <link rel="stylesheet" type="text/css" href="css/flat-ui.css">
11 <link rel="stylesheet" type="text/css" href="css/tb.css">
12 </head>
13 <body>
14     <div class="container">
15         <img class="img-responsive"src="图片路径">
16     </div>
17 </body>
18 </html>

posted on 2015-08-25 13:38 王家何先生阅读(134) 评论(0) 收藏举报