bootstrap开发小网页实例

最新推荐文章于 2024-09-08 23:43:26 发布

sinat_39173458

最新推荐文章于 2024-09-08 23:43:26 发布

阅读量1.6k

点赞数 1

分类专栏： C语言杭电OJ

本文链接：https://blog.csdn.net/sinat_39173458/article/details/74011989

版权

这篇博客记录了作者在慕课上初次学习并使用Bootstrap制作小网页的过程。尽管没有前端语言基础，但通过调用Bootstrap组件，作者成功创建了网页，并体验到了编程的乐趣。以下是展示的代码片段。

摘要由CSDN通过智能技术生成

慕课上跟着老师做的，之前没学过这些前端语言，不过调用别人所写的东西，好像就不需要写代码（哈哈）。看着自己写出来的东西（虽然是照着老师的写的），还是挺有成就感。下面看看成果。

下面是代码：

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>现代浏览器博物馆</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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]-->
	<style>
	body{
	padding-top:50px;
	padding-bottom:50px;
	}
	.carousel{
	height:500px;
	background-color:#000;
	margin-bottom:60px;
	}
	.carousel .item{
	height:500px;
	
	}
	.carousel img{
	width:100%;
	height:100%;
	}
	.carousel-caption p{
	margin-bottom:20px;
	font-size:20px;
	line-height:1.8;
	}
	
	#summary-container .col-md-4
	{
	  text-align:center;
	}
	.feature{
	padding:30px 0;
	}
	.feature-heading
	{
	  font-size:50px;
	  color:#2a6496;
	  margin-top:120px;
	}
	.feature-heading .text-muted
	{
	  font-size:28px;
	  color:#999;
	
	}
	
	
	</style>
  </head>
  <body>
    <nav class="navbar navbar-default navbar-fixed-top navbar-inverse"role="navigation">
  <div class="container">
    <!-- 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="#">现代浏览器博物馆</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-na