首页 > web前端 > html教程 > [Bootstrap]7天深入Bootstrap(3)CSS布局_html/css_WEB-ITnose

[Bootstrap]7天深入Bootstrap(3)CSS布局_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:37:10
原创
980 人浏览过

Bootstrap三大核心内容的基础,即基础的CSS 布局语法。其包括基础排版(Typography)、代码(Code)、表 格(Tables)、表单(Forms)、按钮(Buttons)、图片 (Images)、辅助类(Helper Classes)和响应式设计 (Responsive utilities)。

 

本节目录:

  • 概述
  • 基础排版
  • 代码
  • 表格
  • 表单
  • 按钮
  • 图像
  • 辅助样式
  •  

    概述

    HTML5文档类型

    由于Bootstrap使用了HTML5特定的HTML元素和CSS属性,所 以使用Bootstrap的时候,所有的HTML文件都需要在其顶部引用 HTML5的DOCTYPE属性

    <!DOCTYPE html><html lang="en">    ...</html>
    登录后复制

    移动先行

    在移动设备浏览器上,通过为viewport meta标签添加的userscalable=no可以禁用其缩放(zooming)功能。

    响应式图片

    为了能对图片的大小进行自适应缩放,Bootstrap在3.x版里添 加了一个.img-responsive样式,本质是为图片设置了maxwidth: 100%;和height: auto;属性

    排版与链接

    Bootstrap为网页设置了一些基本的全局样式、排版和链接风格

    1. 在body元素上取消了margin设置,改为默认为0,margin:0。
    2. 在body元素上设置了背景色为白色,background-color: #ffffff。
    3. 在布局排版方面,字体、字体大小、行间距使用的标准值

    居中容器

    一个页面(或元素)要居中显示,可以在外部容器上简单应 用.container样式即可。由于栅格系统依赖于外部容器的大小设 置,所以默认情况下container样式有一个max-width属性用于限 制栅格系统的最大宽度

    基础排版

    标题

    bs为传统的标题元素h1~h6重新定义了标准的样式, 使得在所有浏览器下显示效果都一样。

    bs还提供了h类的样式, 如.h1的样式比h1标签的样式,不同的是没有定义 margin-top和margin-bottom。

    文本

    bs为全局设置的字体大小。

    small、strong、em、cite

    容器内的文本对齐方式:text-left、text-center、text-right、text-justify

    缩略语:abbr(鼠标hover显示title值)

    列表

    bs提供了6种形式的列表,分别是:普通列表、有序列表、去点列表、内联列表、描述列表和水平描述列表。

    普通列表(ul)、有序列表(ol)、去点列表(list-unstyled)、描述列表、水平描述列表,只是优化,效果不明显。

    内联列表(list-inline)将列表项水平显示。类似水平菜单效果

    代码

    代码样式通常在需要引用代码的地方出现

    单行的内联代码需要使用code元素包含

    元素包含的内容是表示该内容需要用户键盘输入,所 以一般是设置成input的效果,用法和code类似

    pre元素一般用于显示大块的代码段,并保证原有格式不变。 另外可以在pre元素上应用.pre-scrollable样式,则可以控制该区域 最大高度为340像素,并可以在y方向滚动

    表格

    bs提供了1种基础.table样式、4种附加样式(.table-striped、.table-bordered、.table-hover、.table-condensed)以及一个支持响应式布局的.table-responsive容器样式。

    .table-striped样式,其添加了隔行加背景色的设置。

    .table-bordered为表格所有的单元格提供了1条1像素宽的边框

    .table-hover当鼠标移动上去时对应的部分能够换个颜色的话,那就会显得很有动感,并且有高亮显示的功能

    .table-condensed紧凑型表格,即表格的显示比普通表格稍微紧凑一些, 实现原理是减少单元格的内边距

    .tableresponsive样式包装在.table样式外部即可创建响应式表格,其会 在小屏幕设备上(小于768像素)水平滚动

    bs为表格的tr元素提供了5种基本的颜色样式(active success info warning danger),用于控制tr的背景颜色。

    表单

    bs框架中的核心内容,表单提供了丰富的样式(基础、内联、横向)。

    先了解2个基本样式

    form-control:设置为100%

    form-group:设置下边距,保证每个控件显示。

    如果在select、input、textarea元素上应用了.form-control样式,显示的宽度会变成100%,并且placeholder的颜色都设置成了 #999999

    内联表单

    有的时候,我们可能需要一个所有控件都在一行中的表单,只需要在普通的form元素上应用一个.form-inline样式

    横向表单

    与内联表单的使用方式不太一样,其不能在form元素上简单应用一个.form-horizontal样式。

    由于.form-horizontal样式改变了.form-group的行为,将其表现得像栅格系统中的行(row)一样,因此就无需再使用.row样式了。

    表单控件

    对现有HTML5语法下的input都进行了支持(如 type为text、password、datetime、datetime-local、date、 month、time、week、number、email、url、search、tel和color 的元素)

    input元素,必须声明type类型,否则可能会引 起其他问题

    select元素,多行选择设置mulitiple属性为multiple

    textarea元素,定义了rows数字即可定义大文本框的高度,定义cols可以定义大文本框的宽度

    checkbox和radio元素,是input元素里两个非常特殊的type,由于经常搭配文字显示,bs做了标准显示

        <div class="radio">        <label><input name="opt" type="radio" />ON</label>    </div>    <div class="radio">        <label><input name="opt" type="radio" />OFF</label>    </div>    <div class="checkbox">        <label><input type="checkbox"/>Swing</label>    </div>    <div class="checkbox">        <label><input type="checkbox" />Runing</label>    </div>
    登录后复制

    当checkbox和radio内容很少时,需要横向显示的时候,可以用checkbox-inline和radio-inline

    控件状态

    bs提供了3种状态的样式可供使用,分别是:焦点状态(默认提供)、禁用状态、验证提示状态。

    使用方式和普通的disabled一样,只需要在禁用元素上使用 disabled属性即可。

    fieldset如果使用了disabled属性时,内部的控件也将会禁用。

    在填写表单的时候,经常要提示用户其输入内容是否合法,bs提供了.has-warning、.has-error、.has-success三种样式。

    (父容器上的has-feedback样式用于 设置定位方式;小图标元素上的form-control-feedback样式用于 设置图标的显示大小)

    <div class="form-group has-success has-feedback">                <label class="control-label" for="name">User Name:</label>                <input type="text" class="form-control" id="name" />                <span class="glyphicon glyphicon-ok form-control-feedback"></span></div>
    登录后复制

      

    控件大小

    bs提供了两个样式用于设置稍大或者稍小的input输入框,分别是:.input-lg和.input-sm

    按钮

    按钮样式,定义了标准5种颜色、1个默认和一个link按钮。

    按钮大小,定义3种.btn-lg、.btn-sm、.btnxs。.btn-block样式可以充满父元素,不随文字符宽度变化。

    多标签,支持button a input3个标签。为了兼容性,非常建议使用button。

    支持active和disabled状态。

    图像

    提供了3种风格效果,在img标签上应用.img-rounded、.img-circle、.img-thumbnail样式即可

    使用过程中需要注意,上述样式没有控制图片的显示大小,所以需要额外应用样式或者限制父元素大小来控制图片显示大小.

    IE8及以下版本不支持.img-rounded和.img-circle样式特效。

    辅助样式

    文本样式,bs提供了1个灰色,和5个基本标准样式的颜色,分别是:柔和灰(text-muted)、主要蓝(text-primary)、成功绿 (text-success)、信息蓝(text-info)、警告黄(textwarning)、危险红(text-danger)

    文本背景样式,bs还提供了上面的5种文本颜色样式对应(muted样式除外),分别是:主要蓝(bg-primary)、成功绿(bg-success)、信息蓝(bg-info)、警告黄 (bg-warning)、危险红(bg-danger)

    辅助图标

    关闭图标(右浮动)

            <button class="close">&times;</button>        <a class="close">&times;</a>
    登录后复制

    向下箭头

    <span class="caret"></span>
    登录后复制

     

    浮动

    对于内容浮动,一般会有3种需求 (左浮动、右浮动、居中对齐),分别对应了pull-left、pull-right和center-block样式

     

    响应式样式

    利用媒体查询的特性,对特定的情况进行隐藏或显示的设置。

    .visible-开头的样式表示仅 在某尺寸时显示,其他都隐藏;而.hidden样式则表示仅在某尺寸 时隐藏,其他都显示。

    如:

    提供了分别对浏览器和打印机进行隐藏和显示的设置  visible-print和hidden-print

    只在大屏幕下显示  visble-lg

    来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板