码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap学习 Base

时间:2014-05-29 01:08:47      阅读:441      评论:0      收藏:0      [点我收藏+]

标签:des   style   c   class   blog   code   

Tapestry的学习不得不停一下了。因为Bootstrap再一次引起了我的注意,并且我不得不再系统地学习它一次。

 

1 bootstrap需要一个HTML5的环境,也就是说必须是:

<!DOCTYPE html>
<html>
  ...
</html>

 

2 bootstrap3是移动设备优先的,需要指定一个meta信息,viewport,视角:

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

 

3 响应式图片的加入,img-responsive设定了一个图片的width:100%; height:auto;可以让图片按比例缩放,不超过其父元素的尺寸。

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

 

.container包裹页面上的内容即可实现居中对齐。

   注意,由于设置了padding 和 固定宽度,.container不能嵌套。

 

5 栅栏系统

row需要放到一个container中,以便追加适当的内补等;

row中只允许直接放置列(col-sm-6等);

内容放到列中。

 

6 栅栏系统中如果一个列的高度超过其它列的高度,当出现折行的时候会有错乱,需要在出现错乱的地方加入如下代码。。。

<div class="clearfix visible-xs"></div>

 

7 列嵌套需要追加一个新的row这样会完美的嵌套,否则会出现一些padding。。。

 

通过使用.col-md-push-* 和 .col-md-pull-*就可以很容易的改变列的顺序。

真心不明白为什么会有这个设计,(^.^)

 

9 一些被自定义的字号相关的内容:

<small>小字号容器的85%,<strong>粗字体,<em>斜体

 

10 文本对其: text-left,text-center,text-right

 

11 ul,li

<ul class="list-unstyled"> 设置该ul的直接子节点的li的样式为基本样式。

<ulclass="list-inline"> 设置直接子节点li处在一直线上。

 

12 .lead 让段落突出显示

 

13 

text-muted
text-primary
text-success
text-info
text-warning
text-danger

 

14 我们也许该试试把下面这些标签放到我们的HTML5中了:

<address> : 地址的设置,<br>是用来提供换行的;<strong>是用来提供突出显示的。

<blockquote> :引用别人的内容,其中需要<p>标签。直接引用这样就可以了。如果有出处的话,加入如下的代码就可以了。

<small>Someone famous in <cite title="Source Title">Source Title</cite></small>

dl(定义列表,definition list), dt(定义项目,definition title), dd(定义描述,definition describe)

bubuko.com,布布扣
<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

or

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>
bubuko.com,布布扣

 

15 表格,为任意的表格追加.table样式即可获得bootstrap的支持。

利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式。(IE8,USELESS)

 

.table-striped > tbody > tr:nth-child(odd) > td { background-color: #f9f9f9; }

利用.table-bordered为表格和其中的每个单元格增加边框。

利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。

利用.table-condensed可以让表格更加紧凑,单元格中的内部(padding)均会减半。

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

 

16 <span class="badge">可以简单方便的标记一个东西。

    <a href="#">
      <span class="badge pull-right">42</span>
      Home
    </a>

 

17 如果想要大屏幕显示一个内容的话,需要用到如下的样式,挺好看的说。。。。

bubuko.com,布布扣
<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
  <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
bubuko.com,布布扣

 

18 警告框

bubuko.com,布布扣
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>
bubuko.com,布布扣

可关闭的警告框,为了保证在所有的设备上都能关闭,需要我们制定这个data-dismiss

bubuko.com,布布扣
<div class="alert alert-warning alert-dismissable">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
  <strong>Warning!</strong> Best check yo self, you‘re not looking too good.
</div>
bubuko.com,布布扣

我们可以在一个警告框中追加一个连接,这个连接的样式如下:

<div class="alert alert-success">
  <a href="#" class="alert-link">...</a>
</div>

 

19 模态对话框,看上去相对简单。。。

不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的页面元素(例如,按钮)上设置data-toggle="modal",并使用data-target="#foo"href="#foo"指向特定的模态框即可。

bubuko.com,布布扣
    <button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal">
        Show Module!
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
bubuko.com,布布扣

以下的javascript也可以直接显示module

$(‘#myModal‘).modal(options)

 

Bootstrap学习 Base,布布扣,bubuko.com

Bootstrap学习 Base

标签:des   style   c   class   blog   code   

原文地址:http://www.cnblogs.com/voctrals/p/3754083.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!