bootstrap 3 学习乱记

最新推荐文章于 2020-05-07 22:42:15 发布

ichsonx

最新推荐文章于 2020-05-07 22:42:15 发布

阅读量1.4k

点赞数

分类专栏：前端

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

正文:

可能是一直觉得时间紧凑，看 bootstrap 文档的时候，总觉得太繁冗了。个人心目中比较理想的文档，不只是条理清楚，还需要简繁得当，最好把大多数繁文缛节放到注释里，让读者作为选读内容。下边是我看 bootstrap 3 抽取出来的部分内容：落了个俗，越往后越不想记了。

响应式布局可以通过几个修改禁用，参见这里。

转载请注明出处 http://blog.hickwu.com/posts/302 by Hick

官方并不说明支持 IE7 ，但是实际上表现还可以；理解起来，IE6 就基本不在支持范围了。

对于中文网页，建议 html 标签增加 lang 属性:

<html lang="zh-CN">
  ...
</html>

通过添.img-responsive class属性可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是为图片赋予了max-width: 100%;和height: auto;属性，可以让图片按比例缩放，不超过其父元的尺寸。

<img src="..." class="img-responsive" alt="Responsive image">

用.container包裹页面上的内容即可实现居中对齐。在不同的媒体查询阈值范围内都为container设置了max-width，用以匹配系统。

<div class="container">
  ...
</div>

默认竟然没有这个，害我一开始没看文档试了老半天也不知道怎么居中。

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，分为 12 个列单元，随着屏幕设备或视口（viewport）尺寸的变化，系统会自动调整这 12 个单元的版式。下面是栅格系统的一些特点：

“行（row）”必须包含在.container中，以便为其赋予合适的排列（aligment）和内补（padding）
行有列组成，而且内容不能直接放在行标签内，必须在列内
这个貌似是消除列的重叠？通过设置padding从而创建“列（column）”之间的间隔（gutter）。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响
栅格系统中的列是通过 .col-xs-4 这样的定义，4 表示 4 列，一行 12 列

在标题标签 h1-h6 内还可以包含<small>签或.small元，可以用来记副题。

通过添.lead可以让段落突出显示。

<p class="lead">...</p>

通过文本对齐class，可以简单方便的将文字重新对齐。

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

下面这些class通过颜色来表示强调

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

使用.pull-right可以让引用展现出向右侧移动、对齐的效果。

<blockquote class="pull-right">
  ...
</blockquote>

自动截断: 通过text-overflow，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

条纹状表格可以这样:

<table class="table table-striped">
  ...
</table>

另外 table-striped 还可以是:

table-bordered 带边框
table-hover 鼠标悬停突出
table-condensed 紧缩表格

将任何.table包裹在.table-responsive中即可创建响应式表，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

表单

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control的 <input>、<textarea>和<select>元素都将被默认设置为 width: 100%;。将label和前面提到的这些控件包裹在.form-group中可以获得最好的排列。

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" placeholder="email">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

内联(单行)的表单需要 form 标签有样式，注意虽然不显示，还是要 label 标签。

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" placeholder="email">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

俩列表格状的表单要为表单添加 form-horizontal ，如下:

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>