BootStrap前端框架网页模板

最新推荐文章于 2024-06-06 13:42:49 发布

zhang1409399037

最新推荐文章于 2024-06-06 13:42:49 发布

阅读量6.4k

点赞数 1

分类专栏： BootStrap 原创 UI 文章标签： BootStrap UI

本文链接：https://blog.csdn.net/zhang1409399037/article/details/88679635

版权

一、网页效果图如下：

二、网页代码如下：

与网页同级目录有这几个：其中Font-Awesome-3.2.1是bootstrap的字体图标库，其他的大家自己可以搞定，主要看代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">


<!--导入bootstrap的样式和js以及1.9版本以上的JQuery-->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="Font-Awesome-3.2.1/css/font-awesome.min.css"><!--字体图标-->

  <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

  <title>Document</title>

  
 </head>
 <body>
 
     <!--导航栏,设置导航栏的样式为默认navbar-default，而navbar-inverse，,nav里面加上navbar-fixed-top试一下导致导航栏顶部下面以部门区域覆盖，后面我加了br换行-->
     <nav class="navbar navbar-default navbar-fixed-top">
	     <div class="container-fluid">
		   <div class="navbar-header">
		     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my_nav" aria-expanded="false">
			   <!--兼容性使用-->
			    <span class="sr-only">Toggle navigation</span>
			   <!--当在移动访问时，右上角出现按钮，表示按钮上的三根横线-->
			    <span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			 </button>
		     <a href="#" class="navbar-brand" style="padding: 0px 15px 0px 15px;"> 
			   <img src="images/csdn1.png" class="img-responsive" style="width:50px;height:50px;" ></img>
			 </a>
		 </div>

           
		 <!--导航条菜单-->
		 <div class="collapse navbar-collapse" id="my_nav">
		     <ul class="nav navbar-nav">
	            <li class="active"><a href="#">首页</a></li>
				 <li><a href="#">博客</a></li>
                 <li><a href="#">商城</a></li>
				 <li><a href="#">下载</a></li>
				 <li><a href="#">商城</a></li>
				 <li><a href="#">招聘</a></li>
				 <li><a href="#">问答</a></li>
				 <li><a href="#">活动</a></li>
				 <li><a href="#">论坛</a></li>       
	          </ul>

			  <form class="navbar-form navbar-left">
			    <div class="input-group">
				   <input type="text" class="form-control" placeholder="搜CSDN"/>
				   <span class="input-group-btn">
				     <button class="btn btn-primary&

最低0.47元/天解锁文章

zhang1409399037

关注

1
点赞
踩
55

收藏

觉得还不错? 一键收藏
1
评论
BootStrap前端框架网页模板

一、网页效果图如下：二、网页代码如下：与网页同级目录有这几个：其中Font-Awesome-3.2.1是bootstrap的字体图标库，其他的大家自己可以搞定，主要看代码如下：<!doctype html><html lang="en"> <head> <meta charset=...
复制链接

扫一扫