bootstrap基础详解一

发表于   |     |   阅读次数

一、全局样式 style.css

  1. 移除body的margin声明
  2. 设置body的背景色为白色
  3. 为排版设置了基本的字体、字号和行高
  4. 设置全局链接颜色，且当链接处于悬浮“.hover”状态时菜会显示下划线样式

二、标题h1-h6

1.重置默认样式

  • 重新设置了margin-top和margin-bottom的值，h1-h3的值为20px；h4-h6为10px
  • 所有标题的行高都是1.1（font-size的1.1倍），文本颜色和字体继承于父元素
  • 固定不同级别标题字体大小：h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px

2.标题类名.h1-h6 如div.h1可实现标题的效果
3.副标题 small 

<h1>bootstrap标题一<small>我是副标题</small><h1>

三、强调内容

1.相关标签:

<!-- 加粗 -->
<p class="lead"><strong> 我是P标签我是P标签我是P标签</strong></p>
<p><b>我是P标签我是P标签我是P标签</b></p>
<p>我是P标签我是P标签我是P标签</p>
<!-- 斜体 -->
<em>我是斜体</em>
<i>我是斜体</i>
<var>我是斜体</var>
<!-- 字体大小   -->
<small>我是small</small>
<!-- 引用 -->
<cite>我是cite</cite> 
<blockquote>我是blockquote</blockquote>

2.强调相关的类

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

三、文本对齐风格

  1. text-left：左对齐
  2. text-center：居中对齐
  3. text-right：右对齐
  4. text-justify 两端对齐

四、列表

  1. ul ol，去序列 list-unstyled
  2. ul ol 水平显示并去掉编号 list-inline

  3. dl 水平列表（屏幕大于768px时）dl-horizontal

    <ul class="list-unstyled list-inline">
  <li>我是无序列表</li>
  <li>我是无序列表</li>
  <li>我是无序列表</li>
  <li>我是无序列表</li>
</ul>
    <ol class="list-unstyled">
  <li>我是有序列表</li>
</ol>
<dl class="dl-horizontal">
  <dt>我是自定义题目</dt>
  <dd>我是自定义列表</dd>
</dl>

    效果展示：

五、图片

  1. img-responsive：响应式图片，主要针对于响应式设计
  2. mg-rounded：圆角图片
  3. img-circle：圆形图片
  4. img-thumbnail：缩略图片

六、图标

  1. 查看所有图标名称 http://getbootstrap.com/components/#glyphicons

  2. 任何行级元素都可以，通常使用span标签坐图标容器

    <span class=“glyphic glyphicon-search”></span>

七、表格

  1. 基础表格 .table
    给表格设置了margin-bottom:20px以及设置单元内距
    在thead底部设置了一个2px的浅灰实线
    每个单元格顶部设置了一个1px的浅灰实线

  2. 附加样式
    .table-striped：斑马线表格
    .table-bordered：带边框的表格
    .table-hover：鼠标悬停高亮的表格
    .table-condensed：紧凑型表格

    <table class=“table table-condensed”>

  3. 响应式表格 .table-responsive
    Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将<table class=“table”>置于这个容器当中，这样表格也就具有响应式效果
    当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。 

    <div class="table-responsive">


    <thead>
  <tr>
    <th>我是头标题1我是头标题1我是头标题1</th>
    <th>我是头标题2我是头标题1我是头标题1</th>
    <th>我是头标题3我是头标题1我是头标题1</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th>我是身体1我是身体1我是身体1我是身体1</th>
    <th>我是身体2我是身体1我是身体1</th>
    <th>我是身体3我是身体1我是身体1</th>
  </tr>    
</tbody>
<tbody>
  <tr>
    <th>我是身体1我是身体1我是身体1</th>
    <th>我是身体2我是身体1我是身体1</th>
    <th>我是身体3我是身体1我是身体1</th>
  </tr>    
</tbody>



    效果如下：