bootstrap列表页制作之列表组使用

1.bootstrap列表页制作之列表组使用
2.list.php


<html>
    <head>
        <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js">script>
        <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js">script>
    head>
    <body>
        <nav class="nav navbar-inverse navbar-fixed-top" style="filter:alpha(Opacity=90);-moz-opacity:0.9;opacity: 0.9" role="navigation">
    <div class="container">
            <div class="navbar-header">
             <a href="#" class="navbar-brand">
                <span class="glyphicon glyphicon-road">span> <strong>囧途课堂strong>
             a>
            div>

            <ul class="nav navbar-nav">
                    <li class="active"><a href="#">首页a>li>
                    <li><a href="#">囧文a>li>
                    <li><a href="#">文章a>li>
            ul>
            <div class="navbar-form navbar-right">
                <div class="form-group">    
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索文章、教师或课程"  />
                        <div class="input-group-btn">
                            <button class="btn btn-block"><span class="glyphicon glyphicon-search">span>button>
                        div>
                    div>  
                div>
                <div class="form-group" style="padding-left: 10px; margin: 0px 12px;">
                    <a href="#" style="color: #D2D2D2;">登录a>
                    <span  style="color: #D2D2D2;padding-left: 5px;">|span>
                    <a href="#" style="color: #D2D2D2;padding-left: 5px;">注册a>
                div>
            div>  
      div>
   nav> 
   <div style="height: 60px;">div>
        <div class="container-fluid">
            <div class="col-md-9">
                <div class="list-group">
                     for($i=0;$i<10;$i++):?>
                    <div class="list-group-item" style="border: 0;">
                        <a href="#" style="color: #0F0F0F;"><h4>【神秘客315特别策划】哪家航空公司最让你泪流满面 echo $i;?>h4>a>
                        <p class="text-muted">
                            <small>发布时间:2015-2-11small>   
                            <small class="pull-right">
                                点击量:<span class="badge">20span>
                            small>
                        p>
                        <p class="text-muted">
                            从2014年12个月投诉率平均值来看,从高到低依次是东方航空、中国国航、南方航空和海南航空。
        海航2月份投诉率创造了四大航最高点。2月恰似去年春节客运高峰期,海航抗压能力有点差哦。
        从投诉率波动来看,海南航空、南方航空投诉率波动较大;国际航空、东方航空投诉率波动较小
                        p>
                        <p>
                          <span class="badge">率波动span>    <span class="badge">国际航空span> <span class="badge">海南航空span> 
                        p>
                    div>
                    <div style="border: 1px dashed #ddd;">div>
                     endfor;?>
                    <div class="text-center">
                        <ul class="pagination">
                            <li><a href="#">«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="#">»a>li>
                        ul>
                    div>

                div>
            div>
        div>
    body>
html>

你可能感兴趣的:(其它)