详解Bootstrap

最新推荐文章于 2022-10-21 15:37:46 发布

chiza4954

最新推荐文章于 2022-10-21 15:37:46 发布

阅读量416

点赞数

文章标签： javascript 设计模式 ViewUI

原文链接：https://my.oschina.net/u/3240534/blog/840388

版权

深入理解Bootstrap

Bootstrap的css组件的核心就是选择器的定义以及在各自优先级上的处理。

一、整体架构

CSS12栅格系统——将网页的总宽度平分为12份

——或针对一个div元素使用12等分的栅格

CSS组件

基础布局组件

响应式设计

JQuery

JavaScript插件

1栅格系统

基本原理

原理：通过定义容器大小，平分12份，再调整内外边距，最后再结合媒体查询

容器——container

行——row

列——col

组列——column

外边框——padding(创建列间隔)

超小型屏幕——xs

小型屏幕——sm(>768px)

中型屏幕——md(>992px)

大型屏幕——lg(>1200px)

基本用法

列组合——.col-md-*

——一个行里声明12个列，对12个列进行组合

<div class="container">
    <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-a</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-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</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-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>

原理：每行（row）div均分成12等份，进行列组合

CSS特性：每一份均向左浮动，且宽度百分比

列偏移——.col-md-offset-*

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

列嵌套——即在一个列里声明一个或多个行

——在任何一个嵌套列里，不管宽度是多少，都可以再进行12等分

<div class="container">
    <div class="row">
        <div class="col-md-9">
            level1:.col-md-9
            <div class="row">
                <div class="col-md-6">level2:.col-md-6</div>
                <div class="col-md-6">level2:.col-md-6</div>
            </div>
        </div>
    </div>
</div>

列排序

列向左浮动——.col-md-pull-*

列向右浮动——.col-md-push-*

列排序其实是改变列的方向，即改变左右浮动，并且设置浮动距离。

2响应式栅格

媒体查询定义分界点——@media

@media (min-width:768px){
    .container{
        width: 750px;
    }
}
@media (min-width:992px){
    .container{
        width: 970px;
    }
}
@media (min-width:1200px){
    .container{
        width: 1170px;
    }
}

跨设备组合定义——col-sm-* col-md-* col-lg-*

<div class="container">
    <div class="row">
        <div class="col-sm-12 col-md-8">.col-sm-12 .col-md-8</div>
        <div class="col-sm-6 col-md-4">.col-sm-6 .,col-md-4</div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-4">.col-sm-6 .col-md-4</div>
        <div class="col-sm-6 col-md-4">.col-sm-6 .,col-md-4</div>
        <div class="col-sm-6 col-md-4">.col-sm-6 .,col-md-4</div>
    </div>
    <div class="row">
        <div class="col-sm-6">.col-sm-6</div>
        <div class="col-sm-6">.col-sm-6</div>
    </div>
</div>

清除浮动——clearfix

响应式图片——img-responsive

3CSS组件架构

AO模式——附加Append+重写Overwrite

CSS特性——不同名的样式可以叠加在一起使用；同名的样式，会发生覆盖

基础样式

——btn、alert

字体——font

外边距——margin

内边距——padding

显示方式——display

边框——border

颜色样式

——btn-info、alert-success

重点蓝——primary

成功绿——success

信息蓝——Info

警告框——warning

危险红——danger

定义规则——组件名称-颜色

主要定义——文本颜色、边框颜色、背景颜色

样式叠加：

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<div class="alert alert-waring"></div>
<div class="alert alert-danger"></div>

尺寸样式

超小型——xs

小型——sm

中型——md

大型——lg

注：同一组件的不同类型的样式可以组合在一起使用

<button type="button" class="btn btn-success btn-lg">Success</button>

状态样式

高亮可用——active

禁用——disabled

特殊元素样式

特殊元素——即特定类型的组件一般只使用某一种或几种固定的元素

并列元素样式

水平并列——左右内外边距

重直并列——上下内外边距

嵌套子元素样式

动画样式

4 JavaScript插件架构

HTML布局规则——所有插件可以通过设置特定HTML代码和相应的属性来实现

Ø JavaScript实现步骤——所有插件都遵循jQuery插件开发的标准步骤，所有的事件都保持了统一标准

Ø 声明立即调用的函数

Ø 定义插件类及样关原型方法

Ø 在jQuery上定义插件并重设插件构造函数

Ø 防冲突处理

Ø 绑定各种触发事件

插件调用方法——调用式；HTML声明式

5 CSS布局

5.1基础排版

标题——<h1>

页面主题——<body>

段落突出显示——样式lead

强调文本——<small>、<strong>、<em>、<cite>

对齐方式——样式text-left、text-right、text-center、text-justify

缩略语——<abbr>

地址元素——<address>

引用——<blockquote>

右对齐样式——pull-right

<blockquote class="pull-right">
<p></p>
<span></span>
</blockquote>

普通列表——

有序列表——

去点列表——样式list-unstyled

内联列表——样式list-inline

定义列表——

水平定义列表——样式dl-horizontal

5.2代码

显示单行内联代码——<code>

显示用户输入代码——<kbd>

显示多行代码块——<pre>

5.3表格

基础样式-——样式table

<table class="table"></table>

带背景条纹的表格——样式table-striped

<table class="table table-striped"></table>

带边框的表格——样式table-bordered

<table class="table table-bordered"></table>

鼠标悬停高亮的表格——样式table-hover

<table class="table table-hover"></table>

紧湊型表格——样式table-condensed

<table class="table table-condensed"></table>

行级元素样式——控制tr的背景颜色

表示当前活动的信息——样式active

表示成功或者正确的行为——样式success

表示中间的信息或行为——样式info

表示警告，需要特别注意——样式warning

表示危险或者可能是错误的行为——样式danger

响应式表格——样式table-responsive

<div class="table-responsive">
<table class="table"></table>
</div>

5.4表单

基础表单

基础表单上未做太多的定制化效果设计，默认使用全局设置，对元素的内外边距与边框进行了细化

注：如果在select、input、textarea上应用.form-control样式，显示的宽度变为100%

<form>
    <fieldset>
        <legend>用户登录</legend>
        <div class="form-group">
            <label>登录帐户</label>
            <input type="email" class="form-control" placeholder="Please input your email"/>
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="password" class="form-control" placeholder="Please input your password"/>
        </div>
        <div class="form-group">
            <label>再次输入密码</label>
            <input type="password" class="form-control" placeholder="Please input your password again"/>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"/>记住密码
            </label>
        </div>
        <button type="submit" class="btn btn-default">登录</button>
    </fieldset>
</form>

内联表单

内联表单——样式form-inline

<form class="form-inline">
    <div class="form-group">
        <label>用户名</label>
    </div>
    <div class="form-group">
        <input type="text" class="form-control" placeholder="Please input your name"
    </div>
    <div class="form-group">
        <label>密码</label>
    </div>
    <div class="form-group">
        <input type="password" class="form-control" placeholder="Please input your password"
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"/>记住密码
        </label>
    </div>
    <button type="submit" class="btn btn-default">登录</button>
</form>

横向表单

横向表单——样式form-horizontal+栅格类

注：样式form-group在这里代替样式row

<form class="form-horizontal" role="form">
    <div class="form-group">
       <label for="account" class="col-sm-2 control-label">用户名</label>
        <div class="col-sm-10">
        <input type="email" class="form-control" id="account" placeholder="name"/>
        </div>
    </div>
  <div class="form-group">
        <label for="password" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="password" placeholder="password"/>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"/>记住密码
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>

表单控件

——<input>

——<select>

——<textarea>

——<checkbox>——样式checkbox——内联样式checkbox-inline

<div class="checkbox">
    <label>
        <input type="checkbox"/>记住密码
    </label>
</div>

——<radio>——样式radio——内联样式radio-inline

<div class="radio">
    <label>
        <input type="radio"/>记住密码
    </label>
</div>

控件状态

焦点状态——:focus

禁用状态——disabled属性

<fieldset disabled></fieldset>

验证提示状态

警告样式——has-warning

错误样式——has-error

成功样式——has-success

验证小图标样式——has-feedback

<div class="form-group has-warning">
<label for="inputwarning" class="control-label">输入长度不够</label>
<input class="form-control" type="text" id="Text1"/>
</div>

控件大小

稍大的输入框样式——input-lg

稍小的输入框样式——input-sm

<input class="input-lg form-control" type="text" placeholder="较大"/>

栅格类+控件大小

<div class="row">
    <div class="col-xs-2">
        <input type="text" class="form-control" placeholder=".col-xs-2"/>
    </div>
    <div class="col-xs-3">
        <input type="text" class="form-control" placeholder=".col-xs-3"/>
    </div>
    <div class="col-xs-4">
        <input type="text" class="form-control" placeholder=".col-xs-4"/>
    </div>
</div>

其他

在表单中显示块级的帮助提示样式——help-block

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

5.5按钮

按钮样式

默认按钮样式——btn-default

重点蓝——btn-primary

成功绿——btn-success

信息蓝——btn-Info

警告框——btn-warning

危险红——btn-danger

让按钮的行为看起来像链接一样——btn-link

<button type="button" class="btn btn-default">Default</button>

按钮大小

——btn-lg

——btn-md

——btn-sm

——btn-sx

<button type="button" class="btn btn-default btn-lg">大型</button>

块级按钮样式——btn-block

多标签支持

<a class="btn btn-danger" href="#">Link</a>
<input class="submit" class="btn btn-danger" type="button"value="input"/>
<input class="btn btn-danger" type="reset" value="reset"/>
<button type="button" class="btn btn-default">Default</button>

活动状态

——active样式

——:active伪类

禁用状态

——disabled属性

——disabled样式

5.6图像

——样式img-rounded

——样式img-circle

——样式img-thumbnail

5.7响应式样式

仅在某尽寸时显示，其它都隐藏——样式visible-md

仅在某尽寸时隐藏，其它都显示——样式hidden-md

5.8辅助样式

文本样式

重点蓝——text-primary

成功绿——text-success

信息蓝——text-Info

警告框——text-warning

危险红——text-danger

柔和灰——text-muted

文本背景样式

重点蓝——bg-primary

成功绿——bg-success

信息蓝——bg-Info

警告框——bg-warning

危险红——bg-danger

辅助图标

关闭图标样式——close

向下箭头样式——caret

内容浮动样式——pull-left、pull-right、center-block

清除浮动样式——clearfix

显示元素样式——show

隐藏元素样式——hidden、invisible

不显示元素的内容，只显示背景效果样式——text-hide

二、 CSS组件

1.小图标——glyphicon

用法——在任何内联元素上应用所对应的样式即可

——glyphicon glyphicon-align-left

——glyphicon glyphicon-align-center

——glyphicon glyphicon-align-right

——glyphicon glyphicon-align-justify

应用场景——应用在各种元素容器内

<div class="btn-group">
    <a class="btn btn-default btn-primary" href="#">
        <span class="glyphicon glyphicon-user"></span>
    </a>
    <a class="btn btn-default btn-primary dropdown-toggle" data-toggle="hre">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-munu">
        <li><a href="#"><span class="glyphicon glyphicon-pencil"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-trash"></span></a></li>
        <li><a href="#"><span class="glyphicon glyphicon-circle"></span></a></li>
        <li class="divider"></li>
        <li><a href="#">Make admin</a> </li>
    </ul>
</div>

应用场景——在每个操作菜单前显示代表该菜单意思的图标

<ul>
    <li class="active"><a href="#"><span class="glyphcion glyphicon-home"></span>Home</a></li>
    <li><a href="#"><span class="glyphcion glyphicon-pencil"></span>Library</a></li>
    <li><a href="#"><span class="glyphcion glyphicon-book"></span>Application</a></li>
    <li><a href="#"><span class="glyphcion glyphicon-"></span>Misc</a></li>
</ul>

应用场景——在表单的输入框前面或后面加上一个小图标

<div class="control-group">
    <div class="controls">
      <div class="input-group">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-envelop"></span>
            </span>
            <input class="col col-lg-2 form-control" id="inputIcon" type="text"/>
        </div>
    </div>
</div>

2.下拉菜单——dropdown

基本用法

<div class="dropdown open clearfix">
    <ul aria-labeledby="dropdownMenu2" role="presentation" class="dropdown-munu">
        <li class="dropdown-header" role="presentation">Translate the book</li>
        <li role="presentation"><a href="#" tabindex="-1" role="menuitem">精讲</a></li>
        <li role="presentation"><a href="#" tabindex="-1" role="menuitem">设计模式</a></li>
        <li role="presentation"><a href="#" tabindex="-1" role="menuitem">开发指面</a></li>
       <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">原创图书</li>
        <li role="presentation"><a href="#" tabindex="-1"role="menuitem">bootstrap</a></li>
    </ul>
</div>

3.按钮

按钮组——btn-group

基本用法——只需在多个按钮外部使用一个容器元素，然后在其上应用样式.btn-group

 <div class="btn-group">

    <button type="button" class="btn btn-default">Left</button>

    <button type="button" class="btn btn-default">Middle</button>

    <button type="button" class="btn btn-default">right</button>

</div>

<div class="btn-group">

    <a class="btn btn-default">Left</a>

    <a class="btn btn-default">Middle</a>

    <a class="btn btn-default">right</a>

</div>

按钮工具栏——toolbar

<div class="toolbar">
    <div class="btn-group"></div>
    <div class="btn-group"></div>
    <div class="btn-group"></div>
</div>

按钮尽寸

按钮大小——btn-lg、btn-md、btn-sm、btn-xs

按钮组尺寸——btn-group-lg

嵌套分组

<div class="btn-group">
    <button class="btn btn-default" type="button">首页</button>
    <button class="btn btn-default" type="button">个人简介</button>
    <button class="btn btn-default" type="button">作品</button>
    <div class="btn-group">
        <button data-role="dropdown" class="btn btn-default dropdown-toggle" type="button">      图书</button>
        <ul class="dropdown-menu">
            <li><a href="#"></a>编程</li>
            <li><a href="#"></a>编程</li>
            <li><a href="#"></a>编程</li>
        </ul>
    </div>
</div>

垂直分组——btn-group-vertical

<div class="btn-group-vertical">
    <button class="btn btn-default" type="button">首页</button>
   <button class="btn btn-default" type="button">个人简介</button>
    <button class="btn btn-default" type="button">作品</button>
</div>

自适应分组——btn-group-justified

<div class="btn-group btn-group-justified">
    <a role="button" class="btn btn-default">left</a>
    <a role="button" class="btn btn-default">middle</a>
    <a role="button" class="btn btn-default">rigth</a>
</div>

4.按钮下拉菜单

——在普通的下拉菜单的基础上封装了.btn样式的效果

组合式下拉菜单

箭头包含在按钮内部

<div class="btn-group">
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
        success<span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a> </li>
        <li><a href="#">Action</a> </li>
        <li><a href="#">Action</a> </li>
        <li class="divider"></li>
        <li><a href="#">Action</a> </li>
    </ul>
</div>

分离式下拉菜单

箭头与按钮功能分离

<div class="btn-group">
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a> </li>
        <li><a href="#">Action</a> </li>
        <li><a href="#">Action</a> </li>
        <li class="divider"></li>
        <li><a href="#">Action</a> </li>
    </ul>
</div>

向上弹起的下拉菜单——dropup

——和普通的下接菜单相比只要多附加一个.dropup样式即可

<div class="btn-group dropup">
    <button type="button" class="btn btn-dange">Success</button>
    <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a> </li>
        <li><a href="#">Action</a> </li>
        <li><a href="#">Action</a> </li>
        <li class="divider"></li>
        <li><a href="#">Action</a> </li>
    </ul>
</div>

5.输入框组

输入框组——容器上应用.input-group样式+++input前后显示的个性元素上应用.input-group-addon样式

将文本输入框和文字或小图标组合在起进行显示——addon

<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control"/>
    <span class="input-group-addon">&</span>
</div>

复选框与单选框作为addon

——在样式.input-group-addon内放置checkbox和radio类型即可

按钮作为addon——input-group-btn

下拉菜单按钮作为addon

——在普通的.btn按钮上就用一个data-toggle=”dropdown”属性即可

分段按钮作为addon

——在input-group-btn样式里，放置多个按钮

尺寸设置

输入框组尺寸设置——input-group-lg

输入框尽寸设置——input-lg

6.导航

选项卡导航——nav-tabs

胶囊式导航——nav-pills

堆叠式导航——nav-stacked(垂直堆放)

自适应导航——nav-justified

禁用链接——样式disabled

二级导航菜单

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a> </li>
    <li><a href="#">Profile</a> </li>
    <li><a href="#">Message</a> </li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown<span class="caret"></span> </a>
        <ul class="dropdown-menu"><a href="#" tabindex="-1">二级菜单1</a> </ul>
        <ul class="dropdown-menu"><a href="#" tabindex="-1">二级菜单1</a> </ul>
        <ul class="dropdown-menu"><a href="#" tabindex="-1">二级菜单1</a> </ul>
    </li>
</ul>

7.导航条——navbar

基础导航条——ul元素上就用.navbar-nav样式++外部父元素上应用.navbar样式以及.navbar-default样式

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">brand</a>
    </div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">active</a> </li>
        <li><a href="#">link</a> </li>
        <li class="disabled"><a href="#">ldisabled</a> </li>
        <li><a href="#">link</a> </li>
    </ul>
</nav>

导航条中的表单——在form元素上应用navbar-form样式

导航条中的表单——navbar-form

<form class="navbar-form navbar-left" role="search"></form>

导航条中项左浮动——navbar-left

导航条中项右浮动——附加样式navbar-right

导航条中的文本——navbar-text

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header"><a href="#" class="navbar-brand">brand</a> </div>
    <div class="nav navbar-nav">
        <label class="navbar-text">文本</label>
        <label class="navbar-text">文本</label>
    </div>
</nav>

导航条中的链接——navbar-link

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header"><a href="#" class="navbar-brand">brand</a> </div>
    <div class="nav navbar-nav">
        <label class="navbar-link">link</label>
        <label class="navbar-link">link</label>
    </div>
</nav>

导航条中的按钮——navbar-btn

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">brand</a>
    </div>
  <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
        <li><a href="#">Home</a></li>
    </ul>
    <button class="btn btn-success navbar-btn" type="button">button</button>
</nav>

——navbar-header

导航条顶部固定——navbar-fixed-top

<div class="navbar navbar-default navbar-fixed-top"></div>

导航条最底部固定——navbar-fixed-bottom

去掉导航条圆角——navbar-static-top

反色导航条——navbar-inverse

响应式导航条——navbar-responsive-collapse

<div class="collapse navbar-collapse navbar-responsive-collapse"></div>

8.面包屑导航

面包屑导航——breadcrumb

9.分页导航

带有多个页码的分页组件——pagination

只有上一页、下一页的翻页组件——pager

状态样式——disabled、active

尺寸大小——pagination-lg

10标签

实现高亮功能——样式.label

重点蓝——label-primary

成功绿——label-success

信息蓝——label-Info

警告框——label-warning

危险红——label-danger

11.微章

显示一些最新收到的消息、需要有多少审批的消息等——badge

<a href="#">Inbox<span class="badge">36</span></a>

12大屏幕展播

大屏内容的显示——jumbotron

<div class="jumbotron">

    <h1>hello world</h1>

    <p>Welcome to my website</p>

    <p><a class="btn btn-primary btn-lg"</p>

</div>

13页面标题

页面标题——page-header

<div class="page-header">

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

</div>

14缩略图——thumbnails

缩略图——thumbnails

<div class="row">

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

        <a href="#" class="thumbnail">

            <img data-src="#" alt=""/>

        </a>

    </div>

</div>

15警告框

默认警告框——alert

可关闭的警告框——alert-dismissable

多彩样式警告框——alert-danger、alert-success、alert-info

警告框中的链接——alert-link

16进度条

设置进度条的容器样式——process

用于限制进度条的颜色——process-bar

多彩样式——只改变进度条的颜色

重点蓝——process-bar-primary

成功绿——process-bar -success

信息蓝——process-bar-Info

警告框——process-bar-warning

危险红——process-bar-danger

<div class="progress">

    <div class="progress-bar progress-bar-success"></div>

</div>

条纹样式——progress-striped（样式附加于容器元素上）

<div class="progress　progress-striped">

    <div class="progress-bar progress-bar-success"></div>

</div>

动画样式——active（样式附加于容器元素上）

<div class="progress　progress-striped active">

    <div class="progress-bar progress-bar-success"></div>

</div>

堆叠样式

<div class="progress">

 <div class="progress-bar progress-bar-success"></div>

    <div class="progress-bar progress-bar-warning"></div>

    <div class="progress-bar progress-bar-danger"></div>

</div>

17媒体对象

媒体对象是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内左对齐或右对齐的图片。

默认样式

——media

——media-object

——media-body

——media-heading

——pull-left

——pull-right

<div class="media">

    <a class="pull-left" href="#">

        <img class="media-object" src="Image/Flint02.jpg"/>

    </a>

    <div class="media-body">

        <h4 class="media-heading">media heading</h4>

        ....

        <div class="media"></div>

    </div>

</div>

媒体列表——media-list

<ul class="media-list">

    <li class="media"></li>

    <li class="media"></li>

    <li class="media"></li>

</ul>

18列表组

堆叠导航样式——nav-stacked

基础列表组——list-group++list-group-item

应用微章标记

可链接的列表组

<div class="list-group">
    <a href="#" class="list-group-item active">编程精讲
    <span class="badge">2</span>
    </a>
    <a href="#" class="list-group-item active">设计模式
        <span class="badge">3</span>
    </a>
    <a href="#" class="list-group-item active">启示录
        <span class="badge">1</span>
    </a>
</div>

多彩列表项

重点蓝——list-group-item-primary

成功绿——list-group-item-success

信息蓝——list-group-item -Info

警告框——list-group-item -warning

危险红——list-group-item -danger

自定义列表组

列表项条目的头部——list-group-item-heading

列表项条目的主要内容——list-group-item-text

<div class="list-group">
    <a href="#" class="list-group-item active">
        <h3 class="list-group-item-heading">编程精讲</h3>
        <p class="list-group-item-text">....</p>
    </a>
    <a href="#" class="list-group-item">
        <h3 class="list-group-item-heading">编程精讲</h3>
        <p class="list-group-item-text">....</p>
    </a>
</div>

19面板

基础面板——panel

控制面板颜色的主题——panel-default

存放面板内容——panel-body

面板头部——panel-heading

面板尾部——panel-footer

<div class="panel panel-default">
    <div class="panel-heading">header</div>
    <div class="panel-body">
        面板内容
    </div>
    <div class="panel-footer">footer</div>
</div>

多彩面板

重点蓝——panel-primary

成功绿——panel -success

信息蓝——panel -Info

警告框——panel -warning

危险红——panel -danger

面板与表格进行嵌套

<div class="panel panel-default">
    <div class="panel-heading">header</div>
    <div class="panel-body">
      <p>面板内容</p>
    </div>
    <table class="table table-bordered">
        ...
    </table>
    <div class="panel-footer">footer</div>
</div>

面板与列表组进行嵌套

<div class="panel panel-default">
    <div class="panel-heading">header</div>
    <div class="panel-body">
        <p>面板内容</p>
    </div>
    <ul class="list-group">
        <li class="list-group-item">
            <span class="badge">14</span>
            编程精讲
        </li>
        <li class="list-group-item">编程精讲</li>
        <li class="list-group-item">编程精讲</li>
        <li class="list-group-item">编程精讲</li>
    </ul>
    <div class="panel-footer">footer</div>
</div>

20洼地

洼地——well

<div class="well">
<p>some default panel</p>
<blockquote>这是引用内容</blockquote>
</div>

21主题

主题样式——bootstrap-theme.css（针对常用的CSS组件进行了增强）

转载于:https://my.oschina.net/u/3240534/blog/840388

chiza4954

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
详解Bootstrap

深入理解Bootstrap Bootstrap的css组件的核心就是选择器的定义以及在各自优先级上的处理。一、整体架构 CSS12栅格系统——将网页的总宽度平分为12份 ——或针对一个div元素使用12等分的栅格 CSS组件基础布局组件响应式设计 JQuery...
复制链接

扫一扫