首页 > 代码库 > Bootstrap学习 Base

Bootstrap学习 Base

2024-07-06 04:35:17   228人阅读

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">

 

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

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

 

5 栅栏系统

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

row中只允许直接放置列（col-sm-6等）；

内容放到列中。

 

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

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

 

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

 

8 通过使用.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)

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

or

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

 

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 如果想要大屏幕显示一个内容的话，需要用到如下的样式，挺好看的说。。。。

<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>

 

18 警告框

<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

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

<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>

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

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

 

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

不需写JavaScript代码也可激活模态框。通过在一个起控制器作用的页面元素（例如，按钮）上设置data-toggle="modal"，并使用data-target="#foo"或href="http://www.mamicode.com/#foo"指向特定的模态框即可。

    <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 -->

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

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

 


联系
我们