BootStrap--CSS组件

1.全局CSS样式——栅格布局系统

 列的偏移问题(offset)

.col-xs-offset-1~.col-xs-offset-12         在lg/md/sm/xs屏幕下偏移

.col-sm-offset-1~.col-sm-offset-12       在lg/md/sm屏幕下偏移

.col-md-offset-1~.col-md-offset-12     在lg/md屏幕下偏移

.col-lg-offset-1~.col-lg-offset-12         在lg屏幕下偏移

2.全局CSS样式——表单——次重点&难点

  Bootstrap中的表单分为三种：

  (1)默认表单

<form>

<div class="form-group">

<label class="control-label"></label>

<input class="form-control">

<span class="help-block"></span>

</div>

</form>

 (2)行内表单

<form class="form-inline">

</form> 

(3)水平表单

<form class="form-horizontal">  

使用栅格系统来控制label/input/help-block的宽度

</form>

3.组件——图标字体——愉快&简单

  Glyphicons是一套收费的图标字体，提供了Web/移动开发中常用的小图标

  Bootstrap中可以免费使用这套字体中的250+个；以服务器端字体形式出现的，即客户端若访问了使用Glyphicons字体的网站，会自动从服务器端下载对应的字体文件。

@font-face {

  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');

}

.glyphicon {

  position: relative;

  top: 1px;

  display: inline-block;

  font-family: 'Glyphicons Halflings';

  font-style: normal;

  font-weight: normal;

  line-height: 1;

}

提示：(1)图标字体的本质不是图片，而是字体；故凡是可以使用文字的地方都可以使用不同字体

(2)glyphicon图标字体只能用于“空元素”——不包含任何内容或子元素！如：<span class="glyphicon glyphicon-***"></span> 

4.组件——按钮组——简单

  .btn-group                      水平按钮组

  .btn-group-vertical            竖直按钮组

  .btn-group.btn-group-justified         水平且两端对齐的按钮组

  .btn-group-lg

  .btn-group-sm

  .btn-group-xs

5.组件——下拉菜单——小重点&简单

  下拉菜单必须HTML结构：

  <div class="dropdown">                                   相对定位的父元素

<a data-toggle="dropdown">触发元素</a>

<ul/div class="dropdown-menu">                 绝对定位

隐藏元素

</ul/div>   

  </div>

6.组件——导航——小重点&简单

 提示：此处的导航不是指导航条！

 Bootstrap提供了两种形式的导航：

  (1)标签页式导航

<ul class="nav  nav-tabs">

</ul>

  (2)胶囊式导航

<ul class="nav  nav-pills">

</ul>

   此外，还有两种导航变种：

   (1)两端对齐的导航    .nav.nav-tabs/pills.nav-justified

   (2)竖直放置的胶囊导航   .nav.nav-pills.nav-stacked

 

  

7.组件——路径导航(面包屑)/分页/标签/徽章/巨幕/水井/页头

  面包屑：  .breadcrumb

  分页：    .pagination        .pager

  标签：    .label

  徽章：         .badge

  巨幕：   .jumbotron

  水井：   .well

  页头：  .page-header

8.组件——响应式导航条——重点&难点

响应式导航条：在PC和平板中默认要显示所有的内容；但在手机中导航条中默认只显示“LOGO/Brand”，以及一个“菜单折叠展开按钮”，只有单击折叠按钮后才显示所有的菜单项。

  基础class： .navbar   

  Bootstrap中导航条的按位置：

1)顶部导航条

2)底部导航条

  Bootstrap中导航条的按颜色：

1)浅色底深色的字           .navbar-default

2)深色底浅色的字           .navbar-inverse

  Bootstrap中导航条的按定位：

1)相对定位position: relative          默认值

2)固定定位position: fixed      .navbar-fixed-top/bottom

  导航条的结构：

  <div class="navbar 颜色 定位"> 

<div class="container">

<!--导航条的头部：商标+按钮-->

<div class="navbar-header">

<a class="navbar-brand">

<button class="navbar-toggle">

</div>

<!--导航条折叠菜单：菜单、按钮、搜索框、链接、文本...-->

<div class="navbar-collapse">

<ul class="nav navbar-nav">

<form class="navbar-form">

<button class="navbar-btn">

<span class="navbar-text">

<a class="navbar-link  navbar-text">

</div>

</div>

  </div>