bootstrap 3 学习乱记

正文:

可能是一直觉得时间紧凑,看 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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值