深入Bootstrap CSS组件学习教程

Bootstrap的核心组件包括:Icon图标(Glyphicon)、 下拉菜单(Dropdown)、按钮组(Button group)、按钮下拉菜单(Button dropdown)、输入框组(Input group)、导航 (Nav)、导航条(Navbar)、面包屑导航(Breadcrumb)、分 页导航(Pagination)、标签(Label)、徽章(Badge)、大屏幕 展播(Jumbotron)、页面标题(Pageheader)、缩略图 (Thumbnail)、警告框(Alert)、进度条(Progress bar)、媒 体对象(Media object)、列表组(Listgroup)、面板(Panel) 和洼地(Well),总计20种。

所有组件

小图标

小图标(icon)是一个优秀网站不可缺少的一组元素,小图标的点缀可以使网站瞬间提升一个档次。bs提供了 200个小图标。

使用的时候必须同时使用两个样式,即.glyphicon和以.glyphicon-*开头的样式。

新版icon就是利用@font-face特性,并结合一定的字体, 来制作Web页面中的icon图标。

优点

这种形式不仅可以让字体无损失放大,还可以简单地通过color: #ff0的形式设置图标的颜色。

2种使用方式

<span class="glyphicon glyphicon-glass text-danger" style="font-size: 50px;"></span>
<i class="glyphicon glyphicon-glass text-success"></i>

3种场景使用场景

button、li、input-group

扩展

图标是利用字体和content属性来实现的,所以下面这2个是等效的

<span class="glyphicon glyphicon-glass"></span>
<span class="glyphicon">&#xe001</span>

下拉菜单

使用

.dropdown样式是大容器,.dropdown-menu是菜单li元素的容器,而.divider样式在li元素上的显示效果是分隔符。

由于menu样式中设置display:none,通过设置open样式,可以打开菜单。

菜单标题,通过设置.dropdown-header样式可以设置标题。

支持active和disabled

多级菜单

在bs3.x版本默认是没有多级菜单的,在bs2.x中有,如果要使用,先添加扩展样式

.dropdown-submenu {
    position: relative; /* 相对定位 */
}
    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%; /* 右侧开始对齐 */
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px 6px;
        border-radius: 0 6px 6px 6px;
    }
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
.dropup .dropdown-submenu > .dropdown-menu {
    top: auto;
    bottom: 0; /* 向上方向 */
    margin-top: 0;
    margin-bottom: -2px;
    -webkit-border-radius: 5px 5px 5px 0;
    -moz-border-radius: 5px 5px 5px 0;
    border-radius: 5px 5px 5px 0;
}
.dropdown-submenu > a:after {
    display: block;
    float: right;
    width: 0;
    height: 0;
    margin-top: 5px;
    margin-right: -10px;
    border-color: transparent;
    border-left-color: #cccccc; /* 三角符号设置*/
    border-style: solid;
    border-width: 5px 0 5px 5px;
    content: " ";
}
.dropdown-submenu:hover > a:after {
    border-left-color: #cccccc; /* 鼠标移动时的三角符号设置*/
}
.dropdown-submenu.pull-left {
    float: none; /* 取消子菜单的向右浮动 */
}
    .dropdown-submenu.pull-left > .dropdown-menu {
        left: -100%; /* 向右浮动的时候,子菜单应该从最左侧开始对齐计算 */
        margin-left: 10px;
        -webkit-border-radius: 6px 0 6px 6px;
        -moz-border-radius: 6px 0 6px 6px;
        border-radius: 6px 0 6px 6px;
    }

然后在菜单项上添加dropdown-submenu样式。

一个简单的多级菜单

<div class="dropdown open">
    <ul class="dropdown-menu">
        <li><a>我的积分</a></li>
        <li><a>我的流量</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
            <a>个人中心</a>
            <ul class="dropdown-menu">
                <li><a>我的积分</a></li>
                <li><a>我的流量</a></li>
                <li class="divider"></li>
                <li><a>个人中心</a></li>
            </ul>
        </li>
    </ul>
</div>

按钮组

只需要在多个 按钮外部使用一个容器元素(比如div),然后在容器元素上应用.btn-group样式即可.

按钮工具栏主要是将多个按钮组排列在一起,工具栏是一个容器,在容器元素上应用.btn-toolbar样式。

支持lg、sm尺寸样式

垂直分组.btn-group-vertical

.btn-group-justified样式提供了一个特殊的功能,就是在一个.btn-group容器上,如果使用了该样式,则所有的按钮都会 100%充满容器元素。

按钮下拉菜单

下拉菜单需要满足一个特殊的需求,那就是必须有position: relative.(而.dropdown、btn-group样式正好都有该属性)

组合下拉菜单

分离下拉菜单(实际上就是加一个单独按钮。)

向上弹起的

只需要在容器上加上dropup样式即可

<div class="btn-group dropup">
    <a href="#" class="btn btn-default">
        向上弹起
    </a>
    <a class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="#">1111111</a></li>
        <li><a href="#">2222222</a></li>
    </ul>
</div>

输入框组

只需要在容器上应用.input-group样式,然后对需要在input前后显示的个性元素上应用.input-group-addon样式。

在.input-group-addon样式里,不仅可以放置label和icon,也可以放置复选框(checkbox)和单选框(radio)。

支持lg,sm尺寸样式。

按钮作为addon,由于btn样式本身就有大小颜色内外边距样式。.btn样式又单独设置了一 个.input-group-btn样式

扩展:

    请尽量避免在select元素上使用该功能,因为WebKit浏览器 不完全支持input-group组件的特性。
    不要直接将.input-group和.form-group混合使用,因 为.input-group是一个独立的组件。
    如果让icon融为一体,记得第3节中的feedback功能

导航

设置容器样式,即可实现不同的导航效果

选项卡导航是最常用的一种导航方式,尤其是在多内容编辑的时候,需要通过选项卡进行分组显示

选项卡导航:nav nav-tabs

胶囊式导航:nav nav-pills

垂直导航: nav nav-pills nav-stacked  (nav-tabs垂直导航效果老版本v2.x系列可以,3.x新版本不可以)

自适应导航:nav nav-pills nav-justified  nav nav-tabs nav-justified

导航条

基础导航条是在普通导航的基础上进行改进实现的,但实现原理复杂得多

首先在普通导航的 ul元素上应用.navbar-nav样式,然后在外部父元素容器上应用.navbar样式以及.navbar-default样式即可实现。

navbar-brand样式的链接,表示该元素是导航条的名称,起到提醒的目的

基础导航条

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">Never、C</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li>
            <a href="#" data-toggle="dropdown">Center<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a>11111111</a></li>
                <li><a>22222222</a></li>
                <li class="divider"></li>
                <li><a>11111111</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

导航条中的表单navbar-form

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <a href="#" class="navbar-brand">Never、C</a>
    </div>
    <form class="navbar-form pull-left">
        <div class="form-group">
            <input type="text" class="form-control" name="name" value="" placeholder="Search" />
        </div>
        <a href="#" class="btn btn-default">Submit</a>
    </form>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
    </ul>
</nav>

本质navbar-form设置为inline-block效果,pull-left左浮动效果。

固定

提供了两个强有力的样式支持这一特性,分别是:.navbar-fixed-top支持最顶部固定,.navbar-fixedbottom支持最底部固定。

响应式导航条

屏幕大小的分界点是768像素, 在小于768像素的时候,所有的菜单默认会隐藏,单击右边的icon图标,所有默认的菜单就会展示出来

使用

右上角的button图标(icon)必须包含在.navbar-toggle样式 里

默认隐藏收缩的代码都 在一个样式为.navbar-responsive-collapse的div里,并且该div应用了navbar-collapse和collapse两个样式。

<nav class="navbar navbar-default">
    <div class="navbar-header">
        <!-- .navbar-toggle样式用于toggle收缩的内容,即:collapse样式所在的元素-->
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!--确保无论是宽屏还是窄屏,navbar-brand都会显示 -->
        <a class="navbar-brand" href="#">Brand</a>
    </div>
    <!-- 屏幕宽度小于768像素时,该div内的内容默认都会隐藏(通过单击icon-bar所在的图标,可以再展开);大于768像素时默认显示 -->
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">主页</a></li>
            <li><a href="#">作品</a></li>
            <li><a href="#">图书</a></li>
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉菜单 <b class="caret"></b></a>                <ul class="dropdown-menu">                    <li><a href="#">子菜单1</a></li>                    <li><a href="#">子菜单2</a></li>                    <!--省略菜单 -->                </ul>
            </li>
        </ul>
    </div>
</nav>

面包屑导航

面包屑(Breadcrumb)一般用于导航,表示当前页面所在的位置(或功能插件)。

在容器上(一般为ul)添加breadcrumb类即可。

分页导航

一个用户体验良好的分页组件会得到访问用户的良好评价。bs为大家提供了两种分页组件,一种是带多个页码的组件(pagination),一种是只有上一页、下一页的翻页组件 (pager)。

实际上pager加了居中效果,pagination实现类似btn-group效果

标签

在网页排版的时候,我们经常要高亮一些标题里的特殊字符或者整个字符, bs供了一个.label样式用于实现高亮的功能。

label支持5种基本颜色和1个默认灰。

<span class="label label-info">info</span>

徽标

在开发交互式系统或者信息系统时,经常要显示一些最新收到的消息、需要有多少审批的消息等。Bootstrap的.badge样式提 供了很好的效果,只需要在span或者label上应用该样式即可

.badge样式有个遗憾就是,它没有定义多风格颜色的设定。

使用以下扩展样式,即可实现4种基本颜色

.badge-danger {
    background-color: #d9534f;
}
.badge-success {
    background-color: #5cb85c;
}
.badge-warning {
    background-color: #f0ad4e;
}
.badge-info {
    background-color: #5bc0de;
}

大屏

在设计网页布局的时候,经常会有一些大屏(或大块头)内容的显示,.jumbotron样式提供的展示效果正是我们所需要的。

在.jumbotron内部应用h1和p元素时,这两种元素也会进行相应的调整。

如果jumbotron放在container样式内,则显示圆角;如果不放在里面,就不会显示圆角。而一般我们会在大屏里面套一个容器。

<div class="jumbotron">
    <div class="container">
        <h1>Hello World</h1>
        <p>.Net ......</p>
        <p><a href="#" class="btn btn-primary">Learn</a> </p>
    </div>
</div>

缩略图

结合12栅格系统,并使用.thumbnail样式,可以将图像、视频、文本展示得更加漂亮。

缩略图有两种使用方式,一种 用于仅显示图片,另外一种利用容器将图片和标题显示在一起。

可以在.caption样式的元素容器内,添加任意风格的元素,比如按钮、链接等。本质加了个padding和color。

将以下内容放置一个row中,则会在大屏下一行显示3个,中屏显示2个,小屏显示1个
    

<div class="col-md-6 col-lg-4">
    <div class="thumbnail">
        <img src="url" alt="Alternate Text" />
        <div class="caption">
            <h4>MicroSoft</h4>
            <p>MicroSoft ....</p>
            <p>
                <a class="btn btn-primary">Up</a>
                <a class="btn btn-default">Down</a>
            </p>
        </div>
    </div>
</div>

警告框

在交互式网页中,经常要根据用户操作的上下文为用户提供 灵活的提示消息,比如操作成功、警告提示、错误信息。

默认的警告框是用带有alert样式的div元素容器包含的(p元 素也可以),内部可选地添加一个关闭按钮button元素,关闭按钮要确保设置button元素的属性值data-dismiss="alert", 原因是警告框的关闭功能是通过JavaScript检测该属性实现的.

alert-danger(危险红)、alert-success(成功绿)、alert-info(信息蓝)、alert-warning(警告黄)

在警告框中,还对h4、hr、a标签做了处理。组合起来非常酷。

<div class="alert alert-success">
    <a href="#" class="close" data-dismiss="alert">x</a>
    <h4>Warning</h4>
    <hr />
    <p>Check your write,or look <a href="#">help</a></p>
</div>

进度条

进度条(Progress bar)是一个比较常见的网页效果,一般用于表示加载、跳转或动作正在执行中的状态

progress用于设置进度条的容器样式,而 progress-bar用于限制进度条的进度(颜色进度)。

progress样式主要是设置进度条容器的背景色、容器高度、 间距等,progress-bar样式在设置进度方面,重要的是设置了进度条的 颜色(即样式的背景色)和过渡效果

除了progress-primary(重点蓝)外,其他4种基本颜色。

bs还为进度条提供 了一种条纹样式,并且不同的颜色可以显示不同的条纹。只是在容器元素上附加 了一个新的progress-striped样式,该样式的实现是利用CSS3的线 性渐变特性linear-gradient来实现的。

bs还提供了一个更炫的动画 样式,即:让条纹动起来。active

堆叠,只要在progress容器内放置多个progress-bar即可实现。

<div class="progress progress-striped">
    <div class="progress-bar active" style="width: 35%">35</div>
    <div class="progress-bar progress-bar-success" style="width: 15%"></div>
</div>

媒体对象

媒体对象(Media object)这是一个抽象的样式,用以构建不同类型的组件。

一组媒体的默认使用方式通常包括如下几个样式:media、 media-object、media-body、media-heading 4个样式,和一个用于控制左右浮动的pull-left(或pull-right)样式。

如果需要将多个媒体进行列表展示的话,则可以利用在ul上应用media-list样式、li上应用media样式来实现。

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

列表

大部分的列表组都是由无标记的列表(ul/li)来实现

列表组有2个基本的样式:listgroup和list-group-item。

导航箭头

.list-group-item > .glyphicon-chevron-right {
    float: right; /* 设置小图标 右浮动 */
    margin-right: 5px; /* 小图标在span、label、i元素上设置-15像素的右间距 */
}
 
.list-group-item > .glyphicon + .badge {
    margin-right: 5px; /* 如果两个图标放在一起显示,则保留5像素的右间距 */
}

bs又提供了list-groupitem-heading和list-group-item-text这两个样式,用于开发人员自 定义列表项里的具体内容,其表示的意思分别是:列表项条目的 头部(heading)和主要内容(text)。  

<div class="list-group">
    <a href="#" class="list-group-item active">
        <span class="badge">11</span>
        Cras justo odio
    </a>
    <a href="#" class="list-group-item list-group-item-danger">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">...</p>
    </a>
</div>

面板

基础的面板很简单,就是简单在div上应用panel,产生一个具 有边框的文本显示框

又为其定义 了面板头(panel-heading)和面板尾(panel-footer)样式,

除了progress-primary(重点蓝)外,其他4种基本颜色。

一般在使用面板的时候,往往可能会在主区域(panel-body)内放很多内容,比如图片、表格等

带表格的面板

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>
 
  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

洼地

洼地(Well)样式的效果和大屏幕展播Jumbotron样式类似, 不同点是well样式有了边框设置,并且默认高度是自适应文本的高度。主要用来实现嵌入在网页中。

well样式也提供了不同大小的样式(主要是panding和圆角大小),分别是:well-lg和well-sm

内容太长会超出边界!

主题

3.x版本中还新增了一个bootstraptheme.css文件,该文件并没有提供什么新的功能,仅是针对一些常用的CSS组件进行了增强。

但是theme默认并没有对所有的CSS组件都进行增强,而是针对9个方面的组件进行了增强:btn按钮、缩略图、 下拉菜单、导航条、警告框、进度条、列表组、面板和well

theme文件不是必须要引用的,如果喜欢这种风格才引用它;

如果要定制自己的风格,则可以引用自己的theme名 称,比如bootstrao-theme-flatui.css。

但是一定要注意,该文件一定要在bootstarp.min.css文件之后才能引用,否则会覆盖默认的效果。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索应用
导航
,以便于您获取更多的相关知识。

时间: 2024-09-23 14:39:56

深入Bootstrap CSS组件学习教程的相关文章

Bootstrap框架的学习教程详解(二)_javascript技巧

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 一.下载Bootstrap Bootstrap (当前版本 v3.3.0)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景. 下载地址:http://v3.bootcss.com/getting-started/ PS:其实我们不用下载bootstrap也可以使用它: Bootst

Bootstrap基本组件学习笔记之下拉菜单(7)_javascript技巧

对于一些较为常用的功能模块,Bootstrap也进行了封装.包括下拉菜单.按钮组.导航.分页.缩略图.进度条等. 下面先总结下下拉菜单的使用. 直接看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w

Bootstrap基本组件学习笔记之列表组(11)_javascript技巧

列表组件用于以列表形式呈现复杂的和自定义的内容. 创建一个列表组,只需要完成以下两步: (1)向元素 <ul> 添加 class .list-group: (2)向 <li> 添加 class .list-group-item. 看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta n

Bootstrap CSS组件之下拉菜单(dropdown)_javascript技巧

Bootstrap下拉菜单,常用在开发项目中,今天为大家介绍介绍 dropdown.dropdown-menu.dropdown-header.divider.dropdown-submenu 例子见下拉菜单.html //源码 .dropup, .dropdown { position: relative; } .dropdown-toggle:focus { outline: 0; } .dropdown-menu { position: absolute; top: 100%; left:

Bootstrap基本组件学习笔记之按钮组(8)_javascript技巧

按钮组允许多个按钮被堆叠在同一行上,实现起来非常简单. 0x01 基本用法 直接看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> &l

Bootstrap基本组件学习笔记之input输入框组(9)_javascript技巧

使用input输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

Bootstrap基本组件学习笔记之缩略图(13)_javascript技巧

Bootstrap 通过缩略图为网站布局提供了一种简洁的解决方案. 直接看例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link

Bootstrap基本组件学习笔记之进度条(15)_javascript技巧

Bootstrap提供了各式各样的进度条. 看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="

Bootstrap基本组件学习笔记之导航(10)_javascript技巧

Bootstrap的导航很有特色,主要分为胶囊式导航.面包屑导航.头部导航共3大类,可以满足绝大部分需求. 0x01 胶囊式导航 胶囊式导航采用的是无序列表ul来实现: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devic