bootstrap新手入门（二）css 全局css样式及组件

时间 2019-11-09

标签 bootstrap 新手入门 css 全局样式组件栏目 Bootstarp 繁體版

原文原文链接

http://v3.bootcss.com/css/css

1：html5的文档类型；格式设置以下：html

<!DOCTYPE html> <html lang="zh-CN"> ... </html>

2：移动设备优先：html5

为了确保适当的绘制和触屏缩放，须要在 <head> 之中添加 viewport 元数据标签。jquery

在移动设备浏览器上，经过为视口（viewport）设置 meta 属性为 user-scalable=no 能够禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感受。浏览器

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

3:排版于连接app

Bootstrap 排版、连接样式设置了基本的全局样式。分别是：less

为 body 元素设置 background-color: #fff;
使用 @font-family-base、@font-size-base 和 @line-height-base a变量做为排版的基本参数
为全部连接设置了基本颜色 @link-color ，而且当连接处于 :hover 状态时才添加下划线

这些样式都能在 scaffolding.less 文件中找到对应的源码。ide

4：布局容器工具

Bootstrap 须要为页面内容和栅格系统包裹一个 .container 容器，因为 padding 等属性的缘由，这两种容器类不能互相嵌套。

　　1）.container 类用于固定宽度并支持响应式布局的容器。

<div class="container"> ... </div>

　　2).container-fluid 类用于 100% 宽度，占据所有视口（viewport）的容器。

<div class="container-fluid"> ... </div>

5.栅格系统

　　Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增长，系统会自动分为最多12列。

　　栅格系统用于经过一系列的行（row）与列（column）的组合来建立页面布局

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
经过“行（row）”在水平方向建立一组“列（column）”。
你的内容应当放置于“列（column）”内，而且，只有“列（column）”能够做为行（row）”的直接子元素。
相似 .row 和 .col-xs-4 这种预约义的类，能够用来快速建立栅格布局。Bootstrap 源码中定义的 mixin 也能够用来建立语义化的布局。
经过为“列（column）”设置 padding 属性，从而建立列与列之间的间隔（gutter）。经过为.row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
负值的 margin就是下面的示例为何是向外突出的缘由。在栅格列中的内容排成一行。
栅格系统中的列是经过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可使用三个 .col-xs-4 来建立。
若是一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被做为一个总体另起一行排列。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，而且针对小屏幕设备覆盖栅格类。所以，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，而且针对小屏幕设备覆盖栅格类。所以，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。

6.媒体查询

在栅格系统中，咱们在 Less 文件中使用如下媒体查询（media query）来建立关键的分界点阈值。

@media (min-width: @screen-sm-min) { ... } /* 中等屏幕（桌面显示器，大于等于 992px） */ @media (min-width: @screen-md-min) { ... } /* 大屏幕（大桌面显示器，大于等于 1200px） */ @media (min-width: @screen-lg-min) { ... }

实例：从堆叠到水平排列

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Bootstrap 101 Template</title>

    
    <link href="bootstrap-3.3.4/css/bootstrap.min.css" rel="stylesheet">

    
    
    
    <style>
       .col-md-1{border:solid 1px blue; }
       .col-md-8{border:solid 1px pink;}
       .col-md-4{border:solid 1px green;}
       .row{margin:10px auto;}
    </style>
</head>
<body>
    <div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
    
    <script src="jquery.js"></script>
    
    <script src="bootstrap-3.3.4/js/bootstrap.min.js"></script>
</body>
</html>

实例：流式布局容器

<div class="container-fluid"> <div class="row"> ... </div> </div>

实例：移动设备和桌面屏幕

<!-- Stack the columns on mobile by making one full-width and the other half-width --> <div class="row"> <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> <div class="row"> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <!-- Columns are always 50% wide, on mobile and desktop --> <div class="row"> <div class="col-xs-6">.col-xs-6</div> <div class="col-xs-6">.col-xs-6</div> </div>

实例：手机、平板、桌面

<div class="row"> <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> </div> <div class="row"> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> <!-- Optional: clear the XS cols if their content doesn't match in height --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> </div>

实例：多余的列将另起一行

<div class="row"> <div class="col-xs-9">.col-xs-9</div> <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div> <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div> </div>

7.响应式列重置

即使有上面给出的四组栅格class，你也难免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的状况。为了克服这一问题，建议联合使用 .clearfix 和响应式工具类。

<div class="row"> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <!-- Add the extra clearfix for only the required viewport --> <div class="clearfix visible-xs-block"></div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> </div>

除了列在分界点清除响应，您可能须要 重置偏移, 后推或前拉某个列。请看此栅格实例

偏移（Offsets）

<div class="row"> <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div> <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div> </div> <div class="row"> <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div> <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div> </div>

八、列偏移

使用 .col-md-offset-* 类能够将列向右侧偏移这些类实际是经过使用 * 选择器为当前元素增长了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div> </div> <div class="row"> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div> </div>

9.嵌套列

为了使用内置的栅格系统将内容再次嵌套，能够经过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6 </div> <div class="col-xs-4 col-sm-6"> Level 2: .col-xs-4 .col-sm-6 </div> </div> </div> </div>

十、列排序：

经过使用 .col-md-push-* 和 .col-md-pull-* 类就能够很容易的改变列（column）的顺序。

<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div>

组件：

Glyphicons 字体图标

网址：http://v3.bootcss.com/components/

出于性能的考虑，全部图标都须要一个基类和对应每一个图标的类。把下面的代码放在任何地方均可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。

不要和其余组件混合使用

图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其余类共同存在。应该建立一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。

只对内容为空的元素起做用

图标类只能应用在不包含任何文本内容或子元素的元素上。

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

图标的可访问性

现代的辅助技术可以识别并朗读由 CSS 生成的内容和特定的 Unicode 字符。为了不屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤为是当图标纯粹做为装饰用途时），咱们为这些图标设置了 aria-hidden="true" 属性。

若是你使用图标是为了表达某些含义（不只仅是为了装饰用），请确保你所要表达的意思可以经过被辅助设备识别，例如，包含额外的内容并经过 .sr-only 类让其在视觉上表现出隐藏的效果。

若是你所建立的组件不包含任何文本内容（例如， <button> 内只包含了一个图标），你应当提供其余的内容来表示这个控件的意图，这样就能让使用辅助设备的用户知道其做用了。这种状况下，你能够为控件添加 aria-label 属相。

alert 组件中所包含的图标是用来表示这是一条错误消息的，经过添加额外的 .sr-only 文本就可让辅助设备知道这条提示所要表达的意思了。

<div class="alert alert-danger" role="alert"> <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> <span class="sr-only">Error:</span> Enter a valid email address </div>