Bootstrap CSS概览代码文字标注篇

时间：2023-03-08 16:32:13
Bootstrap CSS概览代码文字标注篇 
<!DOCTYPE html>

<html>

   <head>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

      <title>Bootstrap 练习</title>

    <!--Bootstrap3的设计目标是移动设备优先，然后才是桌面设备。为了让Bootstrap开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的head之中添加viewport meta 标签-->

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

      <!--width属性控制设备的宽度。假设网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为device_width可以确保它能正确的呈现在不同设备上。initial-scale=1.0确保网页加载时，以1:1的比例呈现，不会有任何的缩放-->

      <!--在移动浏览设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放(zooming)功能。通常情况下，maximum-scale=1.0与user-scalable=no 一起使用。这样 禁用其缩放(zooming)功能。注意，这种方式我们并不推荐所有网站使用。-->

      <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

      <!-- 引入 Bootstrap -->

      <link href="../bootstrap/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]-->

<style>

/*bootstrap3使用body{margin:0;}来移除body的边距。*/

body{font-family:"Helvetica Neua",Helvetica,Arial,sana-serif; font-size:14px; line-height:1.428571429; color:#333; background-color:#fff;}

/*css代码，img-responsive class为图像赋予了max-width和height属性，可以让图像按比例缩放，不超过其父元素尺寸。这表明相关的图像呈现为inline-block。当元素的display属性设置为inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。设置height：auto，相关元素的高度取决于浏览器。设置max-width为100%会重写任何通过width属性指定的宽度。让图片对响应式布局更友好*/

.img-responsive{display:inline-block;height:auto; max-width:100%;}

/*当鼠标悬停在连接上，或者点击过的连接，颜色会被设置为#2a6496 同时，会呈现一条下划线，点击过的连接，会呈现一个颜色为#333的细的虚线框，框为5像素，且基于webkit浏览器有一个-webkit-focus-rings-color的浏览器扩展。轮廓偏移设置为-2像素*/

a:hover,

a:focus{color:#2a6496; text-decoration:underline;}

a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color; outline-offset:-2px;}

/*把container的左右外边距(margin-right、margin-left)交由浏览器决定，注意，由于内边距(padding)是固定宽度，默认情况下容器是不可镶嵌的*/

.container{padding-right:15px; padding-left:15px; margin-right:auto;margin-left:auto;}

</style>

   </head>

   <body>

        <h1>Hello, world!</h1>

        <h2>响应式图像</h2>

        <img class="img-responsive" src="QQ截图20160603133912.png" alt="响应式图像">

        <!--通过添加img-responsive class可以让Bootstrap 3中的图像对响应式布局的支持更友好--><br>

        <h2>排版</h2>

        <p>使用@font-family-base、@font-size-base和@line-height-base属性作为排版样式</p><br>

        <h2>连接样式</h2>

        <p>通过属性@link-color设置全局链接的颜色。对于链接的默认样式，如上a css</p>

        <h3>以上所有样式都可以在scaffolding.less中找到</h3>

        <h2>避免跨浏览器的不一致性</h2><p>Normalize.css是很小的css文件，在HTML元素的默认样式中提供了更好的跨浏览器一致性</p>

        <h2>容器(container)</h2>

        <div>Bootstrap3的container class用于包裹页面上的内容。

        <p><div>.container:before,.ontainer:after{display:table;content:"";}</div>

        这会产生伪元素。设置display为table，会创建一个匿名的table-cell和一个新的块格式化上下文。:before伪元素防止上边距崩塌，：after伪元素清除浮动。如果conteneditable属性出现在HTML中，由于Opera bug，围绕上述元素创建一个空格这可以通过使用content:""来修复。

        <div>.container:after{clear:both;}</div>

        它创建了一个伪元素，并确保了所有的容器包含所有的浮动元素。Bootstrap 3 CSS有一个申请响应的媒体查询，在不同的媒体查询阈值范围内都为container设置了max-width，用以匹配网格系统。

        <div>@media(min-width:768px){

        .container{

            width:750px;

        }}</div>

        </p>

        </div><br>

        <h2>Bootstrap浏览器、设备支持</h2>

        <p>下表为Bootstrap支持最新版本的浏览器和平台：</p>

        <table border="3px" width="100%" cellpadding="1" cellspacing="2" color="#3366CC">

        <tr><td></td>

        <td>Chrome</td>

        <td>Firefox</td>

        <td>IE</td>

        <td>Opera</td>

        <td>Safair</td>

        </tr>

        <tr>

        <td>Android</td>

        <td>YES</td>

        <td>YES</td>

        <td>不适用</td>

        <td>NO</td>

        <td>不适用</td>

        </tr>

        <tr>

        <td>IOS</td>

        <td>YES</td>

        <td>不适用</td>

        <td>不适用</td>

        <td>NO</td>

        <td>YES</td>

        </tr>

        <tr>

        <td>Mac OS X</td>

        <td>YES</td>

        <td>YES</td>

        <td>不适用</td>

        <td>YES</td>

        <td>YES</td>

        </tr>

        <tr>

        <td>Windows</td>

        <td>YES</td>

        <td>YES</td>

        <td>YES*</td>

        <td>YES</td>

        <td>NO</td>

        </tr>

        *Bootstrap支持Internet Explorer 8及更高版本的IE浏览器

        </table><br>

        <h2>Bootstrap网格系统</h2>

        <p>Bootstrap提供了一套响应式、移动设备优先的网格流式网格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列</p><br>

        <h3>什么是网格(Grid)</h3>

        <p>在平面设计中，网格是一种由一系列用于组织内容的相交的直线（垂直的、水平的）组成的结构（通常是二维的）。它广泛应用于打印设计的设计布局和内容结构。在网页设计中，它是一种用于快速创建一致的布局和有效地使用HTML和CSS的方法</p><br>

        <h3>什么是bootstrap网格系统(Grid System)</h3>

        <p>Bootstrap包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到12列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。</p>

        <ul type="circle"><li>一、内容</li>

        <li>决定什么是最重要的</li>

        <li>二、布局</li>

        <li>优先设计更小的宽度</li>

        <li>基础的css是移动设备优先，媒体查询是针对于平板电脑、台式电脑。</li>

        <li>三、渐进增强</li>

        <li>随着屏幕大小的增加而添加元素</li>

        <li>响应式网格系统随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多的12列。</li>

        </ul>  <br>

    <h2>Bootstrap网格系统(Grid System)的工作原理</h2>

    <p>网格系统通过一系列包含内容的行和列来创建页面布局。</p>

        <ul><li>行必须放置在.container class内，以便获得适当的对齐(alignment)和内边距(padding)。</li>

        <li>使用行来创建列的水平组。</li>

        <li>内容应该放置在列内，且唯有列可以是行的直接子元素。</li>

        <li>预定义的网格类，比如.row和.col-xs-4,可用于快速创建网格布局。LESS混合类可用于更多的语义布局。</li>

        <li>列通过内边距(padding)来创建列内容之间的间隙。该内边距是通过.rows上的外边距(margin)取负，表示第一列和最后一列的行偏移。</li>

        <li>网格系统是通过指定想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个.col-xs-4。</li>

        </ul><br>

    <h2>媒体查询</h2>

    <p>媒体查询是非常别致的"有条件的css规则"。它只适用于一些基于某些规定条件的css。如果满足那些条件，应用相应的样式。<br>

Bootstrap中的媒体查询允许基于视口大小移动、显示并隐藏内容。下面的媒体查询在LESS文件中使用，用来创建Bootstrap网格系统中的分界点阈值。</p><br>

    <h2>网格选项</h2>

    <p>下表总结了Bootstrap网格系统如何跨多个设备工作：</p>

    <table width="100%" cellpadding="1" cellspacing="2" border="5px">

    <tr><td></td>

    <td>超小设备手机(<768px)</td>

    <td>小型设备平板电脑(>=786px)</td>

    <td>中型设备台式电脑(>=992px)</td>

    <td>大型设备台式电脑(>=1200px)</td>

    </tr>

    <tr><td>网格行为</td>

    <td>一直都是水平的</td>

    <td>以折叠开始，断点以上的是水平的</td>

    <td>以折叠开始，断点以上的是水平的</td>

    <td>以折叠开始，断点以上的是水平的</td>

    </tr>

    <tr><td>最大容器宽度</td>

    <td>None(auto)</td>

    <td>750px</td>

    <td>970px</td>

    <td>1170px</td>

    </tr>

    <tr><td>Class前缀</td>

    <td>.col-xs-</td>

    <td>.col-sm-</td>

    <td>.col-md-</td>

    <td>.col-lg-</td>

    </tr>

    <tr><td>12</td>

    <td>12</td>

    <td>12</td>

    <td>12</td>

    </tr>

    <tr><td>最大列宽</td>

    <td>Auto</td>

    <td>60px</td>

    <td>78</td>

    <td>95px</td>

    </tr>

    <tr><td>间隙宽度</td>

    <td>30px(一个列的每边分别15px)</td>

    <td>30px(一个列的每边分别15px)</td>

    <td>30px(一个列的每边分别15px)</td>

    <td>30px(一个列的每边分别15px)</td>

    </tr>

    <tr><td>可嵌套</td>

    <td>YES</td>

    <td>YES</td>

    <td>YES</td>

    <td>YES</td>

    </tr>

    <tr><td>偏移量</td>

    <td>YES</td>

    <td>YES</td>

    <td>YES</td>

    <td>YES</td>

    </tr>

    <td>列排序</td>

    <td>YES</td>

    <td>YES</td>

    <td>YES</td>

    <td>YES</td>

    </td>

    </table><br>

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

      <script src="https://code.jquery.com/jquery.js"></script>

      <!-- 包括所有已编译的插件 -->

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

   </body>

</html>