Bootstrap1.Bootstrap-简介

1.介绍     

         Bootstrap 是一个用于急迅开 Web
应用程序和网站的前端框架。Bootstrap 是依照 HTML、CSS、JAVASCRIPT 的。

2.HTML 模板

         一个运用了 Bootstrap 的基本的 HTML 模板如下所示:

 

         <!DOCTYPE html>

         <html>

            <head>

               <title>Bootstrap 模板</title>

               <meta name=”viewport” content=”width=device-width,
initial-scale=1.0″>

               <!– 引入 Bootstrap –>

               <link
href=”http://apps.bdimg.com/libs/bootstrap/3.3.0/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"&gt;&lt;/script&gt;

                    <script
src=”https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"&gt;&lt;/script&gt;

               <![endif]–>

            </head>

            <body>

               <h1>Hello, world!</h1>

 

               <!– jQuery (Bootstrap 的 JavaScript 插件需要引入
jQuery) –>

               <script
src=”https://code.jquery.com/jquery.js"&gt;&lt;/script&gt;

               <!– 包括拥有已编译的插件 –>

               <script src=”js/bootstrap.min.js”></script>

            </body>

         </html>

3.移动设备优先

         width
属性控制装置的小幅。假诺你的网站以吃含有不同屏幕分辨率的装备浏览,那么将其装为
device-width 能够管它们亦可科学展现于不同装备上。

         initial-scale=1.0 确保网页加载时,以 1:1
的比例突显,不会晤出另外的缩放。

         user-scalable=no 可以忍受用其缩放(zooming)功效。

         通常情状下,maximum-scale=1.0 与 user-scalable=no
一起用。这样受用缩放效用后,用户只好滚动屏幕,就能给您的网站看上去更如原生应用的感觉。

        
注意,这种情势我们连无推荐所有网站采纳,仍旧要看你自己的境况假诺早晚!

         <meta name=”viewport” content=”width=device-width,

                                                    initial-scale=1.0,

                                                    maximum-scale=1.0,

                                                   
user-scalable=no”>

4.响应式图像

         <img src=”…” class=”img-responsive” alt=”响应式图像”>

         通过抬高 img-responsive class 可以给 Bootstrap 3
中之图像对响应式布局的辅助更融洽。

相关文章