Bootstrap学习笔记（三）组件

矫情吗；* 2022-04-11 10:14 309阅读 0赞

1、复习总结：全局CSS样式：

按钮  .btn .btn-default

图片  .img-rounded  .img-circle  .img-thumbnail  .img-responsive

文本  .text-五种  .bg-五种  .text-left/right/center/justify

排版和代码   .list-unstyled   .list-inline

表格  .table  .table-bordered  .table-responsive  .table-striped  .table-hover

栅格布局系统

.container   .container-fluild

.row

.col-xs-\*  .col-sm-\*   .col-md-\*   .col-lg-\*

.hidden-xs  .hidden-sm   .hidden-md  .hidden-lg

2、列的偏移问题(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屏幕下偏移

3、全局CSS样式——表单——次重点&难点

Bootstrap中的表单分为三种：

(1)默认表单

![2018120516534317.png][]

<form>

<div class="form-group">                   表单组（增加组之间距离）

<label class="control-label"></label>   控件标签

<input class="form-control">           表单控件（渐变背景等等）

<span class="help-block"></span>     帮助块（字体颜色变淡字体变小）

</div>

</form>

例：<**h2**>1.默认表单</**h2**>  
<**form** **action=****""**>  
  <**div** **class=****"form-group"**>  
    <**label** **class=****"control-label"** **for=****"uname"**>用户名：</**label**>  
    <**input** **class=****"form-control"** **id=****"uname"** **type=****"text"**>  
    <**span** **class=****"help-block"**>用户名长度在6~12位之间</**span**>  
  </**div**>  
  
  <**div** **class=****"form-group"**>  
    <**label** **class=****"control-label"** **for=****"upwd"**>密码：</**label**>  
    <**input** **class=****"form-control"** **id=****"upwd"** **type=****"password"**>  
    <**span** **class=****"help-block"**>密码中必须包含数字、字母</**span**>  
  </**div**>  
  
  **  
*  *<**div** **class=****"checkbox"**>  
    <**label**>  
      <**input** **type=****"checkbox"**>我接受本站的使用条款  
    </**label**>  
  </**div**>  
  
  <**input** **class=****"btn btn-success"** **type=****"button"** **value=****"提交数据"**>  
  <**input** **class=****"btn btn-danger"** **type=****"button"** **value=****"清空重填"**>  
</**form**>

(2)行内表单

![2018120516550384.png][]

</form>

例：<**h2**>2.行内表单(inline)</**h2**>  
<**form** **class=****"form-inline"** **action=****""**>  
  <**div** **class=****"form-group"**>  
    <**label** **class=****"control-label"** **for=****"uname2"**>用户名：</**label**>  
    <**input** **class=****"form-control"** **id=****"uname2"** **type=****"text"**>  
  </**div**>  
  
  <**div** **class=****"form-group"**>  
    <**label** **class=****"control-label"** **for=****"upwd2"**>密码：</**label**>  
    <**input** **class=****"form-control"** **id=****"upwd2"** **type=****"password"**>  
  </**div**>

<**input** **class=****"btn btn-default"** **type=****"button"** **value=****"登录"**>  
</**form**>

(3)水平表单

![20181205165546683.png][]

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

</form>

例：<**h2**>3.水平表单(horizontal)</**h2**>  
    <**h4**>水平表单中栅格系统：.form-horizontal > .form-group > .col-\* </**h4**>  
   <**form** **class=****"form-horizontal"** **action=****""**>  
    <**div** **class=****"form-group"**>  
      <**div** **class=****"col-md-2"**>  
        <**label** **class=****"control-label"** **for=****"uname3"**>用户名：</**label**>  
      </**div**>  
      <**div** **class=****"col-md-6"**>  
        <**input** **class=****"form-control"** **id=****"uname3"** **type=****"text"**>  
      </**div**>  
      <**div** **class=****"col-md-4"**>  
        <**span** **class=****"help-block"**>用户名长度在6~12位之间</**span**>  
      </**div**>  
    </**div**>  
    <**div** **class=****"form-group"**>  
      <**div** **class=****"col-md-2"**>  
        <**label** **class=****"control-label"** **for=****"upwd3"**>密码：</**label**>  
      </**div**>  
      <**div** **class=****"col-md-6"**>  
        <**input** **class=****"form-control"** **id=****"upwd3"** **type=****"password"**>  
      </**div**>  
      <**div** **class=****"col-md-4"**>  
        <**span** **class=****"help-block"**>密码中必须包含数字、字母</**span**>  
      </**div**>  
    </**div**>  
*    *<**div** **class=****"row"**>  
      <**div** **class=****"col-md-10 col-md-offset-2"**>  
        <**div** **class=****"checkbox"**>  
          <**label**>  
            <**input** **type=****"checkbox"**>我接受本站的使用条款  
          </**label**>  
        </**div**>  
      </**div**>  
    </**div**>  
  
    <**div** **class=****"row"**>  
      <**div** **class=****"col-md-10 col-md-offset-2"**>  
        <**input** **class=****"btn btn-success"** **type=****"button"** **value=****"提交数据"**>  
        <**input** **class=****"btn btn-danger"** **type=****"button"** **value=****"清空重填"**>  
      </**div**>  
    </**div**>  
  </**form**>  
  
**第二种：用户名：与密码：直接放在****label标签中**  
  <**form** **class=****"form-horizontal"** **action=****""**>  
    <**div** **class=****"form-group"**>  
      <**label** **class=****"col-md-2 control-label"** **for=****"uname4"**>用户名：</**label**>  
      <**div** **class=****"col-md-6"**>  
        <**input** **class=****"form-control"** **id=****"uname4"** **type=****"text"**>  
      </**div**>  
      <**div** **class=****"col-md-4"**>  
        <**span** **class=****"help-block"**>用户名长度在6~12位之间</**span**>  
      </**div**>  
    </**div**>  
  
    <**div** **class=****"form-group"**>  
      <**label** **class=****"col-md-2 control-label"** **for=****"upwd4"**>密码：</**label**>  
      <**div** **class=****"col-md-6"**>  
        <**input** **class=****"form-control"** **id=****"upwd4"** **type=****"password"**>  
      </**div**>  
      <**div** **class=****"col-md-4"**>  
        <**span** **class=****"help-block"**>密码中必须包含数字、字母</**span**>  
      </**div**>  
    </**div**>  
 *    *<**div** **class=****"row"**>  
      <**div** **class=****"col-md-10 col-md-offset-2"**>  
        <**div** **class=****"checkbox"**>  
          <**label**>  
            <**input** **type=****"checkbox"**>我接受本站的使用条款  
          </**label**>  
        </**div**>  
      </**div**>  
    </**div**>  
  
    <**div** **class=****"row"**>  
      <**div** **class=****"col-md-10 col-md-offset-2"**>  
        <**input** **class=****"btn btn-success"** **type=****"button"** **value=****"提交数据"**>  
        <**input** **class=****"btn btn-danger"** **type=****"button"** **value=****"清空重填"**>  
      </**div**>  
    </**div**>  
  </**form**>  
</**div**>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70][]

用户名与密码的右对齐是源于css中：.form-horizontal .control-label\{

1.  padding-top: 7px;
2.  margin-bottom: 0;
3.  text-align: right;

4、组件——图标字体

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

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

图标字体实现原理

@font-face \{                          /\*设置一个特殊的class\*/

font-family: 'Glyphicons Halflings';

src: url('../fonts/glyphicons-halflings-regular.eot');   /\*设置字体，如果没有就去URL路径中去找\*/

\}        /\*服务器端字体\*/

.glyphicon \{                 /\*定义一个class\*/

position: relative;

top: 1px;

display: inline-block;

font-family: 'Glyphicons Halflings';    /\*设置一个字体，客户端没有这种字体\*/

font-style: normal;

font-weight: normal;

line-height: 1;

提示：(1)图标字体的本质不是图片，而是字体；故凡是可以使用文字的地方都可以使用不同字体，也可以像文字一样改变颜色

(2)glyphicon图标字体只能用于“空元素”（不包含任何内容或子元素！）

使用结构如：

刷新按钮：

</a>

常用的文字图标

glyphicon-refresh刷新              glyphicon-map-marker定位

glyphicon-backward后退            glyphicon-forward前进

glyphicon-arrow-left后退一页        glyphicon-arrow-right前进一页

glyphicon-chevron-left轮播左        glyphicon-chevron-right轮播右

glyphicon-menu-left菜单左          glyphicon-menu-right菜单右

glyphicon-star星号                  glyphicon-star-empty空心星号

glyphicon-save保存                  glyphicon-save-file保存文件

glyphicon-saved保存完成            glyphicon-floppy-save保存到磁盘

glyphicon-remove删除              glyphicon-ok确定

glyphicon-home主页                glyphicon-cog配置

5、组件——按钮组

.btn-group    水平按钮组

.btn-group-vertical 竖直按钮组

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

.btn-group-lg

.btn-group-sm

.btn-group-xs

6、组件——下拉菜单

下拉菜单必须HTML结构：

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

**<a** **data-toggle="dropdown"****>触发元素</a>    **触发元素（用到了jQuery的自定义属性（data-toggle）与事件触发(click事件和toggle（）方法）

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

**隐藏元素**

**</ul/div>**

**</div>**

<div class="dropdown">

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">

Dropdown

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

</button>

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">

<li role="presentation"><a role="menuitem" tabindex="-1" href="\#">Action</a></li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="\#">Another action</a></li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="\#">Something else here</a></li>

<li role="presentation"><a role="menuitem" tabindex="-1" href="\#">Separated link</a></li>

</ul></div>

7、组件——导航——小重点

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

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

(1)标签页式导航

</ul>

例：

<ul class="nav nav-tabs nav-justified">           nav-justified占满整行

<li><a data-toggle="tab" href="\#">十元套餐</a></li>   data-toggle="tab"点击时把别的a的active样式去掉，给当前的加上

<li><a data-toggle="tab"  class="active"  href="\#">二十元套餐</a></li>

<li><a data-toggle="tab" href="\#">三十元套餐</a></li>

</ul>

(2)胶囊式导航

</ul>

例：

<li><a data-toggle="tab" class="active"  href="\#">二十元套餐</a></li>

<li><a data-toggle="tab" href="\#">三十元套餐</a></li>

</ul>

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

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

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

8、组件：路径导航(面包屑)/分页/标签/徽章/巨幕/水井/页头

面包屑：  .breadcrumb

![2018120517014848.png][]

<ol class="breadcrumb">

<li><a href="\#">Library</a></li>

<li class="active">Data</li>

</ol>

分页：

① .pagination

![20181205170213667.png][]

<nav>

<ul class="pagination">

<span aria-hidden="true">«</span>

</a>

</li>

<span aria-hidden="true">»</span>

</a>

</li>

</ul></nav>

② .pager

![20181205170248506.png][]

<nav>
    
      <ul class="pager">
    
        <li class="previous"><a href="#"><span >←</span> Older</a></li>
    
        <li class="next"><a href="#">Newer <span >→</span></a></li>
    
      </ul></nav>

标签：   .label

![20181205170507955.png][]

徽章： .badge（可以很醒目的展示新的或未读的信息条目

）

![20181205170531794.png][]

<button class="btn btn-primary" type="button">

Messages <span class="badge">4</span></button>

巨幕：   .jumbotron  （比H1字体还大，用来做广告）

![20181205170552832.png][]

<div class="jumbotron">

<h1>Hello, world!</h1>

<p><a class="btn btn-primary btn-lg" href="\#" role="button">Learn more</a></p></div>

水井：   .well(像是在上面往水井里面看，四周有阴影差别)

![20181205170610660.png][]

页头：  .page-header（页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔）

![20181205171532393.png][]

<div class="page-header">

<h1>Example page header <small>Subtext for header</small></h1>

</div>

缩略图： .thumbnail

<div class="row">

<div class="col-sm-6 col-md-4">

<div class="thumbnail">

<img src="..." alt="...">

<div class="caption">

<h3>Thumbnail label</h3>

<p><a href="\#" class="btn btn-primary" role="button">Button</a> <a href="\#" class="btn btn-default" role="button">Button</a></p>

</div>

</div></div>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 1][]

**警告框:**

![20181205171610204.png][]

<div class="alert alert-warning alert-dismissible" role="alert">

<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>

<strong>Warning!</strong> Better check yourself, you're not looking too good.</div>

进度条

<div class="progress">  
  <div class="progress-bar progress-bar-striped active"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> 动态  
    <span class="sr-only">45% Complete</span>  
  </div>  
</div>

9、组件——响应式导航条——重点&难点

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

基础class： .navbar

Bootstrap中导航条的按位置：

1.  顶部导航条
2.  底部导航条

Bootstrap中导航条的按颜色：

1.  浅色底深色的字 .navbar-default
2.  深色底浅色的字 .navbar-inverse

Bootstrap中导航条的按定位：

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

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

导航条的结构：

****

</div>

****

</div>

例：

[2018120516534317.png]: /images/20220411/bd796d82c0b44b49aa1f6aa23019ead6.png
[2018120516550384.png]: /images/20220411/4e6d8d6e758745ef97da3490e2a9ea08.png
[20181205165546683.png]: /images/20220411/feab936a694841ec977edc344ba7370e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70]: /images/20220411/1b89dbf5ed7b4fd4b014fdf7a0e6a117.png
[2018120517014848.png]: /images/20220411/14e64f12141b4182946511eff1127ba9.png
[20181205170213667.png]: /images/20220411/9afdca3192c84514b7f7a46838ba2666.png
[20181205170248506.png]: /images/20220411/5d65de4812064a79a4ff53c90cc4278a.png
[20181205170507955.png]: /images/20220411/e0c5238dadf74446bc733879a69ec719.png
[20181205170531794.png]: /images/20220411/5abd94e18fd44cb4a08a0f153e2c7819.png
[20181205170552832.png]: /images/20220411/a96fe09234254018b81af841db0348f1.png
[20181205170610660.png]: /images/20220411/9c4de6c8d24f49feb159f7b34d8aeb49.png
[20181205171532393.png]: /images/20220411/996f03acd3cb465492a61cfecc3b6c4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWxpcGVuZzY2Ng_size_16_color_FFFFFF_t_70 1]: /images/20220411/09ef30a0c59c4e97bf162ce819cc986a.png
[20181205171610204.png]: /images/20220411/3b290f7afec2467d818b649198a5fc5e.png