博主信息
博文 33
粉丝 0
评论 0
访问量 26212
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
booststrap初步了解和常见组建的使用
马聪 15558002279的博客
原创
1128人浏览过

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="./dist/css/bootstrap.min.css" >
<!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
<link rel="stylesheet" href="./dist/css/bootstrap-theme.min.css" >
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="./jquery-3.3.1.min.js"></script>
<script src="./dist/js/bootstrap.min.js"></script>


<!-- 新 Bootstrap 核心 CSS 文件 --><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 <!-- 可选的 Bootstrap 主题文件(一般不使用) --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
 <!-- jQuery 文件。务必在 bootstrap.min.js 之前引入 --><script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
 <!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



</head>
<body>
	<div class="container">
		<div class="row">
			

		<div class="col-md-12">
		<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
  <a class="navbar-brand" href="#">首页</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">新闻</a></li>
    <li><a href="#">案例</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
  <form class="navbar-form navbar-right">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>	
	</div>	
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-md-4">
			<ul class="nav nav-pills nav-stacked">
			<li role="presentation" class="active"><a href="#">Home</a></li>
			<li role="presentation"><a href="#">Profile</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
			<li role="presentation"><a href="#">Messages</a></li>
			</ul>
		</div>
		<div class="col-md-8">
		<div class="panel panel-primary">
		  <div class="panel-heading">Panel heading without title</div>
		  <div class="panel-body">
		    <p>123*</p>
		    <p>123*</p>
		    <p>123*</p>
		    <p>123*</p>
		    <p>123*</p>
		    <p ><img src="https://img.php.cn/upload/course/000/126/153/5aa23f0ded921649.jpg" class="img-responsive img-rounded">
		  </div></p>
		</div>

			<div class="panel panel-info">
			  <div class="panel-heading">
			    <h3 class="panel-title">Panel title</h3>
			  </div>
			  <div class="panel-body">
			    <p>Panel content</p>
			    <p>Panel content</p>
			    <p>Panel content</p>
			    <p>Panel content</p>
			    <p>Panel content</p>
			  </div>
			</div>
		</div>
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-md-3 col-md-offset-1"><p>底部链接</p></div>
		<div class="col-md-3 col-md-offset-1"><p>底部链接</p></div>
		<div class="col-md-3 col-md-offset-1"><p>底部链接</p></div>
	</div>
	<br>
	<div class="row">
		<div class="col-md-12 text-center">xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
	</div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学