twitter_bootstrap_第三章

在上个章节中，我们对知道了bootstrap 的几个常用排版布局方式。从固定布局到不固定布局、grid的使用。

1、bootstrap 格式

1.1文本格式

大家是不是都想想了<b> <h1>  等等用来控制文字有显示效果的标签 。我们先来看<h1> - <h6> 标签的效果吧 ！

1.2文本语气

常用有的是 <em> 和  <strong>  都表示强调气 。<strong> 显示比<em> 更强调。

还记的 <b> 也是表示强调的意思。但在 html5 中 <b> 只表示单词 或 短句了。

上面是使用  <addr> <address>组合显示的在 。 注意 <addr> 是xhtml4.0 才出现的。支持IE6 以上的IE浏览器 。

 

1.3文本引用

长引用<blockquote>，用点类型如在论坛中引用他人的评论。




Bootstrap 中引用的效果 。 请到大家看到最后一行的灰色的小字。那是用<small>的效果 。

当我看到左边的小条，在想有没有一个在右边的小条了。答案是有的。bootstrap 提供了class="pull-right" 添加完后效果如下

 

1.4列表

我们先来使用一下 无序排序的<ul>

好像与普通的<ul>没变化。 从图中可以看出，使用了两个<ul>相嵌。不由自主的看到了class="unstyled" 大家一看就是知道这是用来删掉<ul>前面小点的样式。

 

 

接下来，我们看看有序示效果吧!

下面我们来操作一下描述列表。

效果还不错。要是还有一个水平显示的描述列表显示那更方便了。在bootstrap 中也为你提供  class="dl-horizontal" 下面主是我们要的效果啦！

 

2、内联和块的代码显示

2.1内联显示

代码内联显示 <code> 下面我写了 public 用的 <code>标签。

2.2块显示代码<pre>

块代码中可以显示你 滚动条 。请加上.pre-scrollable




2.3 Google 代码美化包

在bootstrap中提到了Google 代码美化包

下载Google 代码美化包地址

http://code.google.com/p/google-code-prettify/

详细使用请点击进入下面地址阅读

http://google-code-prettify.googlecode.com/svn/trunk/README.html

3、table数据块

在bootstrap中的grid 是一种布局器 。 那我们的数据显示应该放到什么标签里？是不是在 table 里面了，没错就是在 table 里面。下面我们来看看，bootstrap中的效果。

 

看上去很不错吧！ 我们下面来看看bootstrap中的 table 结构吧！

大家都明白是 html 元素 。这里只讲讲bootstrap、css样式 。

有5种table 样式 。

3.1 table 基本样式

我们先做用一个.table样式看看<table>会有什么变化。下面是效果

 

 

从图片中我们看到<table>标签中的<td>多了top 边框。图片上是我选中了第二行，td 出现上background-color 样式 。

 

3.2 table 边框样式

按照上面的table option，我添加了.table-bordered 样式 。

 

 

边框有了，为什么 top 边框怎么不显示啦 ！要不我再添加一下table的基本样式看能显示出来吗？ class="table table-bordered"

 

 

还真可以。没错，bootstrap中就是这样把几个样式叠加起来显示不同的效果的 。

3.3 table斑马条显示

平常我们看到一条灰一条白，看起来想斑马路似的。只需要添加 table-striped 样式

 

 

 

3.4 table缩小行高

都用bootstrap做完了一个项目啦！ 还不知道调整 行高 。 在写文档时才看到这个样式 。 温故可以新，这话真有道理。

 

 

 

4、bootstrap 表单

Bootstrap表单，是不是在很多地方都看到过样在表单的样式了。

 

 

蓝色小边框的 text 输入框。下面bootstrap的四种 from样式

 

 

4.1 from默认样式

下面的为了强显示有效果添加了 class=”well”

 

 

4.2 from 查询样式

平常我们看到的都一个text输入框一个lable 和一个按钮。

 

 

4.3 from 内联样式

内联样式，我不怎么明白为什么这样叫。为什么不叫行内样式的。

 

4.4 from 组合显示

我们一般使用的，一个lable和一个<input>的怎么实现了。 我在有bootstrap发现了组合显示

 

 

看效果图片。上面是的代码用了分组的方法 。 .control-group 分成组 。 然后用
control-label显示文字。 最后用 controls 填写表单。

1. <formclass="form-horizontal">

2.   <fieldset>

3.     <legend>Legend text</legend>

4.     <div class="control-group">

5.       <label class="control-label"for="input01">Text input</label>

6.       <div class="controls">

7.         <input type="text"class="input-xlarge" id="input01">

8.         <pclass="help-block">Supporting help text</p>

9.       </div>

10.    </div>

11.  </fieldset>

12.</form>

4.5 from 状态控制

控制单个控件，选中，只读和不可用 。

 

控制一组控件，分别在class="control-groupwarning" 组上添加  warning。Error和 success

 

 

4.6 from 伸长操作

Text,select 怎么都是一样宽 ？ 我们可以拉伸他吗？我们可不可以使用之前的grid的span* ,来控制了 。 这里是可以的 。

 

 

除了使用 span* 外还可以用input-mini ，input-small和input-medium

 

 

如果在前面想添加小图标可以使用 from 的form-horizontal 然后就可以出显示下面的效果了

 

 

<div class=" input-prepend ">

                                               <spanclass="add-on">@</span><input type="text"size="16" id="prependedInput" class="span2">

                                       </div>

 

添加 add-on 样式  。 我们也可以前后都添加在一起。效果

 

 

input-prepend 样式也可以和基他标签组合在一起的 。 下面是和 button 组显示的

 

 

5、bootstrap 按钮

按钮这个控件应该使用的比较多的。按钮的种类也比较多的。

 

 

这些按钮大家一看就能明白的。 我们主要是用什么标签来做了 。

 

<a> 标签 <input>和<button>

 

5.1按钮的大小

按钮的大小是不是也可以使用 grid 中的 span* 了。 当然是可以的。不过用的多是

Btn-large , btn-small ,btn-mini  。

 

 

6、bootstrap 小图标

小图标我比较看好的小控件 。在bootstrap中还挺多的 。 分别有 黑 和 白 。 两种显示 。 默认为黑 。 使用白色的添加 “icon-white”

 

 

这里用　＜ｉ＞　添加class 添 .icon-  前缀加上后的作用 。

 

6. icon 组合使用。

使用icon组合使用可以更精准的描述作用 。

 

 

代码地址

 

http://pan.baidu.com/share/link?shareid=142078&uk=1862801370

评论

1 楼 kimmking 2012-12-17  

图都破了啊