Bootstrap进行响应式页面的布局一

柔光的暖阳◎ 2022-04-18 06:23 155阅读 0赞

### Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的。 ###

### 优点： ###

优先面对移动设备进行适配和开发；

所有的主流浏览器对支持它；

简单易上手；

响应式设计风格，符合现代web网页开发趋势；

### 响应式图像： ###

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

接下来让我们看下这个 class 包含了哪些 css 属性。

在下面的代码中，可以看到*img-responsive* class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。

### 浏览器的支持情况： ###

<table> 
 <tbody> 
  <tr> 
   <th>&nbsp;</th> 
   <th>Chrome</th> 
   <th>Firefox</th> 
   <th>IE</th> 
   <th>Opera</th> 
   <th>Safari</th> 
  </tr> 
  <tr> 
   <td><strong>Android</strong></td> 
   <td>YES</td> 
   <td>YES</td> 
   <td>不适用</td> 
   <td>不适用</td> 
   <td>不适用</td> 
  </tr> 
  <tr> 
   <td><strong>iOS</strong></td> 
   <td>YES</td> 
   <td>不适用</td> 
   <td>不适用</td> 
   <td>不适用</td> 
   <td>YES</td> 
  </tr> 
  <tr> 
   <td><strong>Mac OS X</strong></td> 
   <td>YES</td> 
   <td>YES</td> 
   <td>不适用</td> 
   <td>YES</td> 
   <td>YES</td> 
  </tr> 
  <tr> 
   <td><strong>Windows</strong></td> 
   <td>YES</td> 
   <td>YES</td> 
   <td>YES*</td> 
   <td>YES</td> 
   <td>不适用</td> 
  </tr> 
 </tbody> 
</table>

### 网格系统： ###

*  “行（row）”必须包含在 `.container` （固定宽度）或 `.container-fluid` （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
 *  通过“行（row）”在水平方向创建一组“列（column）”。
 *  你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
 *  类似 `.row` 和 `.col-xs-4` 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
 *  通过为“列（column）”设置 `padding` 属性，从而创建列与列之间的间隔（gutter）。通过为 `.row` 元素设置负值 `margin` 从而抵消掉为 `.container` 元素设置的 `padding`，也就间接为“行（row）”所包含的“列（column）”抵消掉了`padding`。
 *  负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
 *  栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 `.col-xs-4` 来创建。
 *  如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
 *  栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 `.col-md-*`栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 `.col-lg-*`不存在， 也影响大屏幕设备。

### 网格参数： ###

<table> 
 <thead> 
  <tr> 
   <th>&nbsp;</th> 
   <th>超小屏幕&nbsp;手机 (&lt;768px)</th> 
   <th>小屏幕&nbsp;平板 (≥768px)</th> 
   <th>中等屏幕&nbsp;桌面显示器 (≥992px)</th> 
   <th>大屏幕&nbsp;大桌面显示器 (≥1200px)</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <th>栅格系统行为</th> 
   <td>总是水平排列</td> 
   <td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td> 
  </tr> 
  <tr> 
   <th><code>.container</code>&nbsp;最大宽度</th> 
   <td>None （自动）</td> 
   <td>750px</td> 
   <td>970px</td> 
   <td>1170px</td> 
  </tr> 
  <tr> 
   <th>类前缀</th> 
   <td><code>.col-xs-</code></td> 
   <td><code>.col-sm-</code></td> 
   <td><code>.col-md-</code></td> 
   <td><code>.col-lg-</code></td> 
  </tr> 
  <tr> 
   <th>列（column）数</th> 
   <td colspan="4">12</td> 
  </tr> 
  <tr> 
   <th>最大列（column）宽</th> 
   <td>自动</td> 
   <td>~62px</td> 
   <td>~81px</td> 
   <td>~97px</td> 
  </tr> 
  <tr> 
   <th>槽（gutter）宽</th> 
   <td colspan="4">30px （每列左右均有 15px）</td> 
  </tr> 
  <tr> 
   <th>可嵌套</th> 
   <td colspan="4">是</td> 
  </tr> 
  <tr> 
   <th>偏移（Offsets）</th> 
   <td colspan="4">是</td> 
  </tr> 
  <tr> 
   <th>列排序</th> 
   <td colspan="4">是</td> 
  </tr> 
 </tbody> 
</table>

### 响应式表格： ###

通过把任意的 *.table* 包在 *.table-responsive* class 内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

### 创建表单的基本步骤： ###

*  向父 <form> 元素添加 *role="form"*。
 *  把标签和控件放在一个带有 class *.form-group* 的 <div> 中。这是获取最佳间距所必需的。
 *  向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="*form-control*" 。

### Bootstrap按钮: ###

<table> 
 <tbody> 
  <tr> 
   <th>类</th> 
   <th>描述</th> 
   <th>&nbsp;</th> 
  </tr> 
  <tr> 
   <td>.btn</td> 
   <td>为按钮添加基本样式</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.btn-default</td> 
   <td>默认/标准按钮</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.btn-primary</td> 
   <td>原始按钮样式（未被操作）</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.btn-success</td> 
   <td>表示成功的动作</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.btn-info</td> 
   <td>该样式可用于要弹出信息的按钮</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.btn-warning</td> 
   <td>表示需要谨慎操作的按钮</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.btn-danger</td> 
   <td>表示一个危险动作的按钮操作</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.btn-link</td> 
   <td>让按钮看起来像个链接 (仍然保留按钮行为)</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.btn-lg</td> 
   <td>制作一个大按钮</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.btn-sm</td> 
   <td>制作一个小按钮</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.btn-xs</td> 
   <td>制作一个超小按钮</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.btn-block</td> 
   <td>块级按钮(拉伸至父元素100%的宽度)</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.active</td> 
   <td>按钮被点击</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>.disabled</td> 
   <td>禁用按钮</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>