sundaxiao
sundaxiao

BootStrap一页通（样式+组件+插件）（全）

初识

  • bootstrap是一种前端框架，实现美观的页面效果。
  • 使用BootStrap的前期工作（注意顺序）：
    • ；因为Bootstrap用到了h5的特性，所以需要此步。
    • 导入jQuery；bootstrap需要jQuery才能正常工作，故需要导入 jquery.min.js
    • 导入Bootstrap的css；定义各种样式。
    • 导入Bootstrap的js；产生交互效果。
    • 最后直接套用Bootstrap的class即可，达到想要的效果。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap的使用title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
head>
<body>
<button class="btn btn-success">Bootstrapbutton>
body>
html>

基本样式

1. 按钮

- 按钮样式可用于：
    - 按钮元素`

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本样式之一：按钮title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
head>
<body>
原始样式按钮：把button标签变为平面的样式，一般不用
<button class="btn">原始样式按钮button>
<br>
默认按钮：无色按钮
<button class="btn btn-default">默认按钮button>
<br>
提交按钮：用于提交数据
<button class="btn btn-primary">提交按钮button>
<br>
成功按钮：一般用于一系列操作的最后一步，例如购物车最后付款
<button class="btn btn-success">成功按钮button>
<br>
信息按钮：点击显示更多信息
<button class="btn btn-info">信息按钮button>
<br>
警告按钮：一般用于修改行为
<button class="btn btn-warning">警告按钮button>
<br>
危险按钮：一般用于严重行为，如删除
<button class="btn btn-danger">危险按钮button>
<br>
表现为链接：button标签表现为超链接，但仍是button标签
<button class="btn btn-link">表现为链接button>
<br>
大按钮：引人注目
<button class="btn btn-lg">大按钮button>
<br>
小按钮：
<button class="btn btn-sm">小按钮button>
<br>
最小的按钮：
<button class="btn btn-xs">最小的按钮button>
<br>
宽屏按钮：水平方向占父容器的100%
<button class="btn btn-block">宽屏按钮button>
<br>
激活状态按钮：按钮一直处于被按下的状态，一般用于显示一个需要很长时间的操作，如上传大文件
<button class="btn active">激活状态按钮button>
<br>
无效按钮：按钮表现为无效的状态，不可点击，如某些处于倒计时的状态
<button class="btn disabled">无效按钮button>
<br>
多种按钮样式混用：多种按钮的样式可以一起用
<button class="btn btn-xs btn-danger disabled">红包已过期button>


body>
html>

BootStrap一页通（样式+组件+插件）（全）_第1张图片

2. 表格

- 基本表格`table`
- 带斑马线的表格`table table-striped`
- 带边框的表格`table table-bordered`
- 有鼠标悬停状态的表格`table table-hover`
- 更加紧凑的表格`table table-condensed`
- 多种效果整合的表格
- 激活样式`active` `alert-active`
- 成功样式`success` `alert-success`
- 信息样式`info` `alert-info`
- 警告样式`warning` `alert-warning`
- 危险样式`danger` `alert-danger`


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本样式之二：表格title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
head>
<style>
    div{
        margin-left: 100px;
        width: 400px;
        height: 400px;
    }
style>
<body>
<div>

    <h2>基本表格：有横向分割线，宽度占用父容器的。h2>
    <table class="table">
        <thead>
        <th>姓名th>
        <th>岗位th>
        <th>状态th>
        thead>
        <tr>
            <td>张三td>
            <td>前端开发td>
            <td>面试中td>
        tr>
        <tr>
            <td>李四td>
            <td>java开发td>
            <td>待筛选td>
        tr>
        <tr>
            <td>冯田td>
            <td>前端开发td>
            <td>已回绝td>
        tr>
        <tr>
            <td>周舟td>
            <td>算法工程师td>
            <td>面试中td>
        tr>
        <tr>
            <td>孙大大td>
            <td>前端开发td>
            <td>三面td>
        tr>
        <tr>
            <td>刘萌td>
            <td>数据库工程师td>
            <td>简历待筛选td>
        tr>
    table>

    <h2>待斑马线的表格：h2>
    <table class="table table-striped">
        <thead>
        <th>姓名th>
        <th>岗位th>
        <th>状态th>
        thead>
        <tr>
            <td>张三td>
            <td>前端开发td>
            <td>面试中td>
        tr>
        <tr>
            <td>李四td>
            <td>java开发td>
            <td>待筛选td>
        tr>
        <tr>
            <td>冯田td>
            <td>前端开发td>
            <td>已回绝td>
        tr>
        <tr>
            <td>周舟td>
            <td>算法工程师td>
            <td>面试中td>
        tr>
        <tr>
            <td>孙大大td>
            <td>前端开发td>
            <td>三面td>
        tr>
        <tr>
            <td>刘萌td>
            <td>数据库工程师td>
            <td>简历待筛选td>
        tr>
    table>

    <h2>带边框的表格：h2>
    <table class="table table-bordered">
        <thead>
        <th>姓名th>
        <th>岗位th>
        <th>状态th>
        thead>
        <tr>
            <td>张三td>
            <td>前端开发td>
            <td>面试中td>
        tr>
        <tr>
            <td>李四td>
            <td>java开发td>
            <td>待筛选td>
        tr>
        <tr>
            <td>周舟td>
            <td>算法工程师td>
            <td>面试中td>
        tr>
        <tr>
            <td>孙大大td>
            <td>前端开发td>
            <td>三面td>
        tr>
    table>

    <h2>鼠标悬停状态的表格：h2>
    <table class="table table-hover">
        <thead>
        <th>姓名th>
        <th>岗位th>
        <th>状态th>
        thead>
        <tr>
            <td>张三td>
            <td>前端开发td>
            <td>面试中td>
        tr>
        <tr>
            <td>李四td>
            <td>java开发td>
            <td>待筛选td>
        tr>
        <tr>
            <td>周舟td>
            <td>算法工程师td>
            <td>面试中td>
        tr>
        <tr>
            <td>孙大大td>
            <td>前端开发td>
            <td>三面td>
        tr>
    table>

    <h2>更加紧凑的表格：h2>
    <table class="table table-condensed">
        <thead>
        <th>姓名th>
        <th>岗位th>
        <th>状态th>
        thead>
        <tr>
            <td>张三td>
            <td>前端开发td>
            <td>面试中td>
        tr>
        <tr>
            <td>李四td>
            <td>java开发td>
            <td>待筛选td>
        tr>
        <tr>
            <td>周舟td>
            <td>算法工程师td>
            <td>面试中td>
        tr>
        <tr>
            <td>孙大大td>
            <td>前端开发td>
            <td>三面td>
        tr>
    table>

    <h2>多种表格效果整合在一起：h2>
    <table class="table table-bordered table-striped table-hover table-condensed">
        <thead>
        <th>姓名th>
        <th>岗位th>
        <th>状态th>
        thead>
        <tr>
            <td>张三td>
            <td>前端开发td>
            <td>面试中td>
        tr>
        <tr>
            <td>李四td>
            <td>java开发td>
            <td>待筛选td>
        tr>
        <tr>
            <td>周舟td>
            <td>算法工程师td>
            <td>面试中td>
        tr>
        <tr>
            <td>孙大大td>
            <td>前端开发td>
            <td>三面td>
        tr>
    table>

    <h2>激活样式h2>
    <table class="table">
        <thead>
        <th>姓名th>
        <th>岗位th>
        <th>状态th>
        thead>
        <tr>
            <td>张三td>
            <td>前端开发td>
            <td>面试中td>
        tr>
        <tr>
            <td>李四td>
            <td>java开发td>
            <td>待筛选td>
        tr>
        <tr>
            <td>冯田td>
            <td>前端开发td>
            <td>已回绝td>
        tr>
        <tr>
            <td>周舟td>
            <td>算法工程师td>
            <td>面试中td>
        tr>
        <tr class="active">
            <td>孙大大td>
            <td>前端开发td>
            <td>三面td>
        tr>
        <tr>
            <td>刘萌td>
            <td>数据库工程师td>
            <td>简历待筛选td>
        tr>
    table>

    <h2>成功样式1h2>
    <table class="table">
        <thead>
        <th>姓名th>
        <th>岗位th>
        <th>状态th>
        thead>
        <tr>
            <td>张三td>
            <td>前端开发td>
            <td>面试中td>
        tr>
        <tr>
            <td>李四td>
            <td>java开发td>
            <td>待筛选td>
        tr>
        <tr>
            <td>冯田td>
            <td>前端开发td>
            <td>已回绝td>
        tr>
        <tr>
            <td>周舟td>
            <td>算法工程师td>
            <td>面试中td>
        tr>
        <tr class="success">
            <td>孙大大td>
            <td>前端开发td>
            <td>三面td>
        tr>
        <tr>
            <td>刘萌td>
            <td>数据库工程师td>
            <td>简历待筛选td>
        tr>
    table>
    <h2>成功样式2h2>
    <table class="table">
        <thead>
        <th>姓名th>
        <th>岗位th>
        <th>状态th>
        thead>
        <tr>
            <td>张三td>
            <td>前端开发td>
            <td>面试中td>
        tr>
        <tr>
            <td>李四td>
            <td>java开发td>
            <td>待筛选td>
        tr>
        <tr>
            <td>冯田td>
            <td>前端开发td>
            <td>已回绝td>
        tr>
        <tr>
            <td>周舟td>
            <td>算法工程师td>
            <td>面试中td>
        tr>
        <tr class="alert-success">
            <td>孙大大td>
            <td>前端开发td>
            <td>三面td>
        tr>
        <tr>
            <td>刘萌td>
            <td>数据库工程师td>
            <td>简历待筛选td>
        tr>
    table>

    <h2>信息样式h2>
    <table class="table">
        <thead>
        <th>姓名th>
        <th>岗位th>
        <th>状态th>
        thead>
        <tr>
            <td>张三td>
            <td>前端开发td>
            <td>面试中td>
        tr>
        <tr>
            <td>李四td>
            <td>java开发td>
            <td>待筛选td>
        tr>
        <tr>
            <td>冯田td>
            <td>前端开发td>
            <td>已回绝td>
        tr>
        <tr>
            <td>周舟td>
            <td>算法工程师td>
            <td>面试中td>
        tr>
        <tr class="info">
            <td>孙大大td>
            <td>前端开发td>
            <td>三面td>
        tr>
        <tr>
            <td>刘萌td>
            <td>数据库工程师td>
            <td>简历待筛选td>
        tr>
    table>

    <h2>警告样式h2>
    <table class="table">
        <thead>
        <th>姓名th>
        <th>岗位th>
        <th>状态th>
        thead>
        <tr>
            <td>张三td>
            <td>前端开发td>
            <td>面试中td>
        tr>
        <tr>
            <td>李四td>
            <td>java开发td>
            <td>待筛选td>
        tr>
        <tr>
            <td>冯田td>
            <td>前端开发td>
            <td>已回绝td>
        tr>
        <tr>
            <td>周舟td>
            <td>算法工程师td>
            <td>面试中td>
        tr>
        <tr class="warning">
            <td>孙大大td>
            <td>前端开发td>
            <td>三面td>
        tr>
        <tr>
            <td>刘萌td>
            <td>数据库工程师td>
            <td>简历待筛选td>
        tr>
    table>


    <h2>危险样式h2>
    <table class="table">
        <thead>
        <th>姓名th>
        <th>岗位th>
        <th>状态th>
        thead>
        <tr>
            <td>张三td>
            <td>前端开发td>
            <td>面试中td>
        tr>
        <tr>
            <td>李四td>
            <td>java开发td>
            <td>待筛选td>
        tr>
        <tr>
            <td>冯田td>
            <td>前端开发td>
            <td>已回绝td>
        tr>
        <tr>
            <td>周舟td>
            <td>算法工程师td>
            <td>面试中td>
        tr>
        <tr class="alert-danger">
            <td>孙大大td>
            <td>前端开发td>
            <td>三面td>
        tr>
        <tr>
            <td>刘萌td>
            <td>数据库工程师td>
            <td>简历待筛选td>
        tr>
    table>


div>

body>
html>

BootStrap一页通（样式+组件+插件）（全）_第2张图片

3. 图片

- 圆角`img-round`
- 圆形`img-circle`
- 缩略图`img-thumbnail`


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本样式之三：图片title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 10px 10px;
        }
        img{
            width: 200px;
            height: 200px;
        }
    style>
head>
<body>
圆角：
<img src="images/tree.JPG" class="img-rounded">
圆形：
<img src="images/tree.JPG" class="img-circle">
缩略图：
<img src="images/tree.JPG" class="img-thumbnail">
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第3张图片

4. 表单

- `form-control`可以去除阴影，边框带有淡蓝色，输入状态更柔和。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本样式之三：表单title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
head>
<body>
<form action="" style="width: 200px; height: 200px; margin-left: 50px;">
    文本框:<input type="text" class="form-control">

    密码:<input type="password" class="form-control">

    <textarea class="form-control" name="t1" id="t1" cols="30" rows="10" placeholder="个人简介">textarea>

    技能：<select class="form-control" name="" id="">
        <option value="">HTMLoption>
        <option value="">CSSoption>
        <option value="">JavaScriptoption>
        <option value="">jQueryoption>
        <option value="">BootStrapoption>
        <option value="">Node.jsoption>
        <option value="">Reactoption>
    select>
form>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第4张图片

5. 文本

- 淡灰色文本`text-muted`
- 强调文本  `text-primary`
- 操作成功文本`text-success`
- 提示信息文本`text-info`
- 警告文本`text-warning`
- 危险操作文本`text-danger`


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本样式之四：文本title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 50px 50px;
        }
    style>
head>
<body>
<div class="text-muted">- 淡灰色文本`text-muted`：常用于说明性文字div>
<div class="text-primary">- 强调文本  `text-primary`：强调行文字div>
<div class="text-success">- 操作成功文本`text-success`：提示成功行为div>
<div class="text-info">- 提示信息文本`text-info`：指导性文字div>
<div class="text-warning">- 警告文本`text-warning`：警告文字div>
<div class="text-danger">- 危险操作文本`text-danger`危险操作，如删除div>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第5张图片

6. 背景

- 强调的背景`bg-primary`
- 操作成功文字的背景`bg-success`
- 信息提示文字的背景`bg-info`
- 警告提示文字的背景`bg-warning`
- 危险提示文字的背景`bg-danger`


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本样式之六：背景title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 50px 50px;
        }
        div{
            width: 300px;
            height: 100px;
        }
    style>
head>
<body>
<div class="bg-primary">- 强调的背景`bg-primary`div>
<div class="bg-success">- 操作成功文字的背景`bg-success`div>
<div class="bg-info">- 信息提示文字的背景`bg-info`div>
<div class="bg-warning">- 警告提示文字的背景`bg-warning`div>
<div class="bg-danger">- 危险提示文字的背景`bg-danger`div>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第6张图片

7. 其他

- 关闭按钮`close`
- 下拉菜单的按钮`caret`
- 左浮动`pull-left`
- 右浮动`pull-right`
- 显示`show`
- 隐藏（不占位）`hidden`
- 隐藏（占位）`invisible`


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本样式之七：其他title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 50px 50px;
        }
        div{
            width: 50px;
            height: 50px;
        }
    style>
head>
<body>

<button type="button" class="close">×button>
<select class="caret" name="" id="">
    <option value="">草莓option>
    <option value="">芒果option>
    <option value="">香蕉option>
    <option value="">蓝莓option>
select>
<div>
    <div class="pull-left">左浮动div>
    <div class="pull-right">右浮动div>
div>
<div class="show">显示div>
<div>000div>
<div>111div>
<div class="hidden">隐藏（不占位）222div>
<div>333div>
<div class="invisible">444div>
<div>555div>
<div>666div>

body>
html>

BootStrap一页通（样式+组件+插件）（全）_第7张图片

8. 栅格布局

- 使用Bootstrap的栅格系统，可以实现像table那样的行列效果。
- 使用栅格系统，首先要准备`
`；然后要准备`
`表示行，最后要准备的div就是列。
- Bootstrap的栅格系统默认把一行分成12列。


"en">

    "UTF-8">
    基本样式之八：栅格布局
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    "stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    



container-->row-->col-xs-12

<div class="container">
    <div class="row">
        <div class="col-xs-12">占12列div>
    div>
div>


container-->row-->col-lg-6

<div class="container">
    <div class="row">
        <div class="col-lg-6">占六列div>
        <div class="col-lg-6">占六列div>
    div>
div>


container-->row-->col-sm-6

<div class="container">
    <div class="row">
        <div class="col-sm-6">占六列div>
        <div class="col-sm-6">占六列div>
    div>
div>


container-->row-->col-xs-1

<div class="container">
    <div class="row">
        <div class="col-xs-6">占六列div>
        <div class="col-xs-6">占六列div>
    div>
div>


container-->row-->col-xs-4

<div class="container">
    <div class="row">
        <div class="col-xs-4">占四列div>
        <div class="col-xs-4">占四列div>
        <div class="col-xs-4">占四列div>
    div>
div>


container-->row-->col-sm-3

<div class="container">
    <div class="row">
        <div class="col-sm-3">占三列div>
        <div class="col-sm-3">占三列div>
        <div class="col-sm-3">占三列div>
        <div class="col-sm-3">占三列div>
    div>
div>


container-->row-->col-xs-1

<div class="container">
    <div class="row">
        <div class="col-xs-1">占一列div>
        <div class="col-xs-1">占一列div>
        <div class="col-xs-1">占一列div>
        <div class="col-xs-1">占一列div>
        <div class="col-xs-1">占一列div>
        <div class="col-xs-1">占一列div>
        <div class="col-xs-1">占一列div>
        <div class="col-xs-1">占一列div>
        <div class="col-xs-1">占一列div>
        <div class="col-xs-1">占一列div>
        <div class="col-xs-1">占一列div>
        <div class="col-xs-1">占一列div>
    div>
div>


container-->row-->col-sm-8/5

<div class="container">
    <div class="row">
        <div class="col-sm-8">占八列div>
        <div class="col-sm-5">占五列div>
    div>
div>

BootStrap一页通（样式+组件+插件）（全）_第8张图片

———-

组件

1. 字体图标

  • 一个字体图标
  • 字体图标设置颜色
  • 字体图标上加超链接 连接
  • 在button上使用字体图标
  • 更多字体图标（详见所有的bootstrap字体图标）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之一：字体图标title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
head>
<body>
<h2>一个字体图标h2>
<span class="glyphicon glyphicon-asterisk">span>
<h2>字体图标设颜色h2>
<span class="glyphicon glyphicon-asterisk text-success">span>
<h2>字体图标上加超链接h2>
<a href="#"><span class="glyphicon glyphicon-asterisk">span>超链接a>
<h2>在button上使用字体图标h2>
<button class="btn btn-primary btn"><span class="glyphicon glyphicon-asterisk">span>按钮button>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第9张图片

2. 下拉菜单

  • 下拉菜单
  • 标题不可以点击
  • 分割线
  • 禁用项

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之二：下拉菜单title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
head>
<body>
<h3>下拉菜单h3>
<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
        Hello
        <span class="caret">span>
    button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li>
            <a href="#">111a>
        li>
        <li role="presentation">
            <a href="#">222a>
        li>
        <li role="presentation">
            <a href="#">333a>
        li>
        <li role="presentation">
            <a href="#">444a>
        li>
    ul>
div>

<h3>标题不可点击h3>

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown">
        Hello
        <span class="caret">span>
    button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-header">
            1-2标题（不可点击）
        li>
        <li>
            <a href="#">111a>
        li>
        <li role="presentation">
            <a href="#">222a>
        li>
        <li class="dropdown-header">
            3-4标题（不可点击）
        li>
        <li role="presentation">
            <a href="#">333a>
        li>
        <li role="presentation">
            <a href="#">444a>
        li>
    ul>
div>

<h3>菜单分割线h3>

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu3" data-toggle="dropdown">
        Hello
        <span class="caret">span>
    button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-header">
            1-2标题（不可点击）
        li>
        <li>
            <a href="#">111a>
        li>
        <li role="presentation">
            <a href="#">222a>
        li>
        
        <li role="presentation" class="divider">li>
        <li class="dropdown-header">
            3-4标题（不可点击）
        li>
        <li role="presentation">
            <a href="#">333a>
        li>
        <li role="presentation">
            <a href="#">444a>
        li>
    ul>
div>

<h3>禁用的菜单项h3>

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu4" data-toggle="dropdown">
        Hello
        <span class="caret">span>
    button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li class="dropdown-header">
            1-2标题（不可点击）
        li>
        <li>
            <a href="#">111a>
        li>
        <li role="presentation">
            <a href="#">222a>
        li>
        <li class="divider">li>
        <li class="dropdown-header">
            3-4标题（不可点击）
        li>
        <li role="presentation">
            <a href="#">333a>
        li>
        <li role="presentation" class="disabled">
            <a href="#">444(开发中)a>
        li>
    ul>
div>

<div style="height: 100px;">div>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第10张图片

3. 按钮

  • 按钮组
  • 按钮工具栏
  • 按钮组大小
  • 垂直排列的按钮组
  • 复选框按钮组
  • 单选框按钮组

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之三：按钮组title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
head>
head>
<body>

<h3>按钮组h3>
<div class="btn-button" role="group" arial-label="web">
    <button type="button" class="btn btn-default">老大button>
    <button type="button" class="btn btn-default">老二button>
    <button type="button" class="btn btn-default">老幺button>
div>

<h3>按钮工具栏h3>
<div class="btn-toolbar" role="toolbar" aria-label="Front End">div>
<div class="btn-group" role="group" aria-label="HTML">
    <button type="button" class="btn btn-default">111button>
    <button type="button" class="btn btn-default">222button>
    <button type="button" class="btn btn-default">333button>
div>
<div class="btn-group" role="group" aria-label="CSS">
    <button type="button" class="btn btn-default">111button>
    <button type="button" class="btn btn-default">222button>
    <button type="button" class="btn btn-default">333button>
div>
<div class="btn-group" role="group" aria-label="JS">
    <button type="button" class="btn btn-default">111button>
    <button type="button" class="btn btn-default">222button>
    <button type="button" class="btn btn-default">333button>
div>

<h3>按钮组大小h3>
<div class="btn-group btn-group-lg" role="group" arial-label="web">
    <button type="button" class="btn btn-default">老大button>
    <button type="button" class="btn btn-default">老二button>
    <button type="button" class="btn btn-default">老幺button>
div>
<div class="btn-group btn-group" role="group" arial-label="web">
    <button type="button" class="btn btn-default">老大button>
    <button type="button" class="btn btn-default">老二button>
    <button type="button" class="btn btn-default">老幺button>
div>
<div class="btn-group btn-group-sm" role="group" arial-label="web">
    <button type="button" class="btn btn-default">老大button>
    <button type="button" class="btn btn-default">老二button>
    <button type="button" class="btn btn-default">老幺button>
div>
<div class="btn-group btn-group-xs" role="group" arial-label="web">
    <button type="button" class="btn btn-default">老大button>
    <button type="button" class="btn btn-default">老二button>
    <button type="button" class="btn btn-default">老幺button>
div>

<h3>垂直排列的按钮组h3>
<div class="btn-group-vertical" role="group" aria-label="web">
    <button type="button" class="btn btn-default">老大button>
    <button type="button" class="btn btn-default">老二button>
    <button type="button" class="btn btn-default">老幺button>
div>

<h3>复选框h3>
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <input type="checkbox" checked>老大
    label>
    <label class="btn btn-default">
        <input type="checkbox">老二
    label>
    <label class="btn btn-default">
        <input type="checkbox">老幺
    label>
div>

<h3>单选框h3>
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default active">
        <input type="radio" checked>老大
    label>
    <label class="btn btn-default">
        <input type="radio">老大
    label>
    <label class="btn btn-default">
        <input type="radio">老大
    label>
div>

body>
html>

BootStrap一页通（样式+组件+插件）（全）_第11张图片

4. 按钮式下拉菜单

  • 单按钮下拉菜单
  • 分裂式按钮下拉菜单
  • 按钮大小
  • 向上弹出式菜单

<html>

<head>
    <title>组件之四：按钮式下拉菜单title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
head>
<body>

<h3>单按钮下拉菜单h3>
其中：btn-default/btn-primary/btn-success/btn-info/btn-warning/btn-danger(此处只列出了btn-primary)
<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle "  data-toggle="dropdown">
        primary
        <span class="caret">span>
    button>

    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">吃a>
        li>
        <li role="presentation">
            <a href="#">穿a>
        li>

        <li role="presentation">
            <a href="#">住a>
        li>
        <li role="presentation">
            <a href="#">行a>
        li>
    ul>
div>

<h3>分裂式按钮下拉菜单h3>
<div class="btn-group">
    <button type="button" class="btn btn-default">默认button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret">span>

    button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">吃a>
        li>
        <li role="presentation">
            <a href="#">穿a>
        li>

        <li role="presentation">
            <a href="#">住a>
        li>
        <li role="presentation">
            <a href="#">行a>
        li>
    ul>
div>

<h3>按钮大小h3>
其中，btn-lg/btn/btn-sm/btn-xs（此处只列出了btn-lg）
<div class="btn-group">
    <button type="button" class="btn btn-lg btn-default dropdown-toggle " data-toggle="dropdown">
        大号
        <span class="caret">span>
    button>

    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">吃a>
        li>
        <li role="presentation">
            <a href="#">穿a>
        li>

        <li role="presentation">
            <a href="#">住a>
        li>
        <li role="presentation">
            <a href="#">行a>
        li>
    ul>
div>

<h3>向上弹出式菜单h3>
<div class="btn-group dropup">
    <button type="button" class="btn btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
        默认值
        <span class="caret">span>
    button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">吃a>li>
        <li><a href="#">穿a>li>
        <li><a href="#">住a>li>
        <li><a href="#">行a>li>
    ul>

div>

body>
html>

BootStrap一页通（样式+组件+插件）（全）_第12张图片

BootStrap一页通（样式+组件+插件）（全）_第13张图片

BootStrap一页通（样式+组件+插件）（全）_第14张图片

BootStrap一页通（样式+组件+插件）（全）_第15张图片

5. 输入框组

  • 基本组合
  • 尺寸
  • 复选框和单选框
  • 整合按钮
  • 整合下拉菜单

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之五：输入框组title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 300px 300px;
        }
        div{
            margin: 5px;
        }
    style>
head>
<body>

<h3>基本组合h3>
<div class="input-group">
    <span class="input-group-addon" id="basic-addon1">span>
    <input type="text" class="form-control" placeholder="User Name" aria-describedby="basic-arron1">
div>
<div class="input-group">
    <input type="text" class="form-control" placeholder="Mailbox" aria-describedby="basic-arron2">
    <span class="input-group-addon" id="basic-arron2">@163.comspan>
div>
<div class="input-group">
    <span class="input-group-addon">¥span>
    <input type="text" class="form-control" placeholder="Amount" aria-label="Amount">
    <span class="input-group-addon">.00span>
div>

<h3>尺寸h3>
<div class="input-group input-group-lg">
    <span class="input-group-addon" id="basic-addon3">@span>
    <input type="text" class="form-control" placeholder="User Name" aria-describedby="basic-arron3">
div>
<div class="input-group input-group">
    <span class="input-group-addon" id="basic-addon4">@span>
    <input type="text" class="form-control" placeholder="User Name" aria-describedby="basic-arron3">
div>
<div class="input-group input-group-sm">
    <span class="input-group-addon" id="basic-addon5">@span>
    <input type="text" class="form-control" placeholder="User Name" aria-describedby="basic-arron3">
div>

<h3>复选框和单选框h3>
<div class="input-group">
    <span class="input-group-addon">
        <input type="checkbox">
    span>
    <input type="text" class="form-control">
div>
<div class="input-group">
    <span class="input-group-addon">
        <input type="radio">
    span>
    <input type="text" class="form-control">
div>

<h3>整合按钮h3>
<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">百度button>
    span>
    <input type="text" class="form-control" placeholder="Search:">
div>
<div class="input-group">
    <input type="text" class="form-control" placeholder="Search:">
    <span class="input-group-btn">
        <button type="button" class="btn btn-default">Googlebutton>
    span>
div>

<h3>整合下拉菜单h3>
<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown" aria-expanded="false">
            Search Engine<span class="caret">span>
        button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Googlea>li>
            <li><a href="#">Baidua>li>
            <li class="divider">li>
            <li><a href="#">Sogoua>li>
            <li><a href="#">YaHooa>li>
        ul>
    div>
    <input type="text" class="form-control" aria-label="...">
div>
<div class="input-group">
    <input type="text" class="form-control" aria-label="...">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
            Search Engine <span class="caret">span>
        button>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
            <li><a href="#">Googlea>li>
            <li><a href="#">Baidua>li>
            <li class="divider">li>
            <li><a href="#">Sogoua>li>
            <li><a href="#">YaHooa>li>
        ul>
    div>
div>

<h3>h3>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第16张图片

6. 导航栏

  • 标签页
  • 胶囊式标签页
  • 垂直胶囊式标签页
  • 禁用的链接

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之六：导航栏title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 100px 100px;
        }
    style>
head>
<body>

<h3>标签页h3>
<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">本科a>li>
    <li role="presentation"><a href="#">研究生a>li>
    <li role="presentation"><a href="#">博士生a>li>
ul>

<h3>胶囊式标签页h3>
<ul class="nav nav-pills">
    <li role="presentation" class="active"><a href="#">本科a>li>
    <li role="presentation"><a href="#">硕士生a>li>
    <li role="presentation"><a href="#">博士生a>li>
ul>

<h3>垂直胶囊式标签页h3>
<ul class="nav nav-pills nav-stacked" style="width: 100px">
    <li role="presentation" class="active"><a href="#">本科生a>li>
    <li role="presentation"><a href="#">硕士生a>li>
    <li role="presentation"><a href="#">博士生a>li>
ul>

<h3>禁用的标签链接h3>
<ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">本科生a>li>
    <li role="presentation" class="disabled"><a href="#">硕士生a>li>
    <li role="presentation"><a href="#">博士生a>li>
ul>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第17张图片

7. 面包碎屑导航


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之七：面包屑导航title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
head>
<body>
<h3>面包碎屑导航h3>
<ol class="breadcrumb">
    <li><a href="#">本科生a>li>
    <li class="active">硕士生li>
    <li><a href="#">博士生a>li>
ol>

body>
html>

BootStrap一页通（样式+组件+插件）（全）_第18张图片

8. 分页

  • 基本分页
  • 禁用和激活状态
  • 尺寸
  • 翻页
  • 两端对齐
  • 翻页禁用状态

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之八：分页title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 200px 200px ;
            border: 1px solid lightgray;
        }
    style>
head>
<body>

<h3>基本分页h3>
<nav>
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">«span>
            a>
        li>
        <li><a href="#">1a>li>
        <li><a href="#">2a>li>
        <li><a href="#">3a>li>
        <li><a href="#">4a>li>
        <li><a href="#">5a>li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">»span>
            a>
        li>
    ul>
nav>

<h3>禁用和激活状态h3>
<nav>
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">«span>
            a>
        li>
        <li><a href="#">1a>li>
        <li><a href="#">2a>li>
        <li><a href="#">3a>li>
        <li><a href="#">4a>li>
        <li><a href="#">5a>li>
        <li class="disabled">
            <a href="#" aria-label="Next">
                <span aria-hidden="true">»span>
            a>
        li>
    ul>
nav>

<h3>尺寸h3>
<nav>
    <ul class="pagination pagination-lg">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">«span>
            a>
        li>
        <li><a href="#">1a>li>
        <li><a href="#">2a>li>
        <li><a href="#">3a>li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">»span>
            a>
        li>
    ul>
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">«span>
            a>
        li>
        <li><a href="#">1a>li>
        <li><a href="#">2a>li>
        <li><a href="#">3a>li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">»span>
            a>
        li>
    ul>
    <ul class="pagination pagination-sm">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">«span>
            a>
        li>
        <li><a href="#">1a>li>
        <li><a href="#">2a>li>
        <li><a href="#">3a>li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">»span>
            a>
        li>
    ul>
nav>

<h3>翻页h3>
<nav>
    <ul class="pager">
        <li><a href="#">上一页a>li>
        <li><a href="#">此页a>li>
        <li><a href="#">下一页a>li>
    ul>
nav>

<h3>两端对齐h3>
<nav>
    <ul class="pager">
        <li class="previous"><a href="#"><span aria-hidden="true">←span>上一页a>li>
        <li class="next"><a href="#">下一页<span aria-hidden="true">→span>a>li>
    ul>
nav>

<h3>翻页禁用状态h3>
<nav>
    <ul class="pager">
        <li class="disabled"><a href="#">上一页a>li>
        <li><a href="#">下一页a>li>
    ul>
nav>

body>
html>

BootStrap一页通（样式+组件+插件）（全）_第19张图片

9. 标签

  • 默认标签
  • 强调标签
  • 成功标签
  • 信息标签
  • 警告标签
  • 危险标签

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之九：标签title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 100px 100px;
        }
    style>
head>
<body>
<span class="label label-default">默认标签span>
<span class="label label-primary">强调标签span>
<span class="label label-success">成功标签span>
<span class="label label-info">信息标签span>
<span class="label label-warning">警告标签span>
<span class="label label-danger">危险标签span>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第20张图片

10. 消息提示数字

  • 超链接旁的消息数提示
  • 按钮中的消息数提示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之十：消息数提示title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 100px 100px;
        }
    style>
head>
<body>

<h3>超链接旁的消息数提示h3>
<a href="#">您的消息 <span class="badge">24span>a>

<h3>按钮中的消息数提示h3>
<button class="btn btn-warning" type="button">新短消息 <span class="badge">6span>button>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第21张图片

11. 超大屏幕

  • jumbotron
  • [‘dʒʌmbəutrɔn]
  • n. 电视机的超大屏幕 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之十一：超大屏幕title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
head>
<body>



<div class="jumbotron">
    <div class="container" align="center">
        <h2 class="text-info" style="font-family: 宋体; font-weight: bold; font-size: 46px;">小小酥h2>
        <br>
        <div class="text-muted">向这个世界，说出你的生活div>
        <br>
        <p><a href="#" role="button" class="btn btn-success">加入我们a>p>
    div>
div>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第22张图片

12. 副标题

  • class='page-header'
  • 正副标题下面会有一条分割线

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之十二：副标题title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
head>
<body>
<div class="page-header">
    <h1>正标题 <small>副标题small>h1>
div>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第23张图片

13. 缩略图

  • 相册风格
  • 自定义内容

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之十三：缩略图title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        img{
            width: 120px;
            height: 120px;
        }
    style>
head>
<body>
<h3>相册风格缩略图h3>
<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <a href="#" class="thumbnail"><img src="images/xd.png">a>
        div>
        <div class="col-xs-4">
            <a href="#" class="thumbnail"><img src="images/tree.JPG">a>
        div>
        <div class="col-xs-4">
            <a href="#" class="thumbnail"><img src="images/xdsay.png">a>
        div>
    div>
div>

<h3>自定义缩略图h3>
<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <a href="#" class="thumbnail"><img src="images/xd.png">a>
            <div class="caption">
                <div class="text-muted">熊顿小样div>
                <br>
                <p><a href="#" class="btn btn-primary" role="button">收藏a>p>
            div>
        div>
        <div class="col-xs-4">
            <a href="#" class="thumbnail"><img src="images/tree.JPG">a>
            <div class="caption">
                <div class="text-muted">小小树苗div>
                <a href="#" class="btn btn-success" role="button">收藏a>
            div>
        div>
        <div class="col-xs-4">
            <a href="#" class="thumbnail"><img src="images/xdsay.png">a>
            <div class="caption">
                <div class="text-muted">熊顿言之div>
                <a href="#" class="btn btn-danger" role="button">收藏a>
            div>
        div>
    div>
div>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第24张图片

14. 警告

  • 警告框
  • 可关闭的警告框
  • 警告框中的的超链接

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之十四：警告title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 100px 100px;
        }
    style>
head>
<body>
<h3>警告框h3>
<div class="alert alert-success" role="alert">操作成功div>
<div class="alert alert-info" role="alert">消息提示div>
<div class="alert alert-warning" role="alert">警告提示div>
<div class="alert alert-danger" role="alert">危险提示div>

<h3>可关闭的警告框h3>
<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>
    请关闭
div>

<h3>警告中的超链接h3>
<div class="alert alert-success" role="alert">
    <span>重磅消息！！span><a href="#nowhere" class="alert-link">点击查看a>
div>
<div class="alert alert-primary" role="alert">
    <span>重磅消息！！span><a href="#nowhere" class="alert-link">点击查看a>
div>
<div class="alert alert-info">
    <span>重磅消息！！span><a href="#nowhere" class="alert-link">点击查看a>
div>
<div class="alert alert-danger" role="alert">
    <span>重磅消息！！span><a href="#nowhere" class="alert-link">点击查看a>
div>

body>
html>

BootStrap一页通（样式+组件+插件）（全）_第25张图片

15. 进度条

  • 基本进度条
  • 带提示的进度条
  • 多彩进度条
  • 条纹进度条
  • 动条纹进度条
  • 堆叠进度条

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之十五：进度条title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 100px 100px;
        }
    style>
head>
<body>

<h3>基本进度条h3>
<div class="progress">
    <div class="progress-bar" style="width: 80%;">div>
div>

<h3>带提示的进度条h3>
<div class="progress">
    <div class="progress-bar" style="width: 30%; min-width: 1px;">30%div>
div>
<div class="progress">
    <div class="progress-bar" style="width: 0%;min-width: 2em">0%div>
div>

<h3>多彩进度条h3>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width: 19%;">19%div>
div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width: 36%;">36%div>
div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width: 99%;">99%div>
div>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 100%;">100%div>
div>

<h3>条纹进度条h3>
<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped" style="width: 27%;">27%div>
div>

<h3>动条纹进度条h3>
<div class="progress">
    <div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 69%;">69%div>
div>

<h3>堆叠进度条h3>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width: 19%;">19%div>
    <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 18%;">18%div>
    <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 30%;">30%div>
div>


body>
html>

BootStrap一页通（样式+组件+插件）（全）_第26张图片

16. 列表组

  • 基本列表组
  • 消息提示列表组
  • 链接列表组
  • 按钮列表组
  • 多彩列表组

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之十六：列表组title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 100px 100px;
        }
    style>
head>
<body>

<h3>基本列表组h3>
<ul class="list-group">
    <li class="list-group-item">香草泡芙li>
    <li class="list-group-item">草莓班戟li>
    <li class="list-group-item">拿破仑li>
    <li class="list-group-item">芒果千层li>
ul>

<h3>消息提示列表组h3>
<ul class="list-group">
    <li class="list-group-item"><span class="badge">23span>香草泡芙li>
    <li class="list-group-item">草莓班戟<span class="badge">12span>li>
    <li class="list-group-item"><span class="badge">18span>拿破仑li>
    <li class="list-group-item"><span class="badge">2span>芒果千层li>
ul>

<h3>链接列表组h3>
<div class="list-group">
    <a href="#" class="list-group-item">香草泡芙a>
    <a href="#" class="list-group-item active">草莓班戟a>
    <a href="#" class="list-group-item">拿破仑a>
    <a href="#" class="list-group-item">芒果千层a>
div>

<h3>按钮列表组h3>
<div class="list-group">
    <button type="button" class="list-group-item">香草泡芙button>
    <button type="button" class="list-group-item">草莓班戟button>
    <button type="button" class="list-group-item">拿破仑button>
    <button type="button" class="list-group-item">芒果千层button>
div>


<h3>多彩列表组h3>
<div class="list-group">
    <a href="#" class="list-group-item list-group-item-danger">香草泡芙a>
    <a href="#" class="list-group-item list-group-item-warning">草莓班戟a>
    <a href="#" class="list-group-item list-group-item-success">拿破仑a>
    <a href="#" class="list-group-item list-group-item-info">芒果千层a>
div>


body>
html>

BootStrap一页通（样式+组件+插件）（全）_第27张图片

17. 面板

  • 基本面板
  • 面板标题
  • 面板脚注
  • 彩色面板

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之十七：面板title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 100px 100px;
        }
    style>
head>
<body>
<h3>基本面板h3>
<div class="panel panel-default">
    <div class="panel-body">面板内容div>
div>

<h3>面板标题h3>
<div class="panel panel-default">
    <div class="panel-heading">面板标题div>
    <div class="panel-body">面板内容div>
div>

<h3>面板脚注h3>
<div class="panel panel-default">
    <div class="panel-body">面板内容div>
    <div class="panel-footer">面板脚注div>
div>

<h3>彩色面板h3>
panel-success\panel-warning\panel-danger\panel-info
<div class="panel panel-info">
    <div class="panel-heading">面板标题div>
    <div class="panel-body">面板内容div>
    <div class="panel-footer">面板脚注div>
div>

body>
html>

BootStrap一页通（样式+组件+插件）（全）_第28张图片

18. 潜入效果

  • 文字嵌入效果

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之十八：嵌入效果title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 100px 100px;
        }
    style>
head>
<body>
<h3>嵌入文字的效果h3>
<div class="well">文字嵌入效果div>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第29张图片

19. 头部尾部菜单

  • 贴在头部（不消失）
  • 贴在头部（会消失）
  • 贴在尾部（不消失）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件之十九：头部尾部title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 100px 100px;
        }
    style>
head>
<body>
<h3>头部（不消失）h3>
<nav class="navbar navbar-default navbar-fixed-top">
    <button class="btn btn-info">本科生button>
    <button class="btn btn-warning">研究生button>
    <button class="btn bg-danger">博士生button>
nav>
<div style="white-space: pre;">
    此处省去一亿字。。。
    此处省去一亿字。。。
    此处省去一亿字。。。
    此处省去一亿字。。。
    此处省去一亿字。。。
    此处省去一亿字。。。
    此处省去一亿字。。。


div>

<h3>头部（会消失）h3>
<nav class="navbar navbar-default navbar-static-top">
    <button class="btn btn-warning">小学生button>
    <button class="btn btn-primary">初中生button>
    <button class="btn btn-danger">高中生button>
nav>
<div style="white-space: pre;">
    此处省去一亿字。。。
    此处省去一亿字。。。
    此处省去一亿字。。。
    此处省去一亿字。。。
    此处省去一亿字。。。

div>

<h3>尾部（不消失）h3>
<div class="navbar navbar-default navbar-fixed-bottom"><div align="center">底部相关信息div>div>

body>
html>

BootStrap一页通（样式+组件+插件）（全）_第30张图片

———-

插件

1. 模态窗体

  • 静态模态窗口
  • 点击弹出
  • 无动画效果
  • 点击空白处不收起
  • 使用JS控制模态窗口
  • 监听模态的变化
  • modal

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插件之一：模态窗口title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
head>
<body>
<h3>静态模态窗口h3>
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button data-dismiss="modal" class="close" type="button">
                <span aria-hidden="true">×span>
                <span class="sr-only">Closespan>
            button>
            <h4 class="modal-title">留言板h4>
        div>
        <div class="modal-body">
            <p>留言内容p>
            <textarea class="form-control">textarea>
        div>
        <div class="modal-footer">
            <button data-dismiss="modal" class="btn btn-default">取消button>
            <button data-dismiss="modal" class="btn btn-primary">发表button>
        div>
    div>
div>

<h3>点击弹出窗口h3>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">我要留言button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <div class="modal-header">
                <button data-dismiss="madal" class="close" type="button">
                    <span aria-hidden="true">×span>
                    <span class="sr-only">Closespan>
                button>
                <h4>留言板h4>
            div>
            
            <div class="modal-body">
                <p>留言内容p>
                <textarea class="form-control">textarea>
            div>
            
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">取消button>
                <button class="btn btn-primary" type="button">确定button>
            div>
        div>
    div>
div>


<h3>不要动画效果地弹出h3>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">我要留言button>

<div class="modal" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
    <div class="modal-dialog">
        <div class="modal-content">
            
            <div class="modal-header">
                <button data-dismiss="modal" class="close" type="button">
                    <span aria-hidden="true">×span>
                    <span class="sr-only">Closespan>
                button>
                <h4>我要留言h4>
            div>
            
            <div class="modal-body">
                <p>留言内容：p>
                <textarea class="form-control">textarea>
            div>
            
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">取消button>
                <button class="btn btn-success" type="button">提交button>
            div>
        div>
    div>
div>

<h3>点击空白不会收起h3>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">留言板button>
<div class="modal fade" id="myModal2" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button data-dismiss="modal" class="close" type="button">
                    <span aria-hidden="true">×span>
                    <span class="sr-only">Closespan>
                button>
            div>
            <div class="modal-body">
                <p>留言内容p>
                <textarea class="form-control">textarea>
            div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">取消button>
                <button class="btn btn-primary" type="button">确定button>
            div>
        div>
    div>
div>

body>
html>

BootStrap一页通（样式+组件+插件）（全）_第31张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插件之一：模态窗口title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <script>
        $(function () {
            $('#open').click(function () {
                $('#myModal').modal('show');
            });
            $('#close').click(function () {
                $('#myModal').modal('hide');
            });
            $('#toggle').click(function () {
                $('#myModal').modal('toggle');
            })
        })
    script>
head>
<body>

<button class="btn btn-default" id="open">打开模态窗口button>
<button class="btn btn-default" id="close">关闭模态窗口button>
<button class="btn btn-default" id="toggle">切换模态窗口button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button data-dismiss="modal" class="close" type="button">
                    <span aria-hidden="true">×span>
                    <span class="sr-only">Closespan>
                button>
                <h4>我要留言h4>
            div>
            <div class="modal-body">
                <p>留言内容p>
                <textarea class="form-control">textarea>
            div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-default" type="button">取消button>
                <button class="btn btn-danger" id="submit" type="button">确定button>
            div>
        div>
    div>
div>

body>
html>

BootStrap一页通（样式+组件+插件）（全）_第32张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插件之一：模态窗口title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <script>
        $(function () {
            $('#myModal').on('show.bs.modal', function () {
                alert('Start to show');
            });
            $('#myModal').on('shown.bs.modal', function () {
                alert('Finished show');
            });
            $('#myModal').on('hide.bs.modal', function () {
                alert('Start to hide');
            });
            $('#myModal').on('hidden.bs.modal', function () {
                alert('Finished hide')
            })
        })
    script>
head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击留言button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="media-header">
                <button data-dismiss="modal" class="close" type="button">
                    <span aria-hidden="true">×span>
                    <span class="sr-only">Closespan>
                button>
                <h4>留言板h4>
            div>
            <div class="modal-body">
                <p>留言内容p>
                <textarea class="form-control">textarea>
            div>
            <div class="modal-footer">
                <button data-dismiss="modal" class="btn btn-primary" type="button">取消button>
                <button class="btn btn-success" type="button">确定button>
            div>
        div>
    div>
div>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第33张图片
BootStrap一页通（样式+组件+插件）（全）_第34张图片
BootStrap一页通（样式+组件+插件）（全）_第35张图片
BootStrap一页通（样式+组件+插件）（全）_第36张图片

2. 可切换导航栏

  • 可切换导航栏

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插件之二：可切换导航栏title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        p{
            margin-top: 10px;
            margin-left: 10px;
        }
        img{
            width: 300px;
            height: 300px;
        }
    style>
head>
<body>
<ul id="myTab" class="nav nav-tabs">
    <li class="active">
        <a href="#mango" data-toggle="tab">芒果屋a>
    li>
    <li><a href="#berries" data-toggle="tab">草莓屋a>li>
    <li><a href="#passionFruit" data-toggle="tab">百香果屋a>li>
    <li class="dropdown">
        <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">
            其他水果屋
            <b class="caret">b>
        a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
            <li><a href="#apple" tabindex="-1" data-toggle="tab">苹果屋a>li>
            <li><a href="#pear" tabindex="-1" data-toggle="tab">香蕉屋a>li>

        ul>
    li>
ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="mango">
        <p>芒果。。。。。。。。。。。。。。。。。。。。。。。。。。。p>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992889981&di=1400fed5d8f35b99515f91411b9ba788&imgtype=0&src=http%3A%2F%2Fwww.showlive.cn%2Fcollection%2FInfo20150624%2F220029100942.jpg">
    div>
    <div class="tab-pane fade" id="berries">
        <p>草莓。。。。。。。。。。。。。。。。。。。。。。。。。。。p>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992785682&di=fdff5fa35be820ef6e9ba15b9b48ae20&imgtype=0&src=http%3A%2F%2Fimg2.xiukee.com%2Fupload%2F2015%2F5%2F21%2F205780034.jpg%40100q.jpg">
    div>
    <div class="tab-pane fade" id="passionFruit">
        <p>百香果。。。。。。。。。。。。。。。。。。。。。。。。。。p>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992825786&di=f6a95f6dd88edd4f57b4f0c12369eeca&imgtype=0&src=http%3A%2F%2Fs16.sinaimg.cn%2Fbmiddle%2F002hzK4pty6NIILSXef9f%26690">
    div>
    <div class="tab-pane fade" id="apple">
        <p>苹果。。。。。。。。。。。。。。。。。。。。。。。。。。。p>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992695902&di=1de2619fc945f01bea359e94f236be05&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fblog%2F201405%2F09%2F20140509230410_irnBh.jpeg">
    div>
    <div class="tab-pane fade" id="pear">
        <p>梨子。。。。。。。。。。。。。。。。。。。。。。。。。。。p>
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992953361&di=4f8ffaa3fb56d7503fc2b883c38f9917&imgtype=0&src=http%3A%2F%2Fpic33.nipic.com%2F20130925%2F13620646_085341350000_2.jpg">
    div>
div>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第37张图片

3. 提示工具

  • 非Bootstrap工具提示
  • 左侧提示
  • 右侧提示
  • 上方提示
  • 下方提示
  • tooltip （n. 工具提示；提示信息；提示框；提示文本）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插件之三：提示工具title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>

head>
<body>

<script>
    $(function () {
        $("[data-toggle='tooltip']").tooltip();
    })
script>

<h3>非Bootstrap工具提示h3>
<button class="btn btn-default" title="提示信息">非Bootstrap工具提示button>

<h3>左侧提示信息h3>
<button style="margin-left: 100px" type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="提示信息">
    鼠标悬停左侧提示信息
button>

<h3>右侧提示信息h3>
<button style="margin-right: 100px;" type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="提示信息">
    鼠标悬停右侧提示信息
button>

<h3>上方提示信息h3>
<button style="margin-top: 60px;" type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="提示信息">
    鼠标悬停上方提示信息
button>

<h3>下方提示信息h3>
<button style="margin-bottom: 60px;" type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="bottom" title="提示信息">
    鼠标悬停下方提示信息
button>

body>
html>

BootStrap一页通（样式+组件+插件）（全）_第38张图片

4. 折叠

  • 基本折叠
  • 面板折叠

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插件之四：折叠title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        div.well{
            margin: 10px;
        }
    style>
head>
<body>

<h3>基本折叠h3>

<a class="btn btn-primary" role="button" data-toggle="collapse" href="#mango" aria-expanded="false" aria-controls="collapseExample">
    Mango
a>0
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#berries" aria-expanded="false" aria-controls="collapseExample">
    Berries
button>
<div class="collapse" id="mango">
    <div class="well">
        芒果是杧果的通俗名（拉丁学名：Mangifera indica L.），
        芒果是一种原产印度的漆树科常绿大乔木，
        叶革质，互生；花小，杂性，黄色或淡黄色，成顶生的圆锥花序。
        核果大，压扁，长5-10厘米，宽3-4.5厘米，成熟时黄色，味甜，果核坚硬。
        芒果为著名热带水果之一，芒果果实含有糖、蛋白质、粗纤维，芒果所含有的维生素A的前体胡萝卜素成分特别高，
        是所有水果中少见的。其次维生素C含量也不低。矿物质、蛋白质、脂肪、糖类等，也是其主要营养成分。
        可制果汁、果酱、罐头、腌渍、酸辣泡菜及芒果奶粉、蜜饯等。
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992889981&di=1400fed5d8f35b99515f91411b9ba788&imgtype=0&src=http%3A%2F%2Fwww.showlive.cn%2Fcollection%2FInfo20150624%2F220029100942.jpg">
    div>
div>
<div class="collapse" id="berries">
    <div class="well">
        草莓（学名：Fragaria × ananassa Duch.），多年生草本，高10-40厘米。
        茎低于叶或近相等，密被开.展黄色柔毛。叶三出，小叶具短柄，质地较厚，倒卵形或菱形，
        上面深绿色，几无毛，下面淡白绿色，疏生毛，沿脉较密；叶柄密被开展黄色柔毛。
        聚伞花序，花序下面具一短柄的小叶；花两性；萼片卵形，比副萼片稍长；
        花瓣白色，近圆形或倒卵椭圆形。聚合果大，宿存萼片直立，紧贴于果实；
        瘦果尖卵形，光滑。花期4-5月，果期6-7月。
        原产南美，中国各地及欧洲等地广为栽培。草莓营养价值高，含有多种营养物质 ，且有保健功效。
        <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992785682&di=fdff5fa35be820ef6e9ba15b9b48ae20&imgtype=0&src=http%3A%2F%2Fimg2.xiukee.com%2Fupload%2F2015%2F5%2F21%2F205780034.jpg%40100q.jpg">
    div>
div>
<div style="height: 100px;">div>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第39张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插件之四：折叠title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
head>
<body>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    
    <div class="panel panel-default">
        
        <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                    Mango
                a>
            h4>
        div>
        
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                芒果。。。。。。。。。。。。。。。。。。。。。
            div>
        div>
    div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                    Berries
                a>
            h4>
        div>
        
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                草莓。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
            div>
        div>
    div>
    
    <div class="panel panel-default">
        
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                    Orange
                a>
            h4>
        div>
        
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                香橙。。。。。。。。。。。。。。。。。。。。。。。。。
            div>
        div>
    div>
div>
body>
html>

BootStrap一页通（样式+组件+插件）（全）_第40张图片

5. 轮播

  • 基本轮播
  • 带标题的轮播
  • 设置轮播的速度
  • 控制轮播的方向
  • carousel ( [‘kærə’sɛl] n. 旋转木马；行李传送带；轮播)
  • indicator ( [‘ɪndɪkeɪtə] n. 指示器；[试剂] 指示剂；[计] 指示符；压力计)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插件之五：轮播title>
    <script src="js/jquery/2.0.0/jquery.min.js">script>
    <link rel="stylesheet" href="css/bootstrap/3.3.6/bootstrap.min.css">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js">script>
    <style>
        body{
            margin: 400px 320px;
            border: 2px solid lightslategrey;
        }
        div.item img{
            width: 90%;
        }
    style>
head>
<body>
<h3>基本轮播h3>
<div id="carousel-example-generic1" class="carousel slide" data-ride="carousel">
    
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic1" data-slide-to="0" class="active">li>
        <li data-target="#carousel-example-generic1" data-slide-to="1">li>
        <li data-target="#carousel-example-generic1" data-slide-to="2">li>
        <li data-target="#carousel-example-generic1" data-slide-to="3">li>
    ol>
    
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992785682&di=fdff5fa35be820ef6e9ba15b9b48ae20&imgtype=0&src=http%3A%2F%2Fimg2.xiukee.com%2Fupload%2F2015%2F5%2F21%2F205780034.jpg%40100q.jpg">
        div>
        <div class="item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992825786&di=f6a95f6dd88edd4f57b4f0c12369eeca&imgtype=0&src=http%3A%2F%2Fs16.sinaimg.cn%2Fbmiddle%2F002hzK4pty6NIILSXef9f%26690">
        div>
        <div class="item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992695902&di=1de2619fc945f01bea359e94f236be05&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fblog%2F201405%2F09%2F20140509230410_irnBh.jpeg">
        div>
        <div class="item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992953361&di=4f8ffaa3fb56d7503fc2b883c38f9917&imgtype=0&src=http%3A%2F%2Fpic33.nipic.com%2F20130925%2F13620646_085341350000_2.jpg">
        div>
    div>
div>

<h3>带标题的轮播h3>
<div id="carousel-example-generic2" class="carousel slide" data-ride="carousel">
    
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic2" data-slide-to="0" class="active">li>
        <li data-target="#carousel-example-generic2" data-slide-to="1">li>
        <li data-target="#carousel-example-generic2" data-slide-to="2">li>
        <li data-target="#carousel-example-generic2" data-slide-to="3">li>
    ol>
    
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992785682&di=fdff5fa35be820ef6e9ba15b9b48ae20&imgtype=0&src=http%3A%2F%2Fimg2.xiukee.com%2Fupload%2F2015%2F5%2F21%2F205780034.jpg%40100q.jpg">
            <div class="carousel-caption">草莓div>
        div>
        <div class="item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992825786&di=f6a95f6dd88edd4f57b4f0c12369eeca&imgtype=0&src=http%3A%2F%2Fs16.sinaimg.cn%2Fbmiddle%2F002hzK4pty6NIILSXef9f%26690">
            <div class="carousel-caption">百香果div>
        div>
        <div class="item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992695902&di=1de2619fc945f01bea359e94f236be05&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fblog%2F201405%2F09%2F20140509230410_irnBh.jpeg">
            <div class="carousel-caption">苹果div>
        div>
        <div class="item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992953361&di=4f8ffaa3fb56d7503fc2b883c38f9917&imgtype=0&src=http%3A%2F%2Fpic33.nipic.com%2F20130925%2F13620646_085341350000_2.jpg">
            <div class="carousel-caption">梨子div>
        div>
    div>
div>

<h3>设置轮播的速度h3>
<div id="carousel-example-generic3" class="carousel slide" data-ride="carousel" data-interval="800">
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic3" data-slide-to="0" class="active">li>
        <li data-target="#carousel-example-generic3" data-slide-to="1">li>
        <li data-target="#carousel-example-generic3" data-slide-to="2">li>
        <li data-target="#carousel-example-generic3" data-slide-to="3">li>
    ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992785682&di=fdff5fa35be820ef6e9ba15b9b48ae20&imgtype=0&src=http%3A%2F%2Fimg2.xiukee.com%2Fupload%2F2015%2F5%2F21%2F205780034.jpg%40100q.jpg">
            <div class="carousel-caption">草莓div>
        div>
        <div class="item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992825786&di=f6a95f6dd88edd4f57b4f0c12369eeca&imgtype=0&src=http%3A%2F%2Fs16.sinaimg.cn%2Fbmiddle%2F002hzK4pty6NIILSXef9f%26690">
            <div class="carousel-caption">百香果div>
        div>
        <div class="item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992695902&di=1de2619fc945f01bea359e94f236be05&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fblog%2F201405%2F09%2F20140509230410_irnBh.jpeg">
            <div class="carousel-caption">苹果div>
        div>
        <div class="item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992953361&di=4f8ffaa3fb56d7503fc2b883c38f9917&imgtype=0&src=http%3A%2F%2Fpic33.nipic.com%2F20130925%2F13620646_085341350000_2.jpg">
            <div class="carousel-caption">梨子div>
        div>
    div>
div>

<h3>控制轮播的方向h3>
<div id="carousel-example-generic4" class="carousel slide" data-ride="carousel">
    
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic4" data-slide-to="0" class="active">li>
        <li data-target="#carousel-example-generic4" data-slide-to="1">li>
        <li data-target="#carousel-example-generic4" data-slide-to="2">li>
        <li data-target="#carousel-example-generic4" data-slide-to="3">li>
    ol>
    
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992785682&di=fdff5fa35be820ef6e9ba15b9b48ae20&imgtype=0&src=http%3A%2F%2Fimg2.xiukee.com%2Fupload%2F2015%2F5%2F21%2F205780034.jpg%40100q.jpg">
            <div class="carousel-caption">草莓div>
        div>
        <div class="item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992825786&di=f6a95f6dd88edd4f57b4f0c12369eeca&imgtype=0&src=http%3A%2F%2Fs16.sinaimg.cn%2Fbmiddle%2F002hzK4pty6NIILSXef9f%26690">
            <div class="carousel-caption">百香果div>
        div>
        <div class="item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992695902&di=1de2619fc945f01bea359e94f236be05&imgtype=0&src=http%3A%2F%2Fimg5q.duitang.com%2Fuploads%2Fblog%2F201405%2F09%2F20140509230410_irnBh.jpeg">
            <div class="carousel-caption">苹果div>
        div>
        <div class="item">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489992953361&di=4f8ffaa3fb56d7503fc2b883c38f9917&imgtype=0&src=http%3A%2F%2Fpic33.nipic.com%2F20130925%2F13620646_085341350000_2.jpg">
            <div class="carousel-caption">梨子div>
        div>
    div>
    <a class="left carousel-control" href="#carousel-example-generic4" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">span>
    a>
    <a class="right carousel-control" href="#carousel-example-generic4" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">span>
    a>
div>


body>
html>

BootStrap一页通（样式+组件+插件）（全）_第41张图片

———-

你可能感兴趣的:(Bootstrap)

  • 思科路由器交换机密码破解过程详解 zhane_hao
    路由启动过程加电自检(POST)加载bootstrap代码检查配置寄存器寻找CiscoIOS加载CiscoIOS寻找配置文件加载配置文件若没有配置文件，进入Setup模式，进行初始化配置运行路由器操作系统查看命令•showversion：检查配置寄存器的值,硬件配置,IOS版本•showflash：检查Flash中的IOS,或是flash大小,使用情况(占用多少,剩下多少)•showstartup
  • Kafka系列之：kafka命令详细总结 快乐骑行^_^ 日常分享专栏KafkaKafka系列kafka命令详细总结
    Kafka系列之：kafka命令详细总结一、添加和删除topic二、修改topic三、平衡领导者四、检查消费者位置五、管理消费者群体一、添加和删除topicbin/kafka-topics.sh--bootstrap-serverbroker_host:port--create--topicmy_topic_name\--partitions20--replication-factor3--con
  • html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法 RemusrickCat
    本文实例为大家全面的解析了Bootstrap中Carousel的使用方法，供大家参考，具体内容如下源码文件：Carousel.scssCarousel.js实现原理：隐藏所有要显示的元素，然后指定当前要显示的为block，宽、高自适应源码分析：1、Html结构：主要分为以四个部分1.1、容器：最外层div，需要一个data-ride=”carousel”来指定为轮播放插件，并且提供一个Id，方便圆
  • 移动WEB开发（第四天）__响应式布局 加蓓努力我先飞 5.移动web开发资料前端
    移动WEB开发（第四天）__响应式布局移动端WEB开发之响应式布局1.0响应式开发原理1.1响应式开发原理1.2响应式布局容器2.0bootstrap的介绍2.1Bootstrap简介2.2bootstrap优点2.3版本简介2.4bootstrap基本使用2.5bootstrap布局容器2.6bootstrap栅格系统3.0阿里百秀案例制作3.1技术选型移动端WEB开发之响应式布局1.0响应式开
  • css 个人喜欢的样式 速查笔记 waterHBO css笔记前端
    起因，目的:记录自己喜欢的，觉得比较好看的css.下次用的时候，直接复制，很方便。1.个人html模板，导入常用的link设置英语字体:Noto导入默认的css使用网络icon图标导入Bootstrapcss框架html-->2.常用css模板todo,以后再增加。*{font-family:"NotoSerif",system-ui;font-optical-sizing:auto;}Noto字
  • (代码可运行)Bootstrap框架的HTML示例 程序员大侠 前端CSShtmlbootstrap前端
    Bootstrap：一套流行的前端开发框架，基于HTML、CSS和JavaScript，适用于快速构建响应式Web应用。以下是一个使用Bootstrap构建的简单响应式Web应用的HTML示例：BootstrapExampleHello,Bootstrap!CardtitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthe
  • bootstrap直接对form表进行校验 IT和金融
    form表单可以前端进行校验，当然也可以直接采用bootstrap对form表单进行校验如form表单中有等相关字段进行校验，可直接用bootstrap的校验，方式如下：$("#auth_add_form").bootstrapValidator({//auth_add_form为form的id值feedbackIcons:{valid:'glyphiconglyphicon-ok',invali
  • node模块 weiweiweb888 前端javascriptbootstrap
    模块系统模块化介绍传统开发的问题随着项目的扩大，然后代码就越来越庞大，如果没有很好的规划，后期维护非常复杂（甚至就维护不了）。比如：前端html中有很多特效会依赖js文件。比如：index.html:bootstrap以上就是一个依赖关系，bootstrap依赖于jquery。先引入jquery后引入bootstrap。而且随着项目的扩大，我们的html页面也就随之增加，并且每一个html页面都会
  • mirantis OpenStack9.0在virtualbox上的部署 Caroline_33 openstackmirantisvirtualbox
    实验环境安装包-VirtualBox-4.3.12-93733-Win.exe-Oracle_VM_VirtualBox_Extension_Pack-5.1.2-108956.vbox-extpack-Mirantis_Openstack9.0.iso-bootstrap.zip-mirrors.zip-xtfp-xshell实验机器-cpu:i3-3220以上-Ram:至少8G说明-保证内存至
  • es遇到的问题 云帆@ elasticsearchelasticsearch
    一、目录ERROR:[1]bootstrapchecksfailed.Youmustaddressthepointsdescribedinthefollowing[1]linesbeforestartingElasticsearch.ERROR:Elasticsearchexitedunexpectedly,withexitcode78二、实现ERROR:[1]bootstrapchecksfai
  • JS基础-ClassList -移动端插件的引入-touch事件-sessionStorage 和 localStorage 垦利不 javascript开发语言ecmascript
    目录1.classList属性添加类删除类切换类检查类是否存在替换类移动端touch事件2.消除点击延迟Fastclick插件的引入引入FastClick初始化3.Swiper插件的引入和使用通过CDN引入通过npm安装（vue中建议）使用SwiperHTML结构初始化Swiper4.zyMedia插件简介4.1下载与引入4.2使用4.3js初始化4.4参数说明5.bootstrap的安装和使用5
  • 前端框架有哪些？ 赎罪゛ 前端框架前端javascript
    熟悉掌握HTML、服务器端脚本语言、CSS和JavaScript之后，学习Web框架可以加快Web开发速度，节约时间。PHP程序员可选的框架包括CakePHP、CodeIgniter、Zend等，Python程序员喜欢使用Django和webpy，Ruby程序员常用RoR。随着Web越来越规范和标准的统一，Web组件化技术不断革新，移动端开发不断升华，以下是一些常见开源前端框架：Bootstrap
  • CoreUI免费Laravel管理模板安装与使用指南 皮静滢Annette
    CoreUI免费Laravel管理模板安装与使用指南coreui-free-laravel-admin-templateCoreUIFreeLaravelBootstrapAdminTemplate项目地址:https://gitcode.com/gh_mirrors/co/coreui-free-laravel-admin-template1.项目目录结构及介绍CoreUI免费Laravel管理
  • 81.MySQL-PXC高可用集群 戒掉贪嗔痴(薛双奇) 数据库运维-MySQLmysql数据库
    1.第一个节点启动。Linux7:my.cnf文件需要拷贝到：/etc/my.cnf(非常重要)[root@mysql51~]#mysqlpxcbootstrap-pxcBootstrappingPXC(PerconaXtraDBCluster)InitializingMySQ[OK]se:StartingMySQL(PerconaXtraDBCluster)..[OK]当前集群只有一个节点。my
  • 如何查看当前的gruop_id 的kafka 消费情况 这个可以查看到是否存在消费阻塞问题 树下水月 kafka分布式
    如何查看当前的gruop_id的kafka消费情况这个可以查看到是否存在消费阻塞问题命令如下:/kafka/bin/kafka-consumer-groups.sh--bootstrap-server127.0.0.1:9092--groupGWW --describe其中127.0.0.1为zookeeper服务器ipGWW为对应要查看的group_id如下图所示:运行这个命令后，Kafka会返
  • **脑图制作的Bootstrap Bundle项目指南** 潘惟妍
    脑图制作的BootstrapBundle项目指南bootstrap-bundleBraincraftedBootstrapBundleintegratesBootstrapintoSymfony2byprovidingtemplates,Twigextensions,servicesandcommands.项目地址:https://gitcode.com/gh_mirrors/bo/bootstr
  • linux的webkit桌面应用,使用node-webkit构建桌面应用程序 萌萌爱恋
    Web前端的现状目前的Web前端的现状较之5-6年前，简直不能同日而语：从所使用的技术、工具、框架到开发一个产品所需要付出的工作量，从前端开发从业人员的数量到Web应用的数量，从企业对于Web前端的重要程度的认识到Web实际上为企业带来的回报，一切都有了翻天覆地的变化。借助HTML5+CSS3的普及，加上一些开箱即用的CSS框架(如bootstrap，foundation等)支持，人们已经可以非常
  • bootstrap 列表 SkTj
    有序列表:olli无序列表：ulli不定义样式：ulclass="list-unstyled"横向显示：ulclass="list-inline"dtdddlclass="dl-horizontal"dtddimage.pngBootstrap实例-列表有序列表Item1Item2Item3Item4无序列表Item1Item2Item3Item4未定义样式列表Item1Item2Item3Ite
  • 前端框架有哪些？以及每种框架的详细介绍 cesske 前端框架
    目录前言1.React2.Vue.js3.Angular4.Bootstrap5.Foundation总结前言前端框架是Web开发中不可或缺的工具，它们为开发者提供了丰富的工具和抽象，使得构建复杂的Web应用变得更加容易。当前，前端框架种类繁多，其中一些最受欢迎的框架包括React、Vue.js、Angular、Bootstrap和Foundation等。以下是对这些框架的简要介绍：提示：以下是本
  • logstash 墨咖 logstash中间件服务器运维
    kafkainput{kafka{bootstrap_servers=>"127.0.0.1:9092"topics=>["SCHOOL_AQDL"]group_id=>"logstash-group"consumer_threads=>3codec=>"json"}}sysloginput{syslog{port=>12345codec=>cefsyslog_field=>"syslog"gro
  • springboot集成Kafka Maruko310 javaKafkakafkaspringbootjava
    yml配置如果下游的数据处理不及时，可以提高每批次拉取的数量，配置时不仅要设置max-poll-records属性（批量消费最大数量），也要将type设置为batch（默认single（单条），batch（批量）），不然会报类型无法转换的错误。kafka:#kafka的连接地址（注意，是kafka所在服务器的公网ip，不要写成zookeeper的了）bootstrap-servers:localh
  • Kafka~Kafka命令行参数使用教程 飞Link 大数据kafkazookeeper分布式
    一、kafka-topics.sh1.参数参数描述–bootstrap-server连接的KafkaBroker主机名称和端口号–topic操作的topic名称–create创建主题–delete删除主题–alter修改主题–list查看所有主题–describe查看主题详细描述–partition设置分区数–replication-factor设置分区副本–config更新系统默认的配置2.实例
  • kafka ---- producer与broker配置详解以及ack机制详解 husterlichf #kafkakafkajava分布式
    一、producer配置1、bootstrap.serverskafkabroker集群的ip列表，格式为：host1:port1,host2:port2,…2、client.id用于追踪消息的源头3、retries当发送失败时客户端会进行重试，重试的次数由retries指定，默认值是2147483647，即Integer.MAX_VALUE；在重试次数耗尽和delivery.timeout.ms
  • 前端框架大盘点 HITZXL 前端开发#VUE前端框架前端javascript
    最近项目中用到了很多前后端分离的框架。很多框架虽然类似，但项目中却总用混用的情况，看到陌生的框架，总是一头雾水，干脆来个大盘点。一扫心中困惑。目前对于前端的各种技术，还有很多理解不到的地方。例如前端框架，前端组件，UI库，这些总感觉有些傻傻分不清楚。毕竟都是用来协助项目快速开发和上手的，因此，看到了别人的总结，感觉清晰明了。放在这里压住阵脚：css框架：Bootstrap、Layui、Zui、Am
  • Bootstrap 按钮（实例 ） 2401_84093443 程序员bootstrap前端javascript
    默认大小的原始按钮默认大小的按钮小的原始按钮小的按钮特别小的原始按钮特别小的按钮块级的原始按钮块级的按钮按钮状态Bootstrap提供了激活、禁用等按钮状态的class，下面将进行详细讲解。激活状态按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。下表列出了让按钮元素和锚元素呈激活状态的class：下面的实例演示了这点：Bootstrap实例-按钮激活状态默认按钮激活按钮原始按钮激
  • Spring Cloud 系列五《Nacos+gateway（配置中心+网关）》 哈叮 微服务springcloudspringspringbootjava
    0、前言上篇已经集成Nacos，本篇把网关（SpringCloudGateway）加上1、代码截图代码是在上篇基础上修改的，有些重叠的就不贴代码了。2、Common增加了一个通用服务，主要用来引入通用包pom：注意openfeign，loadbalancer，bootstrap，都是不可获取的。com.alibaba.cloudspring-cloud-starter-alibaba-nacos-
  • Bootstrap - 表单 廖马儿
    Bootstrap给HTML大部分表单都设置了默认样式，我们可以给表单添加相应类名，以实现表单的水平排列，个性化定制等。代码：这是一个输入框:这是一个输入框:北京北京北京这是一个输入框:效果：图片.pngclass:对标签添加：class="form-inline"可以让它水平排列：图片.png对Input设置大小可以添加class：input-sminput-lg应该使用form-group设置
  • vue.js项目实战案例源码 前端码趣逗士 vue.js
    案例一：博客系统项目概述：一个简单的博客系统，包括文章列表展示、文章详情查看、分类筛选、用户登录注册等功能。技术栈：Vue.jsVueRouterVuexAxiosBootstrap主要功能实现：文章列表展示：使用Axios从后端API获取文章列表数据。在Vue组件中展示文章标题、摘要和发布日期等信息。博客文章列表{{article.title}}{{article.summary}}{{arti
  • python ImportError: No module named requests 陈桐Caliburn
    curlhttps://bootstrap.pypa.io/get-pip.py-oget-pip.pypythonget-pip.pypipinstallrequests
  • Java反射机制思维导图(全） ZHANGJINTAO_ java反射设计模式
    Java反射机制思维导图(全）类加载器概述当我们的程序在运行后，第一次使用某个类的时候，会将此类的class文件读取到内存，并将此类的所有信息存储到一个Class对象中，类加载器就是是负责将磁盘上的某个class文件读取到内存并生成Class的对象的。分类启动/引导类加载器(BootstrapClassLoader)：用于加载系统类库扩展类加载器(ExtensionClassLoader)：用于加
  • java责任链模式 3213213333332132 java责任链模式村民告县长
    责任链模式，通常就是一个请求从最低级开始往上层层的请求，当在某一层满足条件时，请求将被处理，当请求到最高层仍未满足时，则请求不会被处理。 就是一个请求在这个链条的责任范围内，会被相应的处理，如果超出链条的责任范围外，请求不会被相应的处理。 下面代码模拟这样的效果： 创建一个政府抽象类,方便所有的具体政府部门继承它。 package 责任链模式; /** *
  • linux、mysql、nginx、tomcat 性能参数优化 ronin47
    一、linux 系统内核参数 /etc/sysctl.conf文件常用参数 net.core.netdev_max_backlog = 32768 #允许送到队列的数据包的最大数目 net.core.rmem_max = 8388608 #SOCKET读缓存区大小 net.core.wmem_max = 8388608 #SOCKET写缓存区大
  • php命令行界面 dcj3sjt126com PHPcli
    常用选项 php -v php -i PHP安装的有关信息 php -h 访问帮助文件 php -m 列出编译到当前PHP安装的所有模块 执行一段代码 php -r 'echo "hello, world!";' php -r 'echo "Hello, World!\n";' php -r '$ts = filemtime("
  • Filter&Session 171815164 session
    Filter HttpServletRequest requ = (HttpServletRequest) req; HttpSession session = requ.getSession(); if (session.getAttribute("admin") == null) { PrintWriter out = res.ge
  • 连接池与Spring,Hibernate结合 g21121 Hibernate
            前几篇关于Java连接池的介绍都是基于Java应用的，而我们常用的场景是与Spring和ORM框架结合，下面就利用实例学习一下这方面的配置。         1.下载相关内容：     &nb
  • [简单]mybatis判断数字类型 53873039oycg mybatis
           昨天同事反馈mybatis保存不了int类型的属性,一直报错，错误信息如下:       Caused by: java.lang.NumberFormatException: For input string: "null" at sun.mis
  • 项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space 程序员是怎么炼成的 eclipsejvmtomcatcatalina.sheclipse.ini
       在启动比较大的项目时，因为存在大量的jsp页面，所以在编译的时候会生成很多的.class文件，.class文件是都会被加载到jvm的方法区中，如果要加载的class文件很多，就会出现方法区溢出异常 java.lang.OutOfMemoryError: PermGen space.     解决办法是点击eclipse里的tomcat，在
  • 我的crm小结 aijuans crm
    各种原因吧，crm今天才完了。主要是接触了几个新技术： Struts2、poi、ibatis这几个都是以前的项目中用过的。 Jsf、tapestry是这次新接触的，都是界面层的框架，用起来也不难。思路和struts不太一样，传说比较简单方便。不过个人感觉还是struts用着顺手啊，当然springmvc也很顺手，不知道是因为习惯还是什么。jsf和tapestry应用的时候需要知道他们的标签、主
  • spring里配置使用hibernate的二级缓存几步 antonyup_2006 javaspringHibernatexmlcache
    ．在spring的配置文件中 applicationContent.xml，hibernate部分加入 xml 代码 <prop key="hibernate.cache.provider_class">org.hibernate.cache.EhCacheProvider</prop> <prop key="hi
  • JAVA基础面试题 百合不是茶 抽象实现接口String类接口继承抽象类继承实体类自定义异常
    /*   * 栈（stack）：主要保存基本类型（或者叫内置类型）（char、byte、short、   *int、long、 float、double、boolean）和对象的引用，数据可以共享，速度仅次于   * 寄存器（register），快于堆。堆（heap）：用于存储对象。   */  &
  • 让sqlmap文件 "继承" 起来 bijian1013 javaibatissqlmap
            多个项目中使用ibatis , 和数据库表对应的 sqlmap文件（增删改查等基本语句)，dao, pojo 都是由工具自动生成的, 现在将这些自动生成的文件放在一个单独的工程中，其它项目工程中通过jar包来引用 ，并通过"继承"为基础的sqlmap文件，dao,pojo 添加新的方法来满足项
  • 精通Oracle10编程SQL(13)开发触发器 bijian1013 oracle数据库plsql
    /* *开发触发器 */ --得到日期是周几 select to_char(sysdate+4,'DY','nls_date_language=AMERICAN') from dual; select to_char(sysdate,'DY','nls_date_language=AMERICAN') from dual; --建立BEFORE语句触发器 CREATE O
  • 【EhCache三】EhCache查询 bit1129 ehcache
    本文介绍EhCache查询缓存中数据，EhCache提供了类似Hibernate的查询API，可以按照给定的条件进行查询。   要对EhCache进行查询，需要在ehcache.xml中设定要查询的属性   数据准备 @Before public void setUp() { //加载EhCache配置文件 Inpu
  • CXF框架入门实例 白糖_ springWeb框架webserviceservlet
    CXF是apache旗下的开源框架，由Celtix + XFire这两门经典的框架合成，是一套非常流行的web service框架。 它提供了JAX-WS的全面支持，并且可以根据实际项目的需要，采用代码优先（Code First）或者 WSDL 优先（WSDL First）来轻松地实现 Web Services 的发布和使用，同时它能与spring进行完美结合。 在apache cxf官网提供
  • angular.equals boyitech AngularJSAngularJS APIAnguarJS 中文APIangular.equals
    angular.equals   描述: 比较两个值或者两个对象是不是 相等。还支持值的类型，正则表达式和数组的比较。   两个值或对象被认为是 相等的前提条件是以下的情况至少能满足一项： 两个值或者对象能通过=== （恒等） 的比较 两个值或者对象是同样类型，并且他们的属性都能通过angular
  • java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1] bylijinnan java
    这道题的具体思路请参看 何海涛的微博：http://weibo.com/zhedahht import java.math.BigInteger; import java.util.Arrays; public class CreateBFromATencent { /** * 题目：输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A
  • FastDFS 的安装和配置 修订版 Chen.H linuxfastDFS分布式文件系统
    FastDFS Home:http://code.google.com/p/fastdfs/ 1. 安装 http://code.google.com/p/fastdfs/wiki/Setup http://hi.baidu.com/leolance/blog/item/3c273327978ae55f93580703.html 安装libevent (对libevent的版本要求为1.4.
  • [强人工智能]拓扑扫描与自适应构造器 comsci 人工智能
          当我们面对一个有限拓扑网络的时候,在对已知的拓扑结构进行分析之后,发现在连通点之后,还存在若干个子网络,且这些网络的结构是未知的,数据库中并未存在这些网络的拓扑结构数据....这个时候,我们该怎么办呢?       那么,现在我们必须设计新的模块和代码包来处理上面的问题
  • oracle merge into的用法 daizj oraclesqlmerget into
    Oracle中merge into的使用 http://blog.csdn.net/yuzhic/article/details/1896878 http://blog.csdn.net/macle2010/article/details/5980965 该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中，使用此命令必须同时指定UPDATE 和INSE
  • 不适合使用Hadoop的场景 datamachine hadoop
    转自：http://dev.yesky.com/296/35381296.shtml。 　　Hadoop通常被认定是能够帮助你解决所有问题的唯一方案。 当人们提到“大数据”或是“数据分析”等相关问题的时候，会听到脱口而出的回答：Hadoop!  实际上Hadoop被设计和建造出来，是用来解决一系列特定问题的。对某些问题来说，Hadoop至多算是一个不好的选择，对另一些问题来说，选择Ha
  • YII findAll的用法 dcj3sjt126com yii
    看文档比较糊涂，其实挺简单的： $predictions=Prediction::model()->findAll("uid=:uid",array(":uid"=>10));   第一个参数是选择条件：”uid=10″。其中:uid是一个占位符，在后面的array(“:uid”=>10)对齐进行了赋值； 更完善的查询需要
  • vim 常用 NERDTree 快捷键 dcj3sjt126com vim
    下面给大家整理了一些vim NERDTree的常用快捷键了，这里几乎包括了所有的快捷键了，希望文章对各位会带来帮助。 切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w + r 移动当前窗口的布局位置 o 在已有窗口中打开文件、目录或书签，并跳
  • Java把目录下的文件打印出来 蕃薯耀 列出目录下的文件文件夹下面的文件目录下的文件
    Java把目录下的文件打印出来 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 11:02:
  • linux远程桌面----VNCServer与rdesktop hanqunfeng Desktop
    windows远程桌面到linux，需要在linux上安装vncserver，并开启vnc服务，同时需要在windows下使用vnc-viewer访问Linux。vncserver同时支持linux远程桌面到linux。   linux远程桌面到windows，需要在linux上安装rdesktop，同时开启windows的远程桌面访问。   下面分别介绍，以windo
  • guava中的join和split功能 jackyrong java
    guava库中，包含了很好的join和split的功能，例子如下： 1） 将LIST转换为使用字符串连接的字符串    List<String> names = Lists.newArrayList("John", "Jane", "Adam", "Tom");
  • Web开发技术十年发展历程 lampcy androidWeb浏览器html5
    回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。 彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a
  • 架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好) nannan408 buffer
    1.前言。   如题。 2.代码。   IoService IoService是一个接口，有两种实现：IoAcceptor和IoConnector；其中IoAcceptor是针对Server端的实现，IoConnector是针对Client端的实现；IoService的职责包括： 1、监听器管理 2、IoHandler 3、IoSession
  • ORA-00054:resource busy and acquire with NOWAIT specified Everyday都不同 oraclesessionLock
    [Oracle] 今天对一个数据量很大的表进行操作时，出现如题所示的异常。此时表明数据库的事务处于“忙”的状态，而且被lock了，所以必须先关闭占用的session。   step1，查看被lock的session：   select t2.username, t2.sid, t2.serial#, t2.logon_time from v$locked_obj
  • javascript学习笔记 tntxia JavaScript
      javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。number：就是数字值，包括整数、小数、NaN、正负无穷。string:字符串类型、单双引号引起来的内容。boolean:true、false object:表示所有的javascript对象，不用多说function:我们熟悉的方法，也就是
  • Java enum的用法详解 xieke90 enum枚举
    Java中枚举实现的分析：     示例：  public static enum SEVERITY{ INFO,WARN,ERROR }     enum很像特殊的class，实际上enum声明定义的类型就是一个类。 而这些类都是类库中Enum类的子类      (java.l
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他