bootstrap实现网站首页_少儿编程网站首页代码-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44063001/article/details/88016287

本文详细介绍了如何利用Bootstrap框架来设计和实现一个响应式的网站首页。内容包括Bootstrap的 grid 系统应用、导航栏设置、模态框的使用以及自定义样式的方法，帮助读者掌握创建现代网页布局的关键技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.css" />
	</head>
	<body>
		<!--1.logo-->
		<div>
			<!--中等屏幕占4份,小屏占6份,超小占12份-->
			<div class="col-md-4 col-sm-6 col-xs-12">
				<img src="img/logo2.png" />
			</div>
			<!--中等屏幕占4份,小屏占6份,超小占12份-->
			<div class="col-md-4 col-sm-6 col-xs-12">
				<img src="img/header.jpg"/>
			</div>
			<!--中等屏幕占4份,小屏占6份,超小占12份-->
			<div class="col-md-4 col-sm-6 col-xs-12 text-center" style="margin-top: 20px;">
				<a href="#">登录</a>
				<a href="#">注册</a>
				<a href="#">购物车</a>
			</div>
		</div>
		
		<!--1,2之间要加一个清除浮动,否则会叠加在一起-->
		<div class="clearfix"></div>
		
		<!--2.导航栏(扣bootstrap上面的)-->
		<!--导航条-->
		<nav class="navbar navbar-inverse">
		  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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 class="navbar-brand" href="#"><font color="white" face="微软雅黑">首页</font></a>
		    </div>		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li>&l