zoukankan      html  css  js  c++  java
  • bootstrap基础排版优化

    1.标题

    h1到h6元素重新定义了标准,并设置了上下外边距

    h1到h6等6个class样式和以上元素样式一样,但没有上下外边距

    在标题内使用small元素,显示小一点的字体,颜色为灰色,行间距为1,h1h2h3内字体为正常字体65%,h4h5h6则是75%。

    2.页面主题

    全局字体设置为14px,inline-height为20px,p元素中会有一个额外的10px的margin-bottom。

    如果让一个段落突出,使用.lead样式,作用是增大字体大小、粗细、行间距、下边距。

    3.强调文本

    b,strong元素 样式为粗体

    small,.small样式为标准字体85%

    cite样式为标准字体

    对齐方式

    text-left 左对齐

    text-right 右对齐

    text-center 居中

    text-justify 两端对齐

    4.缩略语

    abbr 元素实现了缩略语的功能,缩略词下面有虚横线,鼠标移动到缩略词上有手型图标,显示title属性。

    5.地址元素

    address 元素设置了20px下外边距,20px行间距

    6.引用

    blockquote元素里可以引用任意html内容,一般推荐p

    样式为上下内边距10px,左右内边距20px,下外边距20px,字号17.5px,左边一个5px的竖线

    引用样式加pull-right结果为 右内边距15px,左内边距0,向右对其,右边有5px竖线,左边无竖线

    7.列表

    ul li无序列表

    ol li 有序列表

    ul class='list-unstyled'去点列表

    ul class='list-inline' 内联列表

    dl列表 dl dt dd 此列表有缩进,有层次感

    dl class='dl-horizontal' 水平定义列表

    8.代码

    code元素显示内联代码,文字颜色为深红,背景颜色为浅红,设置圆角

    kbd元素包含的内容是表示改该内容需要用户键盘输入,文字颜色为白色,背景颜色为深黑色,圆角,阴影

    pre 用于显示大块代码段,并保证原有格式不变,在pre元素上应用pre-scrollable样式,控制最大高度为340px,并可以在y轴滚动

    9.表格

    一般格式

    <table border="1">
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
      <tr>
        <td>February</td>
        <td>$80</td>
      </tr>

    table上加样式table,增加单元格的内边距,在thead底部设置一条2px的粗线,以及在每行记录的顶部有一个1px的细线

    table上在现有table样式基础上,

    应用一个.table-striped,添加了隔行加背景色的设置;

    应用一个.table-bordered,为所有单元格提供了一条一像素的边框

    应用一个.table-hover,添加一个鼠标悬停高亮的效果

    应用一个.table-condensed,表格比普通表格紧凑一些

    ------------------------------------------------------------------------------------------------------------------------------

    为表格的tr元素,添加5种样式,控制tr颜色

    tr.active 表示当前活动的信息  灰色

    tr.success 表示成功或正确的信息 绿色

    tr.info 表示中立的信息或行为 蓝色

    tr.warning 表示警告,特别注意 黄色

    tr.danger  表示危险或错误的行为 红色

    --------------------------------------------------------------------------------------------------------------------------------

    响应式表格  在table元素外部加一个div .table-responsive,当小于768像素时出现水平滚动条

    10.表单

    10-1,一般格式

    <form action="action_page.php">
    <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit"></fieldset>
    </form> 

    在select、input、textarea上默认应用.form-control样式,宽度会变为100%.

    lable和input放在一个样式为.form-group的div里,提供一个下外边距为15px的样式

    checkbox类型input放在一个样式为.checkbox的div里,提供上下10px外边距,块,10px的左内边距,、

    10-2,内联表单

    form元素应用一个.form-inline,将所有控件放在一行表单上

    对于select、input、textarea等因为其默认100%,在内联表单中无效,要在外面加一层带有.form-group或.checkbox的div

    如果要加label,input等又要换行,因此要加一个div包裹label。

    10-3,横向表单

    横向表单样式为label何控件水平并排布局

    使用方法,在form上应用.form-horizontal样式,而此样式只设置了内外边距,还要应用栅格类,才能将label和控件并排,form-group类似于row,因此无需加row

    此中的.radio .checkbox .control-label样式皆为7px上内边距。

    10-4,表单控件

    input必须设置type

    textarea元素rows定义高度,cols定义宽度,但如果应用.form-control,则变为100%,cols不起作用。

    checkbox和radio用div包住,并加.radio或.checkbox,div内包含label,添加checkbox-inline或radio-inline,再包住input实现内联样式

    10-5,控件大小,在input上使用.input-lg .input-sm样式

    11.按钮

    11-1,按钮样式

     按钮首先定义基础的.btn样式,以及相关的hover,focus,active等行为特效,然后再为各种情况定义不同颜色

    .btn-default 默认样式     

    .btn-primary 原始按钮

    .btn-success 成功按钮

    .btn-info 信息按钮

    .btn-warning 警告按钮

    .btn-danger 危险按钮

    .btn-link 链接按钮

     11-2,按钮大小

    .btn-lg 大 .btn-sm 小  .btn-xs 超小

    另外 也可以在a ,input等标签上添加.btn样式,但慎用

    添加.active表示被按了一样的样式  添加.disabled表示禁用

    12.辅助样式

    12-1,文本样式

    例<p class="text-muted">该段落使用了样式 "text-muted"。</p>     

    .text-muted 柔和灰

    .text-primary 主要蓝

    .text-success 成功绿

    .text-info 信息蓝

    .text-warning 警告黄

    .text-danger 危险红

    12-2,背景样式

    .bg-primary 主要蓝

    .bg-success 成功绿

    .bg-info信息蓝

    .bg-warning 警告黄

    .bg-danger 警告红

     12-3,辅助图标

    1.关闭图标

    方法1,<button type="button" class='close'>&times</button>

    方法2,<a type="button" class='close'>&times</a>

    2.向下箭头

    在span上运用.caret样式

    <span class="caret"></span>

    .caret{

    display:inline-block;

    0;height:0;

    margin-left:2px;

    vertical-align:middle;

    border-top:4px solid;

    border-right:4px solid transparent;

    border-left:4px solid transparent;

    }

    3.内容浮动

    .pull-left左浮动

    .pull-right 右浮动

    .center-block 居中

    4.隐藏与显示

    .show 显示

    .hidden隐藏且不占用文档流

    .invisible 隐藏占用文档流

  • 相关阅读:
    期末实训学习认识SSH
    Hibernate 的认识
    action和domain的不同总结
    学习使用action属性来接受参数
    实现action的统配
    struts2学习
    路径问题--笔记
    学习C层
    innovus add_ndr rule
    innovus clock tree instance ccl cdb cwb等 名字命名含义
  • 原文地址:https://www.cnblogs.com/cumting/p/6790948.html
Copyright © 2011-2022 走看看