【Bootstrap】入门Bootstrap框架，满满案例实战“开箱即用”直接cv~

于 2021-05-28 18:39:03 发布
阅读量794 收藏 11
点赞数 5
分类专栏： 前端 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43853746/article/details/117357423
版权

前言

Bootstrap 是一个全球比较流行好用的Web前端开发框架之一，它的强大之处在于它将常见的CSS布局小组件和JavaScript插件进行完整且完善的封装，即使没有经验的前端工程师和写页面样式灰常头疼的后端工程师，也能迅速掌握使用，大大的提高了开发效率。如果你不会Vue，使用Element-UI可能是有点蒙蒙的，这时候Bootstrap可能是你的另外一个选择。简单，方便，接下来，直接运用吧。

Bootstrap 源码

Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。具体来说，主要文件组织结构如下：

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

less/、js/ 和 fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。dist/ 目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/ 包含了所有文档的源码文件，examples/ 目录是 Bootstrap 官方提供的实例工程。

不废话，直接用！

布局容器

Bootstrap提供了两种布局容器效果，想要引用Bootstrap的布局效果和Bootstrap的栅格系统效果页面需要包裹在一个 类名为.container或者.container-fluid的div容器中。

<div class="container">
  ...
</div>

.container-fluid类用于 100% 宽度，占据全部页面/屏幕视口（viewport）的容器，而container则居中在页面/屏幕视口的中间。

<div class="container-fluid">
  ...
</div>

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。

其中“行（row）”必须包含在.container（固定宽度）或 .container-fluid（100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列，即换行。

栅格系统布局实例

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Bootstrap 之栅格系统布局实例</title>
    <!-- Bootstrap -->
    <link href="bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .row1 {
            padding-top: 30px;
            height: 300px;
        }
        .litle {
            color: rgb(42, 170, 236);
        }
        @media (max-width: 768px) {
            img {
                width: 50%;
            }
            li {
                margin-left: 30px;
                font-size: 14px;
            }
            h2 {
                font-size: 16px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row row1">
            <div class="col-md-4 col-xs-12 text-center">
                <img src="img/cont1.png" alt="" class="img">
                <h2 class="litle">SAE</h2>
                <p>云应用</p>
            </div>
            <div class="col-md-8 col-xs-12">
                <h3>应用开发、优化及运行的PaaS云计算平台</h3>
                <p>国内第一家公有云计算平台，支持PHP. Java. Python语言，提供Web应用开发所需的众多服务，国内最好的PaaS云计算平台</p>
                <div class="row">
                    <ul class="col-md-6 col-xs-12">
                        <li>弹性扩展，负载均衢智能应对大数据处理请求</li>
                        <li>沙箱技术隔高应用</li>
                        <li>沙箱技术隔高应用</li>
                        <div></div>
                    </ul>
                    <ul class="col-md-6 col-xs-12">
                        <li>防火墙防止攻击</li>
                        <li>99.95%SLA首批可信云认证</li>
                        <li>免费配赖，零成本创业、</li>
                    </ul>
                </div>
                <a href="#">了解详情</a>
            </div>
        </div>
        <div class="row row1">
            <div class="col-md-4 col-xs-12 col-md-push-8 text-center">
                <img src="img/cont2.png" alt="" class="img">
                <h2 class="litle">SAE</h2>
                <p>云应用</p>
            </div>
            <div class="col-md-8 col-xs-12 col-md-pull-4 ">
                <h3>应用开发、优化及运行的PaaS云计算平台</h3>
                <p>国内第一家公有云计算平台，支持PHP. Java. Python语言，提供Web应用开发所需的众多服务，国内最好的PaaS云计算平台</p>
                <div class="row">
                    <ul class="col-md-6 col-xs-12">
                        <li>弹性扩展，负载均衢智能应对大数据处理请求</li>
                        <li>沙箱技术隔高应用</li>
                        <li>沙箱技术隔高应用</li>
                    </ul>
                    <ul class="col-md-6 col-xs-12">
                        <li>防火墙防止攻击</li>
                        <li>99.95%SLA首批可信云认证</li>
                        <li>免费配赖，零成本创业、</li>
                    </ul>
                </div>
                <a href="#">了解详情</a>
            </div>
        </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap-3.3.7/dist/js/bootstrap.js"></script>
</body>

</html>

导航条&轮播图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>导航条</title>
  <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
  <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <style type="text/css">
    .btn_register,
    .btn_login {
      background-color: #222222;
      color: rgb(131, 131, 131);
    }
    @media (max-width:768px) {
      .list {
        float: left;
        position: absolute;
        top: 0;
        left: 50%;
      }
      .list li {
        float: left;
        top: 0;
        left: 50%;
      }
    }
    .navbar {
      background-color: black;
    }
    .navbar {
      border-radius: 0px;
    }
    .navbar-nav a:hover {
      color: #fff;
    }
    #mycegeneric {
      transform: translate(0px, -20px);
    }
    .navbar-right a {
      color: #fff;
      background-color: rgb(41, 204, 136);
    }
  </style>
  <script>
    $(function () {
      $('.carousel').carousel({
        interval: 2000
      });
    });
  </script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-default navbar-inverse">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a href="#" class="nav-brand">
          <img src="img/logo.png">
        </a>
      </div>
      <div class="collapse navbar-collapse navbar-left" id="navbar-collapse-1">
        <ul class="nav navbar-nav ">
          <li><a href="#">首页<span class="sr-only"></span></a></li>
          <li><a href="#">品牌故事</a></li>
          <li><a href="#">产品展示</a></li>
          <li><a href="#">新闻资讯</a></li>
          <li><a href="#">联系我们</a></li>
        </ul>
      </div>
      <div class="list nav navbar-right">
        <a href="" class="btn  navbar-btn btn_login" data-toggle="modal" data-target="#login_modal">登录</a>
        <a href="" class="btn  navbar-btn btn_register" data-toggle="modal" data-target="#register_modal">注册</a>
      </div>
    </div>
  </nav>
  <div id="mycegeneric" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#mycegeneric" data-slide-to="0" class="active"></li>
      <li data-target="#mycegeneric" data-slide-to="1"></li>
      <li data-target="#mycegeneric" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img/banner (1).jpg">
        <div class="carousel-caption"></div>
      </div>
      <div class="item">
        <img src="img/banner (2).jpg">
        <div class="carousel-caption"></div>
      </div>
      <div class="item">
        <img src="img/banner (3).jpg">
        <div class="carousel-caption"></div>
      </div>
    </div>
    <a class="left carousel-control" href="#mycegeneric" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#mycegeneric" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</body>

</html>

Affix

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Affix</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
    ul.nav-tabs {
      border-bottom: 1px solid #ddd;
      border: 1px #ddd solid;
      border-radius: 5px;
      margin-top: 20px;
    }
    .nav-tabs li {
      border-top: 1px solid #ddd;
    }
    .nav-tabs li:first-child {
      border-top: none;
    }
  </style>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
  <div class="container">
    <div class="jumbotron">
      <h1>新闻中心</h1>
    </div>
    <div class="row">
      <div class="col-md-3" id="myScrollspy">
        <ul class="nav nav-tabs nav-stacked" data-spy="affix">
          <li><a href="#section-1">新闻</a></li>
          <li><a href="#section-2">最新</a></li>
          <li><a href="#section-3">视频</a></li>
        </ul>
      </div>
      <div class="col-md-9">
        <h2 id="section-1">第一部分</h2>
        <p>The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;
          subnavigation on the right is a live demo of the affix plugin.
          plugin. emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of
          the affix plugin.
        </p>
        <p>The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;
          subnavigation on the right is a live demo of the affix plugin.
          plugin. emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of
          the affix plugin.
        </p>
        <hr />
        <h2 id="section-2">第二部分</h2>
        <p>The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;. 
          subnavigation on the right is a live demo of the affix plugin.
          plugin. emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of
          the affix plugin.
        </p>
        <p>The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;      
          The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;
          plugin. emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of
          the affix plugin.
        </p>
        <hr />
        <h2 id="section-3">第三部分</h2>
        <p>The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;
          subnavigation on the right is a live demo of the affix plugin.
          The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;
          the affix plugin.
        </p>
        <p>The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;
          subnavigation on the right is a live demo of the affix plugin.
          The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;
          the affix plugin.
        </p>
        <hr />
        <h2 id="section-4">第四部分</h2>
        <p>The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;. 
          subnavigation on the right is a live demo of the affix plugin.
          The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;. 
          plugin. emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of
          the affix plugin.
        </p>
        <p>The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;
          subnavigation on the right is a live demo of the affix plugin.
          The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;. 
          plugin. emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of
          the affix plugin.
        </p>
        <hr />
        <h2 id="section-5">第五部分</h2>
        <p>The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;
          subnavigation on the right is a live demo of the affix plugin.
          plugin. emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of
          the affix plugin.
        </p>
        <p>The affix plugin toggles position: fixed; on and off, emulating the effect found with position: sticky;
          subnavigation on the right is a live demo of the affix plugin.
          plugin. emulating the effect found with position: sticky;. The subnavigation on the right is a live demo of
          the affix plugin.
        </p>大开杀戒逢狼时刻芙蓉李
        <hr />
      </div>
    </div>
  </div>
  <script src="js/jquery-3.4.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
</body>

</html>

媒体对象

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Media对象</title>
  <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
  <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <style type="text/css">
    .comment {
      display: flex;
      justify-content: space-between;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="media">
      <div class="media-left">
        <img src="img/image/pic-samll.jpg" alt="">
      </div>
      <div class="media-body">
        <h4 class="media-heading">谁在制造下跌,散户何去何从</h4>
        <p>大盘分时不断在筑底过程中下跌,每一次有w底之意的形态上,最终迎来的都是破位下行,虽然周末央企改革事宜进行了公布,单这种利好只在开盘的第一个动作中有所体现</p>
        <div class="comment">
          <small>5分钟前/股市</small>
          <small style="color:orange">评论|分享</small>
        </div>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <img src="img/image/pic-samll.jpg" alt="">
      </div>
      <div class="media-body">
        <h4 class="media-heading">谁在制造下跌,散户何去何从</h4>
        <p>大盘分时不断在筑底过程中下跌,每一次有w底之意的形态上,最终迎来的都是破位下行,虽然周末央企改革事宜进行了公布,单这种利好只在开盘的第一个动作中有所体现</p>
        <div class="comment">
          <small>5分钟前/股市</small>
          <small style="color:orange">评论|分享</small>
        </div>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <img src="img/image/pic-samll.jpg" alt="">
      </div>
      <div class="media-body">
        <h4 class="media-heading">谁在制造下跌,散户何去何从</h4>
        <p>大盘分时不断在筑底过程中下跌,每一次有w底之意的形态上,最终迎来的都是破位下行,虽然周末央企改革事宜进行了公布,单这种利好只在开盘的第一个动作中有所体现</p>
        <div class="comment">
          <small>5分钟前/股市</small>
          <small style="color:orange">评论|分享</small>
        </div>
      </div>
    </div>
    <div class="media">
      <div class="media-left">
        <img src="img/image/pic-samll.jpg" alt="">
      </div>
      <div class="media-body">
        <h4 class="media-heading">谁在制造下跌,散户何去何从</h4>
        <p>大盘分时不断在筑底过程中下跌,每一次有w底之意的形态上,最终迎来的都是破位下行,虽然周末央企改革事宜进行了公布,单这种利好只在开盘的第一个动作中有所体现</p>
        <div class="comment">
          <small>5分钟前/股市</small>
          <small style="color:orange">评论|分享</small>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

缩略图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>缩略图</title>
	<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-2 col-xs-6">
				<div class="thumbnail">
					<img src="img/image/img1.jpg" alt="">
					<div class="caption">
						<h3>左耳</h3>
						<p>放肆青春掀起全国追忆</p>
						<a href="#" class="btn btn-primary">播放</a>
						<a href="btn btn-default">下载</a>
					</div>
				</div>
			</div>
			<div class="col-md-2 col-xs-6">
				<div class="thumbnail">
					<img src="img/image/img2.jpg" alt="">
					<div class="caption">
						<h3>左耳</h3>
						<p>放肆青春掀起全国追忆</p>
						<a href="#" class="btn btn-primary">播放</a>
						<a href="btn btn-default">下载</a>
					</div>
				</div>
			</div>
			<div class="col-md-2 col-xs-6">
				<div class="thumbnail">
					<img src="img/image/img3.jpg" alt="">
					<div class="caption">
						<h3>左耳</h3>
						<p>放肆青春掀起全国追忆</p>
						<a href="#" class="btn btn-primary">播放</a>
						<a href="btn btn-default">下载</a>
					</div>
				</div>
			</div>
			<div class="col-md-2 col-xs-6">
				<div class="thumbnail">
					<img src="img/image/img4.jpg" alt="">
					<div class="caption">
						<h3>左耳</h3>
						<p>放肆青春掀起全国追忆</p>
						<a href="#" class="btn btn-primary">播放</a>
						<a href="btn btn-default">下载</a>
					</div>
				</div>
			</div>
			<div class="col-md-2 col-xs-6">
				<div class="thumbnail">
					<img src="img/image/img5.jpg" alt="">
					<div class="caption">
						<h3>左耳</h3>
						<p>放肆青春掀起全国追忆</p>
						<a href="#" class="btn btn-primary">播放</a>
						<a href="btn btn-default">下载</a>
					</div>
				</div>
			</div>
			<div class="col-md-2 col-xs-6">
				<div class="thumbnail">
					<img src="img/image/img6.jpg" alt="">
					<div class="caption">
						<h3>左耳</h3>
						<p>放肆青春掀起全国追忆</p>
						<a href="#" class="btn btn-primary">播放</a>
						<a href="btn btn-default">下载</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

图标组件

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标组件</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    	.head-list{
    		background: ligthgrey; 
    		bosder:red 1px solid;
    		height: 50px;
    	}
    	.text-list{
        display: block;
    	}
    	.list-active{
      color: red;
    	}
    </style>
</head>
<body>
	<div class="container">
		 <div class="row text-center head-list">
            <div class="col-xs-3">
		    	  <span class="glyphicon glyphicon-home list-active"></span>
			      <span  class="=text-list">首页</span>
		     </div>
 		    <div class="col-xs-3">
		    	  <span class="glyphicon glyphicon-heart list-active"></span>
			      <span  class="=text-list">服务</span>
		     </div>
		     <div class="col-xs-3">
		    	  <span class="glyphicon glyphicon-gift list-active"></span>
		    	  <span  class="=text-list">商品</span>
		    </div>
		     <div class="col-xs-3">
			      <span class="glyphicon glyphicon-user list-active"></span>
		    	  <span  class="=text-list">我的</span>
		     </div>			
		  </div>  		       
	</div>
</body>
</html>

下拉菜单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>导航条</title>
	<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
	<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> 
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
  	<br>
	  <nav class="navbar navbar-default">
		  <div class="navbar-header">
			  <a href="#" class="nav-brand  texta">
				  <img src="img/1.png">
			  </a>
		  </div>
		  <ul class="nav navbar-nav">
			  <li class=""><a href="#">主页</a></li>
			  <li><a href="#">微博</a></li>
			  <li><a href="#">图书</a></li>
		  </ul>
      <form action="" class="navbar-form navbar-right">
    	  <div class="form-group">
    		 <input type="text" class="form-control" placeholder="search" />
    	  </div>
    	  <button type="button" class="btn btn-success">搜素</button>
	  </form>
	  </nav>
  	   <br>
       <nav class="navbar navbar-default">
  	       <div class="navbar-header">
  		     <a href="#" class="nav-brand  texta">
  		       <img src="img/1.png">
  		     </a>
  	       </div>
           <ul class="nav navbar-nav">
    	      <li class=""><a href="#">主页</a></li>
			  <li><a href="#">微博</a></li>
    	      <li><a href="#">图书</a></li>
		   </ul>
           <form action="" class="navbar-form navbar-right">
    	       <div class="form-group">
    		      <input type="text" class="form-control" placeholder="search" />
    	       </div>
    	       <button type="button" class="btn btn-success">搜素</button>
			   <button  class="btn btn-default ">button</button>
    	       <button   class="btn btn-primary ">button</button>
			   <a href="#" class="dropdown-toggle" data-toggle="dropdown">
			      关于我们	<span class="caret"></span>
		       </a>
			   <ul class="dropdown-menu dropdown-menu-right">
			      <li><a href="#">1</a></li>
			      <li><a href="#">2</a></li>
			      <li><a href="#">3</a></li>
			   </ul>
		   </form>
   </nav>
	  <br>
	  <nav class="navbar navbar-default">
		  <div class="container-fluid">
			  <div class="navbar-header">
				  <button type="button" class="navbar-toggle" data-toggle="collapse"  data-target="#navbar-collapse-1" >
					  <span class="glyphicon glyphicon-menu-hamburger"></span>
				  </button>
				  <a href="#" class="navbar-brand">
					  <img src="img/1.png"/>
				  </a>
			  </div>
			  <div class="collapse navbar-collapse" id="navbar-collapse-1">
				  <ul class="nav navbar-nav">
					  <li><a href="#">主页</a></li>
					  <li><a href="#">微博</a></li>
					  <li><a href="#">图书</a></li>
				  </ul>
				  <form action="" class="navbar-form navbar-right">
					  <div class="form-group">
						  <input type="text" class="form-control" placeholder="search">
					  </div>
					  <button type="button" class="btn btn-success">button</button>
					  <button type="button" class="btn btn-success">button</button>
					  <button type="button" class="btn btn-success">button</button>
					  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
						  关于我们	<span class="caret"></span>
					  </a>
					  <ul class="dropdown-menu dropdown-right">
						  <li><a href="#">1</a></li>
						  <li><a href="#">2</a></li>
						  <li><a href="#">3</a></li>
					  </ul>
				  </form>
			  </div>
		  </div>
	  </nav>
  </div>
</body>
</html>

控制面板

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JPanel面板</title>
  <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
  <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="panel panel-default">
      <div class="panel-body">
        这是面板的内容
      </div>
    </div>
    <br><br>
    <div class="panel panel-default">
      <div class="panel-heading">
        这是面板的标题
      </div>
      <div class="panel-body">
        这是面板的内容
      </div>
    </div>
    <br>
    <div class="panel panel-success">
      <div class="panel-heading">
        这是面板的标题
      </div>
      <div class="panel-body">
        这是面板的内容
      </div>
    </div>
    <br>
    <div class="panel panel-primary">
      <div class="panel-heading">
        这是面板的标题
      </div>
      <div class="panel-body">
        这是面板的内容
      </div>
      <div class="panel-footer">
        这是面板的footer
      </div>
    </div>
    <br>
    <div class="panel panel-primary">
      <div class="panel-heading">
        我的课程表
      </div>
      <div class="panel-body">
        <table class="table table-striped table-bordered table-hover">
          <tr>
            <th>
            <td>星期一</td>
            <td>星期二</td>
            <td>星期三</td>
            <td>星期四</td>
            <td>星期五</td>
            <td>星期六</td>
            <td>星期日</td>
            </th>
          </tr>
          <tr class="active">
            <th>
            <td>1</td>
            <td>bootsreap</td>
            <td>C#</td>
            <td>java</td>
            <td>PHP</td>
            <td>mySQL</td>
            <td>休息</td>
            <td>休息</td>
            </th>
          </tr>
          <tr class="success">
            <th>
            <td>1</td>
            <td>bootsreap</td>
            <td>C#</td>
            <td>java</td>
            <td>PHP</td>
            <td>mySQL</td>
            <td>休息</td>
            <td>休息</td>
            </th>
          </tr>
          <tr class="info">
            <th>
            <td>1</td>
            <td>bootsreap</td>
            <td>C#</td>
            <td>java</td>
            <td>PHP</td>
            <td>mySQL</td>
            <td>休息</td>
            <td>休息</td>
            </th>
          </tr>
          <tr class="danger">
            <th>
            <td>1</td>
            <td>bootsreap</td>
            <td>C#</td>
            <td>java</td>
            <td>PHP</td>
            <td>mySQL</td>
            <td>休息</td>
            <td>休息</td>
            </th>
          </tr>
        </table>
      </div>
      <div class="panel-footer">
        这是面板的footer
      </div>
    </div>
  </div>
</body>

</html>

导航条

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>课工场导航条</title>
  <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
  <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <style type="text/css">
    .btn_register,
    .btn_login {
      background-color: #0da86d;
      color: #fff;
    }
    .btn_login a:hover {
      background-color: #ffffff;
      color: #000;
    }
    .btn_register a:hover {
      background-color: #ffffff;
      color: #000;
    }
    .stu {
      color: rgb(131, 131, 131);
      font-size: 14px;
    }
    .stu_new {
      display: block;
      margin-left: 15px;
      line-height: 50px;
    }
    .glyphicon {
      color: white;
    }
    .navbar-right .form-group a {
      color: #fff;
    }
  </style>
</head>

<body>

  <nav class="navbar navbar-default navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
          <span class="glyphicon glyphicon-menu-hamburger"></span>
        </button>
        <a href="#" class="nav-brand">
          <img src="img/logo.png">
        </a>
      </div>

      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <button type="button" class="btn  navbar-btn btn_login">登录</button>
          <button type="button" class="btn  navbar-btn btn_register">注册</button>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-success">Submit</button>
      </form>

      <div class="collapse navbar-collapse " id="navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">首页<span class="sr-only">(current)</span></a></li>
          <li><a href="#">入门课</a></li>
          <li><a href="#">岗位课</a></li>
          <li><a href="#">技能库</a></li>
          <li><a href="#">微社区</a></li>
          <li class="stu_new">
            <span>
              <a href="#" class="stu">学员</a>
            </span>
            <span class="label label-danger">new</span>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

缩略图

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <style type="text/css">
        .title{
            margin-top:20px;
        }
    </style>

</head>
<body>
    <div class="container">
        <div class="title">
            <h3 class="media-heading">本周MV下载排行榜</h3>
        </div>
        <hr>
        <div class="row">
            <div class="col-sm-4 col-md-2 col-xs-6  mvlist ">
                <div class="thumbnail">
                    <img src="img/mv (1).jpg" />
                    <div class="caption">
                       <p>齐秦-女人花</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="img/mv (2).jpg" />
                    <div class="caption">
                       <p>郁可唯-失恋消失</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="img/mv (3).jpg"/>
                    <div class="caption">
                       <p>阿兰-你的眼神</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="img/mv (4).jpg" />
                    <div class="caption">
                       <p>Super-Junlor</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="img/mv (5).jpg" />
                    <div class="caption">
                       <p>阿兰-为爱成魔</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="img/mv (6).jpg" />
                    <div class="caption">
                       <p>祁隆-一万个对不起</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="img/mv (7).jpg"/>
                    <div class="caption">
                       <p>崔子格-不再联系</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="img/mv (8).jpg"/>
                    <div class="caption">
                       <p>李代沫-简单的事</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="img/mv (9).jpg"/>
                    <div class="caption">
                       <p>张惠妹-爱我吗</p>
                    </div>
                </div>
            </div>                        
            <div class="col-sm-4 col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="img/mv (10).jpg" />
                    <div class="caption">
                       <p>黄琦珊-离不开你</p>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="img/mv (11).jpg"/>
                    <div class="caption">
                       <p>夏天-不再联系</p>
                    </div>
                </div>
            </div>                        
            <div class="col-sm-4 col-md-2 col-xs-6">
                <div class="thumbnail">
                    <img src="img/mv (12).jpg"/>
                    <div class="caption">                    
                       <p>凤凰传奇-自由自在</p>
                    </div>   
                </div>
            </div>            
        </div>
    </div>
</body>
</html>

Tab 切换

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <style>
        .mylist li{
            margin: 10px -15px;
        }
        .mylist a{
            font-size: 16px;
            font-family: "Source Han Sans CN Regular";
            color: midnightblue;
        }
        .tab-content .list_img{
            margin-top: 15px;
            margin-left: 15px;
        }
        .mytablist a{
            font-size: 18px;
            font-family: "Source Han Sans CN Regular";
            font-weight: 500;
            color: #327AB7;
        }
    </style>
</head>
<body>
<div class="container" id="myTabs">
    <ul class="nav nav-tabs mytablist" role="tablist">
        <li class="active"><a href="#news" aria-controls="news" role="tab" data-toggle="tab">新闻</a></li>
        <li><a href="#amusement" aria-controls="amusement" role="tab" data-toggle="tab">娱乐</a></li>
        <li><a href="#military" aria-controls="military" role="tab" data-toggle="tab">军事</a></li>
        <li><a href="#society" aria-controls="society" role="tab" data-toggle="tab">社会</a></li>
        <li><a href="#sports" aria-controls="sports" role="tab" data-toggle="tab">体育</a></li>

    </ul>
    <div class="tab-content" >
        <div  class="tab-pane active fade in active" id="news">
            <img src="img/tab (1).jpg" class="list_img" alt="">
            <ul class="mylist">
                <li><a href="#">村主任看风水收费一万不算违纪?</a></li>
                <li><a href="#">女经理色诱警官卖17台伪劣安检机</a></li>
                <li><a href="#">男子一夜情后疑染病将女子推下楼</a></li>
                <li><a href="#">网传四川成都一女性头部被人割掉</a></li>
                <li><a href="#">游客遭老虎咬死专家称园方无责任.</a></li>
            </ul>
        </div>
        <div class="tab-pane fade" id="amusement">
            <img src="img/tab (2).jpg" class="list_img" alt="">
            <ul class="mylist">
                <li><a href="#">村主任看风水收费一万不算违纪?</a></li>
                <li><a href="#">女经理色诱警官卖17台伪劣安检机</a></li>
                <li><a href="#">男子一夜情后疑染病将女子推下楼</a></li>
                <li><a href="#">网传四川成都一女性头部被人割掉</a></li>
                <li><a href="#">游客遭老虎咬死专家称园方无责任.</a></li>
            </ul>
        </div>
        <div  class="tab-pane fade" id="military">
            <img src="img/tab (3).jpg" class="list_img" alt="">
            <ul class="mylist">
                <li><a href="#">村主任看风水收费一万不算违纪?</a></li>
                <li><a href="#">女经理色诱警官卖17台伪劣安检机</a></li>
                <li><a href="#">男子一夜情后疑染病将女子推下楼</a></li>
                <li><a href="#">网传四川成都一女性头部被人割掉</a></li>
                <li><a href="#">游客遭老虎咬死专家称园方无责任.</a></li>
            </ul>
        </div>
        <div  class="tab-pane fade" id="society">
            <img src="img/tab (4).jpg" class="list_img" alt="">
            <ul class="mylist">
                <li><a href="#">村主任看风水收费一万不算违纪?</a></li>
                <li><a href="#">女经理色诱警官卖17台伪劣安检机</a></li>
                <li><a href="#">男子一夜情后疑染病将女子推下楼</a></li>
                <li><a href="#">网传四川成都一女性头部被人割掉</a></li>
                <li><a href="#">游客遭老虎咬死专家称园方无责任.</a></li>
            </ul>
        </div>
        <div  class="tab-pane fade" id="sports">
            <img src="img/tab (5).jpg" class="list_img" alt="">
            <ul class="mylist">
                <li><a href="#">村主任看风水收费一万不算违纪?</a></li>
                <li><a href="#">女经理色诱警官卖17台伪劣安检机</a></li>
                <li><a href="#">男子一夜情后疑染病将女子推下楼</a></li>
                <li><a href="#">网传四川成都一女性头部被人割掉</a></li>
                <li><a href="#">游客遭老虎咬死专家称园方无责任.</a></li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script>
    $(function(){
        $('#myTabs a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
        });
    });
</script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

表格

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bootstraps表格</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <div class="table-resposive">
      <table class="table table-stripedP[] table-border table-hover">
        <tr>
          <th>
          <td>星期一</td>
          <td>星期二</td>
          <td>星期三</td>
          <td>星期四</td>
          <td>星期五</td>
          <td>星期六</td>
          <td>星期日</td>
          </th>
        </tr>
        <tr class="active">
          <td></td>
          <td>1</td>
          <td>Bootstraps</td>
          <td>C#</td>
          <td>java</td>
          <td>MySQL</td>
          <td>休息</td>
          <td>休息</td>
        </tr>
        <tr class="success">
          <td></td>
          <td>2</td>
          <td>Bootstraps</td>
          <td>C#</td>
          <td>java</td>
          <td>MySQL</td>
          <td>休息</td>
          <td>休息</td>
        </tr>
        <tr class="info">
          <td></td>
          <td>3</td>
          <td>Bootstraps</td>
          <td>C#</td>
          <td>java</td>
          <td>MySQL</td>
          <td>休息</td>
          <td>休息</td>
        </tr>
        <tr class="danger">
          <td></td>
          <td>4</td>
          <td>Bootstraps</td>
          <td>C#</td>
          <td>java</td>
          <td>MySQL</td>
          <td>休息</td>
          <td>休息</td>
        </tr>
        <tr class="danger">
          <td></td>
          <td>5</td>
          <td>Bootstraps</td>
          <td>C#</td>
          <td>java</td>
          <td>MySQL</td>
          <td>休息</td>
          <td>休息</td>
        </tr>
        <tr class="danger">
          <td></td>
          <td>6</td>
          <td>Bootstraps</td>
          <td>C#</td>
          <td>java</td>
          <td>MySQL</td>
          <td>休息</td>
          <td>休息</td>
        </tr>
        <tr>
      </table>
    </div>
  </div>
</body>

</html>

表单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bootstraps 表单</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div class="container">
    <h1>表单案例</h1>
    <from>
      <div class="form-group">
        <label for="myeamil">邮箱</label>
        <input type="email" class="form-control" id="myeamil" placeholder="邮箱" />
      </div>
      <div class="form-group">
        <label for="mypsd">密码</label>
        <input type="password" class="form-control" id="mypsd" placeholder="密码" />
      </div>
      <div class="form-group">
        <label for="myfile">文件</label>
        <input type="file" id="myfile" />
      </div>
      <div class="checkbox">
        <label for="mychk">
          <input type="checkbox" id="" />选择我
        </label>
      </div>
      <button type="submit" class="btn btn-default">提交</button>
    </from> <br> <br>
    <from class="form-inline">
      <div class="form-group">
        <label for="myeamil">邮箱</label>
        <input type="email" class="form-control" id="myeamil" placeholder="邮箱" />
      </div>
      <div class="form-group">
        <label for="mypsd">密码</label>
        <input type="password" class="form-control" id="mypsd" placeholder="密码" />
      </div>
      <button type="submit" class="btn btn-default">提交</button>
    </from> <br> <br>
    <from class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="myeamil">邮箱</label>
        <input type="email" class="form-control" id="myeamil" placeholder="邮箱" />
      </div>
      <div class="form-group">
        <label class="sr-only" for="mypsd">密码</label>
        <input type="password" class="form-control" id="mypsd" placeholder="密码" />
      </div>
      <button type="submit" class="btn btn-default">提交</button>
    </from> <br><br>
    <from class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="myeamil">金额</label>
        <div class="input-group">
          <div class="input-group-addon">$</div>
          <input type="text" class="form-control" id="mymoeny" placeholder="金额" />
          <div class="input-group-addon">.00</div>
        </div>
      </div>
      <button type="submit" class="btn bg-primary">交换</button>
    </from>
  </div>
</body>

</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstraps表单</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <ul class="list-inline">
            <li>首页</li>
            <li>岗位课</li>
            <li>商城</li>
            <li>关于我们</li>
        </ul>
        <ol>
            <li>首页</li>
            <li>岗位课</li>
            <li>商城</li>
            <li>关于我们</li>  
        </ol>
    </div>
    <dl class="dl-horizontal">
        <dt>购物指南</dt>
        <dd>购物流程, 会员价格</dd>
        <dt>配送方式</dt>
        <dd>上门自理, 海外配送</dd>
        <dt>售后服务</dt>
        <dd>售后政策, 价格保护, 退款说明, 取消订单, 退换货</dd>
    </dl>
</html>
Ly_cat
关注
  • 5
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值