20151212Bootstrap学习笔记------标题 段落 列表

Bootstrap学习笔记

---

标题

• 大标题和副标题效果

<h1>我是大标题<small>我是小标题small>h1>
<h2>我是大标题<small>我是小标题small>h2>
<h3>我是大标题<small>我是小标题small>h3>
<h4>我是大标题<small>我是小标题small>h4>
<h5>我是大标题<small>我是小标题small>h5>
<h6>我是大标题<small>我是小标题small>h6>

排版

• 段落和强调

<p>我是一个普通的段落，我不需要强调显示p>
<p class="lead">这部分内容需要特别的强调，我和别人长得不一样p>

粗体

<p>我是一个段落，这个段落中“<b>强调b>”一词将会<strong>加粗strong>显示。p>

斜体

<p>我正在学习<em>Bootstrapem>。我发现<i>Bootstrapi>真的好强大。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">我两端对齐-----目前两端对齐在各浏览器下解析各有不同，特别是应用于中文文本的时候。所以项目中慎用。p>

列表

Bootstrap根据平时的使用情形提供了六种形式的列表：

无序列表

标签,与平时用的一样

有序列表

标签,与平时用的一样

去点列表

这样就能去掉 点或者编号

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

<ol>
<li>有序项目列表一li>
<li>有序项目列表二
    <ol class="list-unstyled">
        <li>有序二级项目列表一li>
        <li>有序二级项目列表二
            <ul>
                <li>无序三级项目列表一li>
                <li>无序三级项目列表二
                    <ul class="list-unstyled">
                        <li>无序四级项目列表一li>
                        <li>无序四级项目列表二li>
                    ul>
                li>
                <li>无序三级项目列表三li>
            ul>
        li>
        <li>有序二级项目列表三li>
    ol>
li>
<li>有序项目列表三li>
<ol>

内联列表

用类名”.list-inline”表示,会在同一行显示并且去掉标号.

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

定义列表

标签用于定义定义列表,其中可以包含子标签
表示关键词(题目),
标签表示对其的定义(解释).  

<dl>
    <dt>北京dt>
    <dd>北京是中国的首都,是政治文化集中地dd>

    <dt>上海dt>
    <dd>上海号称东方的巴黎dd>
dl>

水平定义列表

和内联列表相似,会把同一组的
和
标签的内容放在同一行上(前提是屏幕宽度大于768px,否则还是会在两行上显示).  

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

    <dt>标题二:dt>
    <dd>描述内容dd>
dl>