Bootstrap学习 - 组件

---

下拉菜单

注意：需要先引入jQuery.js再引入bootstrap.js（依赖前者）

<div class="dropdown pull-right">  //默认就是dropdown可不写，dropup向上弹出，小三角也会自动变为向上
　　<button class="dropdown-toggle btn btn-default " type="button"  data-toggle="dropdown">
　　　　Dropdown<span class="caret"></span>
　　</button>
　　<ul class="dropdown-menu dropdown-menu-right"">
　　　　<li class="dropdown-header">Language</li>
　　　　<li><a role="menuitem">Python</a></li>
　　　　<li class="disabled"><a role="menuitem">Java</a></li>
　　　　<li><a role="menuitem">PHP</a></li>
　　　　<li class="divider"></li>
　　　　<li><a>JavaScript</a></li>
　　</ul>
</div>

---

按钮组

以CDN的方式引入Bootstrap：<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="btn-group">    //btn-group-vertical  垂直排列    // btn-group-justified 水平铺满容器
    <button type="button" class="btn btn-success">按钮1</button>
    <button type="button" class="btn btn-primary">按钮2</button>
    <button type="button" class="btn btn-danger">按钮3</button>
</div>

效果：          不加btn-group效果： 

可以利用这一功能做一些按钮工具栏，像这样的


还可以在btn-group中嵌套下拉菜单

<div class="btn-group">
　　 <button type="button" class="btn btn-default">1</button>
　　 <button type="button" class="btn btn-default">2</button>
　　 <div class="btn-group">
　　　　 <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">3 <span class="caret"></span></button>
　　　 　<ul class="dropdown-menu">
　　　　　　<li><a>A</a></li>
　　　　　  <li><a>B</a></li>
　　　　 </ul>
　　　</div>
</div>

---

分裂式下拉菜单

<div class="container">
　　<div class="btn-group">
　　　　<button type="button" class="btn btn-info">分裂式</button>  //就是把普通的下拉菜单和前一个按钮放到一个btn-group里了
　　　　<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
　　　　<ul class="dropdown-menu">
　　　　　　<li><a>A</a></li>
　　　　　　<li><a>B</a></li>
　　　　</ul>
　　　　<button type="button" class="btn btn-warning">按钮2</button>
　　　　<button type="button" class="btn btn-success">按钮3</button>
　　</div>
</div>

---

输入框组

<div class="input-group">
　　<span class="input-group-addon">❤</span>    //input-group-btn
　　<input type="text" class="form-control" placeholder="UserName"/>
</div>

可以在<span>中加入：字符、标签、单复选框、按钮、下拉菜单。。。。。。

<div class="row">
    <div class="col-lg-5">
        <div class="input-group">
            <input type="text" class="form-control" />
            <div class="input-group-btn">
                <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">Button<span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li>Hello</li>
                    <li>Hello</li>
                    <li>Hello</li>
                </ul>
            </div>
        </div>
    </div>
</div>

---

导航栏

实例：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">   //固定在顶端，需要下面页面设置至少50px的padding，否则会挡住。底端也一样
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">❤</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul id="mytab" class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li ><a href="#">Blog</a></li>
                <li ><a href="#">Contact</a></li>
                <li ><a href="#">Learning</a></li>
                <li ><a href="#">Login</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-menu-hamburger"></span>
                    </a>
                    <ul class="dropdown-menu" role="menu">
                        <li role="presentation"><a role="menuitem" href="#">A</a></li>
                        <li role="presentation"><a role="menuitem" href="#">B</a></li>
                        <li role="presentation"><a role="menuitem" href="#">C</a></li>
                        <li role="presentation"><a role="menuitem" href="#">D</a></li>
                    </ul>
                </li>
            </ul>

            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search" />
                </div>
                <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
            </form>

        </div>
    </div>
</nav>

面包屑导航

<ol class="breadcrumb">
    <li><a>Home</a></li>
    <li><a>Blog</a></li>
    <li><a>Page</a></li>
</ol>

Home / Blog / Page

---

分页和翻页

<ul class="pagination">     //  pagination-lg  pagination-sm 
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#" >&raquo;</a></li>
</ul>

<ul class="pager">
    <li><a href="#">Previous</a></li>                  //居中显示
    <li><a href="#">Next</a></li>
</ul>

<ul class="pager">
    <li class="previous"><a href="#">&larr;向前</a></li>      //位于两端   都可以添加.disabled禁止点击
    <li class="next"><a href="#">向后&rarr;</a></li>
</ul>

标识(标签)

<span class="label label-default">default</span>   -primary  -info  -success  -warning  -danger

---

徽章

<a href="#">Messages <span class="badge">3</span></a>
<button type="button" class="btn btn-success" >Messages <span class="badge">100</span></button>

---

巨幕

<div class="jumbotron">
    <h1>Hello world</h1>
    <p>hellohellohellohellohellohellohellohellohello</p>
    <p><a href="#" class="btn btn-success btn-sm">Go</a></p>
</div>

---

页头

<div class="page-header">
　　<h1>Here is the title<small> here is the subtitle</small></h1>
</div>

缩略图

<div class="col-xs-6 col-md-4">
    <div class="thumbnail">
        <img src="src/img/junjie.jpg" align="junjie" />
        <div class="caption"><h3>Junjie</h3></div>
        <p>You are so cute!</p>
        <a href="#" class="btn btn-info">分享</a>
        <a href="#" class="btn btn-success">下载</a>
    </div>
</div>

---

警告框

<div class="alert alert-danger" role="alert">
    <button type="button" class="close" data-dismiss="alert" ><span aria-disabled="true" >&times;</span></button>
    <strong>这是一个可以关闭的警告框</strong>
</div>

---

进度条

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-danger active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:30%;">
        30%
    </div>
</div>

---

列表组

<ul class="list-group ">
    <li class="list-group-item list-group-item-danger">Python</li>
    <li class="list-group-item list-group-item-success">Python</li>
    <li class="list-group-item list-group-item-info">Python</li>
</ul>

<div class="list-group">
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">W3CSchool</h4>
        <p class="list-group-item-text">Python PHP HTML CSS JavaScript</p>
    </a>
    <a href="#" class="list-group-item list-group-item-danger">Python</a>
    <a href="#" class="list-group-item list-group-item-success">PHP</a>
    <a href="#" class="list-group-item list-group-item-info">JavaScript</a>
</div> 

---

媒体对象

<div class="container">
　　<div class="media">
　　　　<a class="media-left" href="#">       //media-right media-middle media-bottom...
　　　　　　<img src="src/img/junjie.jpg" alt="junjie" height="64px" width="64px">
　　　　</a>
　　　　<div class="media-body">
　　　　　　<h4 class="media-heading">
　　　　　　　　Hello Junjie Jun
　　　　　　</h4>
　　　　　　<p>
　　　　　　　　HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello
　　　　　　　　HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello
　　　　　　</p>
　　　　</div>
　　</div>
</div>

还可以这样，只需要添加多个<li>就行

<div class="container">
　<ul class="media-list">
　　<li class="media">
　　　　<a class="media-left" href="#">       //media-right media-middle media-bottom...
　　　　　　<img src="src/img/junjie.jpg" alt="junjie" height="64px" width="64px">
　　　　</a>
　　　　<div class="media-body">
　　　　　　<h4 class="media-heading">
　　　　　　Hello Junjie Jun
　　　　　　</h4>
　　　　　　<p>
　　　　　　　　HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello
　　　　　　　　HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello
　　　　　　</p>
　　　　</div>
　　</li>

　　<li>...

　</ul>
</div>

---

面板

<div class="panel panel-success">
    <div class="panel-heading">
        Here is heading
    </div>
    <div class="panel-body">
        这里可以时普通文本、表格、列表等等
    </div>
    <div class="panel-footer">
        something footer
    </div>
</div>    

---

嵌入

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="http://10.20.62.139"></iframe>    //不需要再为iframe设置padding等
</div>

<div class="well">
    Hello world
</div>