Bootstrap 02页面组件

页面组件

glyphicon图标大全:

http://w3c.3306.biz/bootstrap/eg/bootstrap--glyphicons-list.html

菜单
按钮组
按钮菜单
导航元素
导航栏
脚部
分页
标签
徽章
页面标题
缩略图
可关闭提示
进度条
多媒体对象
列表组
面板
well效果
字体图标

菜单

<h1>基本菜单</h1>
<div class="dropdown open">
    <ul class="dropdown-menu">
        <li><a>菜单一</a></li>
        <li>菜单二</li>
        <li>菜单三</li>
        <li>菜单四</li>
    </ul>
</div>
菜单分栏
<li class="divider"></li>
设置文字对齐：
 <li class="text-center">菜单一</li>
 <li class="text-left">菜单二</li>
 <li class="text-right">菜单三</li>
 标题：
 <li class="dropdown-header">我是标题</li>

按钮组

<div class="btn-group">
        <button type="button" class="btn btn-primary">按钮</button>
        <button type="button" class="btn btn-success">按钮</button>
        <button type="button" class="btn btn-danger">按钮</button>
    </div>
按钮大小：
<div class="btn-group btn-group-lg">
垂直按钮组：
 <div class="btn-group-vertical">

按钮菜单

<h1>基本下拉</h1>
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        下拉按钮<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a>菜单1</a></li>
            <li><a>菜单2</a></li>
            <li><a>菜单3</a></li>
        </ul>

    </div>
    <h1>分隔栏的按钮向下</h1>
    <div class="dropdown">
        <div class="btn-group">
        <button class="btn btn-primary">action</button>
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>

        <ul class="dropdown-menu">
            <li><a>菜单1</a></li>
            <li><a>菜单2</a></li>
            <li><a>菜单3</a></li>
        </ul>
        </div>
    </div>
分隔栏的按钮向上：
 <div class="btn-group">
   

导航元素

<h1>基本导航栏</h1><!--nav nav-tabs-->
    <div>
        <ul class="nav nav-tabs">
            <li class="active"><a >home</a></li>
            <li><a>php</a></li>
            <li><a>java</a></li>
            <li><a>.net</a></li>
        </ul>
    </div>
胶囊导航栏：
<ul class="nav nav-pills">
垂直的胶囊导航栏：
 <ul class="nav nav-pills nav-stacked col-xs-1">
两端对齐的导航：
 <ul class="nav nav-pills nav-justified">
 
 
 <h1>具有下拉菜单的导航</h1>
    <div>
        <ul class="nav nav-pills">
            <li class="active"><a >home</a></li>
            <li><a>php</a></li>
            <li><a>java</a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown">
                  .net  <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a>菜单1</a></li>
                    <li ><a>菜单2</a></li>
                    <li class="divider"></li>
                    <li><a>菜单3</a></li>
                </ul>

            </li>
        </ul>
    </div>

导航栏

<h1>默认导航设置</h1>
    <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand">程序设计语言</a>
    </div>
        <div >
            <ul class="nav navbar-nav">
                <li><a>java</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown">
                        c<span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a>c</a></li>
                        <li><a>c#</a></li>
                        <li><a>c++</a></li>
                    </ul>
                </li>
                <li><a>php</a></li>
            </ul>

        </div>
    </nav>
    
    
    <h1>响应式的导航栏</h1>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-content">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand">程序设计语言</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-content">
                <ul class="nav navbar-nav">
                    <li><a href="">java</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown">
                            c<span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a>c</a></li>
                            <li><a>c++</a></li>
                            <li><a>c#</a></li>
                        </ul>
                    </li>
                    <li><a href="">php</a></li>
                </ul>
            </div>

    </nav>
    
    
    <h1>导航栏中的表单</h1>
<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand">模糊查询</a>
    </div>
    <div>
        <form action="" method="post" class="navbar-form navbar-left">
        <div class="form-group">
            <input type="text" class="form-control">
        </div>
            <input type="submit" value="搜索" class="form-control">
        </form>
    </div>
    <button type="button" class="btn btn-default navbar-btn">
        导航栏按钮
    </button>
    <p class="navbar-text">光头强</p>
    <p class="navbar-text">
        <a href="002按钮组.html" class="navbar-link">导航栏链接</a>
    </p>
</nav>

导航栏对齐方式：
<ul class="nav navbar-nav navbar-right">

固定到顶部的导航栏
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

脚部

<footer id="footer">
    <div class="container">
    <p>&copy;copyright 2018</p>
    </div>

</footer>

分页

 <h2>分页</h2>
    <ul class="pagination pagination-lg">
        <li><a>&laquo;</a></li>
        <li><a href="">1</a></li>
        <li class="active"><a href="">2</a></li>
        <li class="disabled"><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
        <li><a>&raquo;</a></li>
    </ul>
<h2>翻页</h2>
    <ul class="pager">
        <li><a href="">上一页</a></li>
        <li><a href="">下一页</a></li>
    </ul>
<h2>翻页的对齐方式</h2>
    <ul class="pager">
        <li class="previous disabled"><a href="">&larr;上一页</a></li>
        <li class="next"><a href="">下一页</a></li>
    </ul>

标签

<div class="container" style="padding:20px">
    <h1>Example Headingpan<span class="label label-default">Label</span></h1>

    <h2>Example Heading<span class="label label-default">Label</span></h2>

    <h3>Example Heading<span class="label label-default">Label</span></h3>
    <h4>Example Heading<span class="label label-default">Label</span></h4>
</div>

<div class="container" style="padding:20px">
    <h2><span class="label label-default">默认标签</span></h2>
    <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>
</div>

徽章

用于提示消息数量
<h4>胶囊式导航中的激活状态</h4>
<ul class="nav nav-pills">
    <li class="active"><a href="#">首页 <span class="badge">42</span></a></li>
    <li><a href="#">简介</a></li>
    <li><a href="#">消息 <span class="badge">3</span></a></li>
</ul>
<br>
<h4>列表导航中的激活状态</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
    <li class="active">
        <a href="#">
            <span class="badge pull-right">42</span> 首页
        </a>
    </li>
    <li><a href="#">简介</a></li>
    <li>
        <a href="#">
            <span class="badge pull-right">3</span> 消息
        </a>
    </li>
</ul>

页面标题

自适应大小
<div class="container">
    <div class="jumbotron">
        <h1>欢迎登录页面！</h1>

        <p>这是一个超大屏幕的示例</p>

        <p><a href="#" class="btn btn-primary btn-lg">学习更多</a></p>
    </div>
</div>

width 100%
<div class="jumbotron">
    <div class="container">
        <h1>欢迎登录页面！</h1>

        <p>这是一个超大屏幕的示例</p>

        <p><a href="#" class="btn btn-primary btn-lg">学习更多</a></p>
    </div>
</div>

缩略图

 <div class="col-sm-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="img/phone.jpg" alt="通用的占位符缩略图">
        </a>

        <div class="caption">
            <h3>缩略图标签</h3>

            <p>一些描述的文字，一些描述的文字</p>

            <p>
                <a href="#" class="btn btn-primary">购买</a>
            </p>
        </div>
    </div>

可关闭提示

<div class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    错误，请重新输入！
</div>

<div class="alert alert-success alert-dismissable">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <a href="#" class="alert-link">如5秒钟内未跳转，请点击！</a>
</div>

进度条

<!--1.默认进度条-->
<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
         style="width:60%">
        <span class="sr-only">60%</span>
    </div>
</div>
<!--2.状态进度条-->
<div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="10" aria-valuemin="0"
         aria-valuemax="100" style="width:60%">
        <span>60%</span>
    </div>
</div>
<!--3.条纹状态进度条-->

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="10" aria-valuemin="0"
         aria-valuemax="100" style="width:10%">
        <span>10%</span>
    </div>
</div>
<!--4.动态进度条-->

<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="10" aria-valuemin="0"
         aria-valuemax="100" style="width:10%">
        <span>10%</span>
    </div>
</div>
<!--5.堆叠进度条-->


<div class="progress">

    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="10" aria-valuemin="0"
         aria-valuemax="100" style="width:10%">
        <span>10%</span>
    </div>

    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" aria-valuemin="0"
         aria-valuemax="100" style="width:40%">
        <span>40%</span>
    </div>


    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0"
         aria-valuemax="100" style="width:30%">
        <span>30%</span>
    </div>
</div>

多媒体对象

<div class="media">
    <a href="#" class="pull-left">
        <img alt="媒体对象" class="media-object" src="img/phone.jpg">
    </a>

    <div class="media-body">
        <h4 class="media-heading">媒体标题</h4>
        这是一些示例文本，这是一些示例文本， 这是一些示例文本，这是一些示例文本， 这是一些示例文本，这是一些示例文本
    </div>
</div>

列表组

<!--1. 基本列表组-->

<ul class="list-group">
    <li class="list-group-item">JavaScript从入门到精能</li>
    <li class="list-group-item">BootStrap响应式布局</li>
    <li class="list-group-item">Java零基础到项目实战</li>
    <li class="list-group-item">HTML5+CSS3网页编程</li>
</ul>


!--2. 带有徽章的列表组-->

<ul class="list-group">
    <li class="list-group-item">
        <span class="badge">2</span> JavaScript从入门到精能
    </li>
    <li class="list-group-item">
        <span class="badge">10</span> BootStrap响应式布局
    </li>
    <li class="list-group-item">
        <span class="badge">缺货</span> Java零基础到项目实战
    </li>
    <li class="list-group-item">
        HTML5+CSS3网页编程
        <span class="badge">8</span>
    </li>
</ul>

<!--3. 带有链结的列表组-->

<div class="list-group">
    <a href="#" class="list-group-item ">JavaScript从入门到精能</a>
    <a href="#" class="list-group-item active">
        <span class="badge">缺货</span> BootStrap响应式布局
    </a>
    <a href="#" class="list-group-item ">
        Java零基础到项目实战
    </a>
    <a href="#" class="list-group-item ">
        Java零基础到项目实战
    </a>
    <a href="#" class="list-group-item ">
        Java零基础到项目实战
    </a>
    <a href="#" class="list-group-item ">
        Java零基础到项目实战
    </a>
    <a href="#" class="list-group-item ">
        Java零基础到项目实战
    </a>
    <a href="#" class="list-group-item active">
        HTML5+CSS3网页编程

    </a>
</div>


<!--4. 自定义内容的列表组-->

<div class="list-group">
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading ">JavaScript从入门到精能</h4>
    </a>
    <a href="#" class="list-group-item  active">
        <h4 class="list-group-item-heading">BootStrap响应式布局</h4>

        <p class="list-group-item-text">
            BootStrap响应式布局
        </p>
    </a>
    <a href="#" class="list-group-item">
        Java零基础到项目实战
    </a>
    <a href="#" class="list-group-item">
        HTML5+CSS3网页编程
    </a>
</div>
<script>
    $('a').click(function () {
        $(this).addClass("active").siblings().removeClass("active");
    })
</script>

面板

!-- 1. 基本的面板-->
<div class="panel panel-default">
    <div class="panel-body">
        我是面板的内容
    </div>
</div>
<!-- 2. 带有标题的面板-->
<div class="panel panel-default">
    <div class="panel-heading">
        面板1标题
    </div>
    <div class="panel-body">
        hello,我是面板1的内容,<br> hello,我是面板1的内容,
        <br> hello,我是面板1的内容,
        <br> hello,我是面板1的内容,
        <br> hello,我是面板1的内容,
        <br> hello,我是面板1的内容,
        <br> hello,我是面板1的内容,<br>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">面板2标题</h3>
    </div>
    <div class="panel-body">
        hello,我是面板2的内容
    </div>
</div>

<!-- 3. 带有脚注的面板-->
<div class="panel panel-default">
    <div class="panel-heading">
        面板1标题
    </div>
    <div class="panel-body">
        hello,我是面板1的内容,<br> hello,我是面板1的内容,
        <br> hello,我是面板1的内容,
        <br> hello,我是面板1的内容,
        <br> hello,我是面板1的内容,
        <br> hello,我是面板1的内容,
        <br> hello,我是面板1的内容,<br>
    </div>
    <div class="panel-footer">面板脚注</div>
</div>
<!-- 4. 带有状态的面板-->
<div class="panel panel-default">
    <div class="panel-heading">
        标题
    </div>
    <div class="panel-body">
        hello,我是面板0的内容
    </div>

</div>

<div class="panel panel-primary">
    <div class="panel-heading">
        标题
    </div>
    <div class="panel-body">
        hello,我是面板1的内容
    </div>

</div>
<div class="panel panel-success">
    <div class="panel-heading">
        标题
    </div>
    <div class="panel-body">
        hello,我是面板2的内容
    </div>

</div>
<div class="panel panel-info">
    <div class="panel-heading">
        标题
    </div>
    <div class="panel-body">
        hello,我是面板3的内容
    </div>

</div>
<div class="panel panel-warning">

    <div class="panel-body">
        hello,我是面板4的内容
    </div>

</div>
<div class="panel panel-danger">
    <div class="panel-heading">
        标题
    </div>
    <div class="panel-body">
        hello,我是面板5的内容
    </div>

</div>

<!-- 5. 表格面板-->

<div class="panel panel-default">
    <div class="panel-heading">
        标题
    </div>
    <div class="panel-body">
        我是面板的内容
    </div>
    <table class="table">
        <th>产品</th>
        <th>价格</th>
        <tr>
            <td>产品 A</td>
            <td>200</td>
        </tr>
        <tr>
            <td>产品 B</td>
            <td>400</td>
        </tr>
    </table>
    <div class="panel-footer">
        total:600￥
    </div>

</div>

<div class="panel panel-default">
    <div class="panel-heading">
        标题
    </div>

    <table class="table">
        <th>产品</th>
        <th>价格</th>
        <tr>
            <td>产品 A</td>
            <td>200</td>
        </tr>
        <tr>
            <td>产品 B</td>
            <td>400</td>
        </tr>
    </table>
    <div class="panel-footer">
        total:600￥
    </div>

</div>


<!-- 6.包含有列表组的面板-->

<div class="panel panel-default">
    <div class="panel-heading">
        标题
    </div>
    <div class="panel-body">
        我是面板的内容
    </div>
    <ul class="list-group">
        <li class="list-group-item">免费域名注册</li>
        <li class="list-group-item">免费 Window 空间托管</li>
        <li class="list-group-item">图像的数量</li>
        <li class="list-group-item">24*7 支持</li>
        <li class="list-group-item">每年更新成本</li>
    </ul>


</div>

<div class="panel panel-default">
    <div class="panel-heading">
        标题
    </div>

    <ul class="list-group">
        <li class="list-group-item">免费域名注册</li>
        <li class="list-group-item">免费 Window 空间托管</li>
        <li class="list-group-item">图像的数量</li>
        <li class="list-group-item">24*7 支持</li>
        <li class="list-group-item">每年更新成本</li>
    </ul>
</div>

well效果

<div class="well">您好，我是BootStrip Well!</div>

<div class="well well-lg">您好，我是BootStrip Well!</div>

<div class="well well-sm">您好，我是BootStrip Well!</div>

字体图标

<!--1. 按钮应用字体图标-->
<p>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-attributes"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-order"></span>
    </button>
    <button type="button" class="btn btn-default">
        <span class="glyphicon glyphicon-sort-by-order-alt"></span>
    </button>
</p>

<p>
    <button type="button" class="btn btn-default btn-lg">
        <span class="glyphicon glyphicon-shopping-cart"></span> User
    </button>
    <button type="button" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-user"></span> User
    </button>
    <button type="button" class="btn btn-default btn-xs">
        <span class="glyphicon glyphicon-user"></span> User
    </button>
</p>

<!--2. 为导航栏应用字体图标-->
<div class="navbar  navbar-fixed-top  navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a>
                </li>
                <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart"></span>购物车</a>
                </li>
                <li><a href="#support"><span class="glyphicon glyphicon-headphones"></span> Support</a>
                </li>
            </ul>
        </div>

    </div>

</div>

<!--3. 定制字体图标-->

<button type="button" class="btn btn-primary btn-lg" style="font-size:60px">
    <span class="glyphicon glyphicon-user"></span> 用户
</button>

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
    <span class="glyphicon glyphicon-user"></span> 用户
</button>

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
    <span class="glyphicon glyphicon-backward"></span> 用户
</button>
<span class="glyphicon glyphicon-user"></span>