BootStrap应用案例

DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Templatetitle>
<meta name="viewport"
  content="width=device-width,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css"
  href="../bootstrap3/css/bootstrap.css">
<link rel="stylesheet" type="text/css"
  href="../bootstrap3/font-awesome-4.7.0/css/font-awesome.css" />
<link rel="stylesheet" href="../css/layout.css">
head>
<body>
  <header>
    
    <div class="container text-right">
      
      <small>Power bysmall> <b>Smartb>Blogs
    div>
  header>
  
  <nav>
    <div class="container">
      
      <h1>
        <b>popo酱的博客b> <small>——po就是主子,我是po奴才small>
      h1>
      
      <div>
        <ul class="nav navbar-nav">
          <li><a href="index.html">首页a>li>
          <li><a href="article.html">文章a>li>
        ul>
        
        <ul class="nav navbar-nav navbar-right">
          <li><p class="navbar-text">用户:adminp>li>
          <li><a href="login.html">登出a>li>
        ul>
      div>
    div>
  nav>
  
  <section>
    <div class="container">
      <div class="row">
        <div class="col-md-9">
          <h2 class="page-header">
            <span class="fa fa-star-o"> 精选置顶span>
          h2>
          
          
          <div class="jumbotron">
            <div class="row">
              <div class="col-md-6">
                
                <img class="img-responsive img-rounded"
                  src="../images/img1.jpg">
              div>
              <div class="col-md-6">
                
                <h3 class="row1">
                  <a href="article.html"> 《我不是药神》观后的反思a>
                h3>
                <p class="row4">《我不是药神》是由文牧野执导,宁浩、徐峥共同监制的剧情片,徐峥、
                  周一围、王传君、谭卓、章宇、杨新鸣等主演 。该片于2018年7月5日在中国上映。
                  影片讲述了神油店老板程勇从一个交不起房租的男性保健品商贩,一跃成为印度仿制药“格列宁”独家代理商的故事。p>
                <p>作者:adminp>
                <a class="btn btn-info btn-xs">演员a> <a
                  class="btn btn-info btn-xs">电影a>
              div>
            div>
          div>
          
          
          <div class="row">
            <div class="col-md-4">
              
              <div class="thumbnail">
                <img class="img-responsive img-rounded"
                  src="../images/img20.jpg">
                <div class="caption">
                  <h3 class="row1">
                    <a href="article.html">人民空军,生日快乐!生日快乐!a>
                  h3>
                  <p>作者:adminp>
                  <p>
                    <a class="btn btn-info btn-xs">新闻a> <a
                      class="btn btn-info btn-xs">军事a>
                  p>
                div>
              div>
              
            div>
            <div class="col-md-4">
              
              <div class="thumbnail">
                <img class="img-responsive img-rounded"
                  src="../images/img21.jpg">
                <div class="caption">
                  <h3 class="row1">
                    <a href="article.html">法国隆重纪念一战结束百年!a>
                  h3>
                  <p>作者:adminp>
                  <p>
                    <a class="btn btn-info btn-xs">新闻a>
                  p>
                div>
              div>
              
            div>
            <div class="col-md-4">
              
              <div class="thumbnail">
                <img class="img-responsive img-rounded"
                  src="../images/img22.jpg">
                <div class="caption">
                  <h3 class="row1">
                    <a href="article.html">蒙娜丽莎的微笑a>
                  h3>
                  <p>作者:adminp>
                  <p>
                    <a class="btn btn-info btn-xs">美人a>
                  p>
                div>
              div>
              
            div>
          div>
          
          
          
          <div class="panel panel-default">
            <div class="panel-body">
              <div class="row">
                
                <div class="col-md-8">
                  <h3 class="row1">
                    <a href="article.html">给大家推荐几款不错的耳机a>
                  h3>
                  <p>
                    耳机其实是我们生活中经常使用的设备,如果你觉得太便宜的耳机质量差,太贵的又觉得没必要的话,那就可以看看我推荐给大家的这些了。
                    价格没有特别贵,希望能帮助你p>
                div>
                
                <div class="col-md-4">
                  <img class="img-responsive img-rounded"
                    src="../images/img24.jpg">
                div>
              div>
            div>
            
            <div class="panel-footer">
              <div class="row">
                <div class="col-md-3">
                  <span class="fa fa-calendar"> 2018-10-19 11:50span>
                div>
                <div class="col-md-2">
                  <span class="fa fa-eye"> 3span>
                div>
                <div class="col-md-2">
                  <span class="fa fa-comment-o"> 0span>
                div>
                <div class="col-md-3">
                  <a class="btn btn-info btn-xs">歌曲a> <a
                    class="btn btn-info btn-xs">手机a> <a
                    class="btn btn-info btn-xs">耳机a>
                div>
                <div class="col-md-2">
                  <span class="pull-right">作者:adminspan>
                div>
              div>
            div>
            
          div>
          
          
          <div class="panel panel-default">
            <div class="panel-body">
              <div class="row">
                
                <div class="col-md-8">
                  <h3 class="row1">
                    <a href="article.html">《炉石传说》卡牌游戏系统介绍a>
                  h3>
                  <p>2014年3月13日全球同步正式运营。2014年获TGA2014游戏大奖最佳移动掌机游戏,
                    [2] 2015年获第二届SXSW游戏大奖年度移动游戏。p>
                div>
                
                <div class="col-md-4">
                  <img class="img-responsive img-rounded"
                    src="../images/img28.jpg">
                div>
              div>
            div>
            
            <div class="panel-footer">
              <div class="row">
                <div class="col-md-3">
                  <span class="fa fa-calendar"> 2018-10-19 11:39span>
                div>
                <div class="col-md-2">
                  <span class="fa fa-eye"> 1span>
                div>
                <div class="col-md-2">
                  <span class="fa fa-comment-o"> 0span>
                div>
                <div class="col-md-3">
                  <a class="btn btn-info btn-xs">手机a> <a
                    class="btn btn-info btn-xs">游戏a>
                div>
                <div class="col-md-2">
                  <span class="pull-right">作者:adminspan>
                div>
              div>
            div>
            
          div>
          
          
          <div class="panel panel-default">
            <div class="panel-body">
              <div class="row">
                
                <div class="col-md-8">
                  <h3 class="row1">
                    <a href="article.html">java好学不好学a>
                  h3>
                  <p>如果你有计算机基础知识,有面向对象的概念,那么我只能说真的好学,而且各种资料漫天飞舞~
                    如果你以前就不知道编程是个啥,那我建议你还是看点基础入门的吧,比如C.....
                    数据结构、算法啥的,用到在学也不晚,但是你得稍微知道点p>
                div>
                
                <div class="col-md-4">
                  <img class="img-responsive img-rounded"
                    src="../images/img6.jpg">
                div>
              div>
            div>
            
            <div class="panel-footer">
              <div class="row">
                <div class="col-md-3">
                  <span class="fa fa-calendar"> 2018-10-17 14:40span>
                div>
                <div class="col-md-2">
                  <span class="fa fa-eye"> 21span>
                div>
                <div class="col-md-2">
                  <span class="fa fa-comment-o"> 0span>
                div>
                <div class="col-md-3">
                  <a class="btn btn-info btn-xs">Javaa>
                div>
                <div class="col-md-2">
                  <span class="pull-right">作者:adminspan>
                div>
              div>
            div>
            
          div>
          
          
          <div class="panel panel-default">
            <div class="panel-body">
              <div class="row">
                
                <div class="col-md-8">
                  <h3 class="row1">
                    <a href="article.html">王者荣耀好玩么a>
                  h3>
                  <p>
                    《王者荣耀》是由腾讯游戏天美工作室群开发并运行的一款运营在Android、IOS、NS平台上的MOBA类手机游戏,于2015年11月26日在Android、IOS平台上正式公测,游戏前期使用名称有《英雄战迹》、《王者联盟》。《Arena
                    Of Valor》,即《王者荣耀》的欧美版本于2018年在任天堂Switch平台发售。p>
                div>
                
                <div class="col-md-4">
                  <img class="img-responsive img-rounded"
                    src="../images/img27.jpg">
                div>
              div>
            div>
            
            <div class="panel-footer">
              <div class="row">
                <div class="col-md-3">
                  <span class="fa fa-calendar"> 2018-11-23 11:19span>
                div>
                <div class="col-md-2">
                  <span class="fa fa-eye"> 0span>
                div>
                <div class="col-md-2">
                  <span class="fa fa-comment-o"> 0span>
                div>
                <div class="col-md-3">
                  <a class="btn btn-info btn-xs">游戏a>
                div>
                <div class="col-md-2">
                  <span class="pull-right">作者:adminspan>
                div>
              div>
            div>
            
          div>
          
          
        div>
        <div class="col-md-3">
          <h2 class="page-header">
            <span class="fa fa-thumbs-o-up"> 推荐阅读span>
          h2>
          
          <ul class="list-group">
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-search"> 文章搜索span>
              h3>
            li>
            <li class="list-group-item">
              <form class="form-inline">
                <div class="form-group">
                  <input type="text" class="form-control"
                    id="search-input" placeholder="请输入文章标题">
                div>
                <button type="submit" class="btn btn-default">
                  <span class="fa fa-search">span>
                button>
              form>
            li>
          ul>
          
          
          <ul class="list-group">
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-calendar"> 最新内容span>
              h3>
            li>
            <li class="list-group-item"><a href="article.html"
              class="row1">《炉石传说》卡牌游戏系统介绍卡牌游戏系统介绍a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">《我不是药神》观后的反思a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">给大家推荐几款不错的耳机a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">王者荣耀好玩么a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">java好学不好学a>li>
          ul>
          

          
          
          <ul class="list-group">
            
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-comment-o"> 评论最热span>
              h3>
            li>
            
            <li class="list-group-item"><a href="article.html"
              class="row1">我要支持markDowna>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">《我不是药神》观后的反思a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">荒野大镖客:救赎2a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">人民空军,生日快乐!a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">mate20 pro真不错了a>li>
          ul>


          
          <ul class="list-group">
            
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-eye">span> 浏览最多
              h3>
            li>
            
            <li class="list-group-item"><a href="article.html"
              class="row1">mate20 pro真不错了a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">荒野大镖客:救赎2a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">人民空军,生日快乐!a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1"> 双11"车祸现场"a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">习将出席APEC第二十六次领导人非正式会议a>li>
          ul>


          
          <ul class="list-group">
            
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-tag">span> 分类标签span>
              h3>
            li>
            
            <li class="list-group-item"><a href="article.html"
              class="row1">八卦(6)a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">演员(5)a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">游戏(4)a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">心情(3)a>li>
            <li class="list-group-item"><a href="article.html"
              class="row1">新闻(5)a>li>
          ul>


          
          <ul class="list-group">
            
            <li class="list-group-item list-group-item-heading">
              <h3>
                <span class="fa fa-link">span> 友情链接span>
              h3>
            li>
            
            <li class="list-group-item"><a href="" class="row1">网易a>li>
            <li class="list-group-item"><a href="" class="row1">哈哈a>li>
            <li class="list-group-item"><a href="" class="row1">百度a>li>
            <li class="list-group-item"><a href="" class="row1">必应a>li>
            <li class="list-group-item"><a href="" class="row1">腾讯a>li>
            <li class="list-group-item"><a href="" class="row1">京东a>li>
            <li class="list-group-item"><a href="" class="row1">淘宝a>li>
            <li class="list-group-item"><a href="" class="row1">天猫a>li>
          ul>
          

        div>
      div>
    div>
  section>



  <footer class="well">
    <div class="container">
      <b>Copyright © 2018 xxx.cn All Rights Reserved
        京ICP备08000853号-56 <a href="http://www.tmooc.cn">xxx科技集团有限公司a>
        版权所有
      b>
      
      <span class="pull-right"><b>Versionb> 0.1.0span>
    div>
  footer>
body>
<script type="text/javascript" src="../bootstrap3/jquery.min.js">script>
<script type="text/javascript" src="../bootstrap3/js/bootstrap.js">script>
<script type="text/javascript" src="../bootstrap3/js/holder.js">script>
<script type="text/javascript" src="../bootstrap3/js/html5shiv.min.js">script>
<script type="text/javascript"
  src="../bootstrap3/js/css3-mediaqueries.js">script>
<script type="text/javascript" src="../bootstrap3/js/respond.min.js">script>
html>

你可能感兴趣的:(BootStrap应用案例)