Bootstrap基础

在百度上面搜索Bootstrap,有一个中文的网站,点击下载,有两个选择,下载Bootstrap源代码或者使用 Bootstrap 中文网提供的免费 CDN 加速服务.
我的选择是第二中:

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"><!-- jQuery文件。务必在bootstrap.min.js 之前引入--><script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件--><script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 

这一章是说Bootstrap的class,直接引用

• 标题一

<!--Bootstrap中让非标题元素和标题使用相同的样式--><div class="h1">Bootstrap标题一</div><div class="h2">Bootstrap标题二</div><div class="h3">Bootstrap标题三</div><div class="h4">Bootstrap标题四</div><div class="h5">Bootstrap标题五</div><div class="h6">Bootstrap标题六</div>

效果图:

• 标题二:含有副标题

<!--Bootstrap中使用了<small>标签来制作副标题--><h1>Bootstrap标题一<small>我是副标题</small></h1><h2>Bootstrap标题二<small>我是副标题</small></h2><h3>Bootstrap标题三<small>我是副标题</small></h3><h4>Bootstrap标题四<small>我是副标题</small></h4><h5>Bootstrap标题五<small>我是副标题</small></h5><h6>Bootstrap标题六<small>我是副标题</small></h6>

效果图:

• 段落正文

<p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p><p>超酷的互联网、IT技术免费学习平台，创新的网络一站式学习、实践体验；服务及时贴心，内容专业、有趣易学。专注服务互联网工程师快速成为技术高手！</p>

效果图:

• 强调内容

<p>这是段落</p><p class="lead">这部分内容需要特别的强调，我和<strong>别人</strong>长得不一样</p><p class="lead">这部分内容需要特别的强调，我和<em>别人</em>长得不一样</p><p class="lead">这部分内容需<cite>特别的强调</cite>，我和别人长得不一样</p><p class="lead">这部分内容需<small>特别的强调</small>，我和别人长得不一样</p>

效果图:

• 强调相关的类
  .text-muted：提示，使用浅灰色（#999）
  .text-primary：主要，使用蓝色（#428bca）
  .text-success：成功，使用浅绿色(#3c763d)
  .text-info：通知信息，使用浅蓝色（#31708f）
  .text-warning：警告，使用黄色（#8a6d3b）
  .text-danger：危险，使用褐色（#a94442）

<div class="text-muted">.text-muted 效果</div><div class="text-primary">.text-primary效果</div><div class="text-success">.text-success效果</div><div class="text-info">.text-info效果</div><div class="text-warning">.text-warning效果</div><div class="text-danger">.text-danger效果</div>

效果图:

• 文本对齐风格

<p class="text-left">我居左</p><p class="text-center">我居中</p><p class="text-right">我居右</p><p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file.两端对齐 </p>

效果图:

• 列表

<ul>    <li>无序列表信息1</li>    <li>无序列表信息2</li>    <li>无序列表信息3</li></ul><ol>    <li>有序列表信息1</li>    <li>有序列表信息2</li>    <li>有序列表信息3</li></ol><dl>    <dt>定义列表标题</dt>    <dd>定义列表信息1</dd>    <dd>定义列表信息2</dd></dl>

效果图:

• 列表之去点列表
  在其加上一个class:list-unstyled

<ul class="list-unstyled"><li>不带项目符号</li><li>不带项目符号</li>

• 列表–内联列表
  把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示,也可以说内联列表就是为制作水平导航而生。

<h1>城市:</h1><ul class="list-inline">    <li>北京</li>    <li>上海</li>    <li>南京</li>    <li>厦门</li></ul>

效果图:

• 列表–定义列表
  对于定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。

<dl>    <dt>北京</dt>    <dd>北京是中国的首都,是政治文化集中地</dd>    <dt>上海</dt>    <dd>上海号称东方的巴黎</dd></dl>

效果图:

• 列表–水平定义列表
  水平定义列表就像内联列表一样，Bootstrap可以给

  添加类名“.dl-horizontal”给定义列表实现水平显示效果。

<dl class="dl-horizontal">    <dt>标题一:</dt>    <dd>描述内容</dd>    <dt>标题二:</dt>    <dd>描述内容</dd>></dl>

效果图:

- 代码风格
一般在个人博客上使用的较为频繁，用于显示代码的风格。在Bootstrap主要提供了三种代码风格：
1、使用<code></code>来显示单行内联代码
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

<div>Bootstrap的代码风格有三种：<code>&lt;code&gt;</code>、<code>&lt;pre&gt;</code>和<code>&lt;kbd&gt;</code></div>pre风格：<div><pre>&lt;ul&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;li&gt;...&lt;/li&gt;&lt;/ul&gt;</pre></div>kbd风格：<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div>

效果图:

• 代码风格二(pre)–高度超出340px，就会在Y轴出现滚动条

<!--<pre>元素一般用于显示大块的代码，并保证原有格式不变。但有时候代码太多，而且不想让其占有太大的页面篇幅，就想控制代码块的大小。Bootstrap也考虑到这一点，你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。--><pre class="pre-scrollable"><ol>    <li>....</li>    <li>....</li>    <li>....</li>    <li>....</li>    <li>....</li>    <li>....</li>    <li>....</li>    <li>....</li>    <li>....</li>    <li>....</li>    <li>....</li>    <li>....</li>    <li>....</li>    <li>....</li></ol></pre>

效果图:

• 表格

<h1>基础表格</h1><table class="table">   <thead>     <tr>       <th>表格标题</th>       <th>表格标题</th>       <th>表格标题</th>     </tr>   </thead>   <tbody>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>   </tbody> </table>

效果图:

<h1>斑马线表格</h1><table class="table table-striped">   <thead>     <tr>       <th>表格标题</th>       <th>表格标题</th>       <th>表格标题</th>     </tr>   </thead>   <tbody>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>   </tbody> </table>

效果图:

<h1>带边框的表格</h1>        <table class="table table-bordered">            <thead>                <tr>                    <th>表格标题</th>                    <th>表格标题</th>                    <th>表格标题</th>                </tr>            </thead>            <tbody>                <tr>                    <td>表格单元格</td>                    <td>表格单元格</td>                    <td>表格单元格</td>                </tr>                <tr>                    <td>表格单元格</td>                    <td>表格单元格</td>                    <td>表格单元格</td>                </tr>                <tr>                    <td>表格单元格</td>                    <td>表格单元格</td>                    <td>表格单元格</td>                </tr>                <tr>                    <td>表格单元格</td>                    <td>表格单元格</td>                    <td>表格单元格</td>                </tr>            </tbody>        </table>

效果图:

<h1>鼠标悬浮高亮的表格</h1><!--鼠标移上去的时候,那一行就会变亮--><table class="table table-striped table-bordered table-hover">   <thead>     <tr>       <th>表格标题</th>       <th>表格标题</th>       <th>表格标题</th>     </tr>   </thead>   <tbody>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>   </tbody> </table>

效果图:

 <h1>紧凑型表格</h1>  <table class="table table-condensed">   <thead>     <tr>       <th>表格标题</th>       <th>表格标题</th>       <th>表格标题</th>     </tr>   </thead>   <tbody>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>   </tbody> </table>

效果图:

<h1>响应式表格</h1> <div class="table-responsive">   <table class="table table-bordered">   <thead>     <tr>       <th>表格标题</th>       <th>表格标题</th>       <th>表格标题</th>     </tr>   </thead>   <tbody>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>     <tr>       <td>表格单元格</td>       <td>表格单元格</td>       <td>表格单元格</td>     </tr>   </tbody> </table></div>

效果图:

• 表格–表格行的类
  bootstrap还为表格的行元素提供了五种不同的类名，每种类名控制了行的不同背景颜色

<table class="table table-bordered">  <thead>    <tr>      <th>类名</th>      <th>描述</th>    </tr>  </thead>  <tbody>    <tr class="active">      <td>.active</td>      <td>表示当前活动的信息</td>    </tr>    <tr class="success">      <td>.success</td>      <td>表示成功或者正确的行为</td>    </tr>    <tr class="info">      <td>.info</td>      <td>表示中立的信息或行为</td>    </tr>    <tr class="warning">      <td>.warning</td>      <td>表示警告，需要特别注意</td>    </tr>    <tr class="danger">      <td>.danger</td>      <td>表示危险或者可能是错误的行为</td>    </tr>  </tbody></table> 

效果图:

后面继续bootstrap表单,先到这里!!!