Bootstrap学习笔记（三）组件

最新推荐文章于 2022-11-20 15:06:14 发布

kun鲲

最新推荐文章于 2022-11-20 15:06:14 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： bootrap笔记

本文链接：https://blog.csdn.net/shilipeng666/article/details/84839200

Bootstrap 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Bootstrap的组件使用，包括全局CSS样式、表单、图标字体、按钮组、下拉菜单、导航、路径导航、分页、标签、徽章等。深入探讨了各种组件的用法、样式调整和响应式设计，对于理解和应用Bootstrap框架非常有帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)默认表单

<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)行内表单

</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)水平表单

使用栅格系统来控制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>

效果：

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

padding-top: 7px;
margin-bottom: 0;
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>

Dropdown

</button>

<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

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

</ol>

分页：

① .pagination

<nav>

</a>

</li>

</a>

</li>

</ul></nav>

② .pager

<nav>

  <ul class="pager">

    <li class="previous"><a href="#"><span >&larr;</span> Older</a></li>

    <li class="next"><a href="#">Newer <span >&rarr;</span></a></li>

  </ul></nav>

标签： .label

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

）

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

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

<h1>Hello, world!</h1>

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

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

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

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

</div>

缩略图： .thumbnail

<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>

警告框:

<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中导航条的按位置：