bootstrap前端框架应用实例

最新推荐文章于 2022-04-01 21:01:43 发布

游离的白菜

最新推荐文章于 2022-04-01 21:01:43 发布

阅读量724

点赞数

分类专栏： bootstrap 文章标签： bootstrap css css3 javascript jquery

游离的白菜

本文链接：https://blog.csdn.net/weixin_45652895/article/details/111560624

版权

本文介绍了Bootstrap在实际项目中的应用，通过一个学习网站的案例，展示了如何使用Bootstrap创建主页和详情页，同时探讨了Bootstrap结合CSS3实现的动画效果。

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

bootstrap前端框架的应用
实操案例：学习网站(网站参照的是中国大学慕课）
工具：bootstrap
主页代码展示

<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>中国大学MOOC-不是所有的网站都叫中国大学</title>
	<link href="css/bootstrap.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<script src="js/swiper.min.js"></script>
	<script src="js/jquery-3.1.1.min.js"></script>
	<script src="js/bootstrap.js"></script>
	<script src="js/index.js"></script>

	<style type="text/css">
		/* boty {
		padding-top:200px;
		} */
		.translation {
   
            position: fixed;
			top:0;
			left:0;
            width: 100%;
            height: 100%;
            /* background-color: #3b3b3b;
            opacity: 0.75; */
            background: rgba(0, 0, 0, 0.4);
			z-index: 9;
			display: none;
        }

        .lation-center {
   
            width: 40%;
            background: #fff;
            margin: 0 auto;
            text-align: center;
            margin-top:150px;

        }

        .lation-center h2 {
   
            font-size: 20px;
            color: #333;
            height: 28px;
            line-height: 28px;
            padding: 30px 0 40px 0;
        }
        .Thetext{
   
            padding:30px 0;
          line-height: 30px;
        }
        #Shutdown{
   
            float: right;
            margin-top:10px ;
            margin-right:20px ;
            font-size:28px ;
            color:#666666;
        }
        .caret-bottom{
   
            width:40%;
            margin: 0 auto;
            height:50px;
            background-color: #f5f5f5;
            line-height: 50px;
            columns: #666666;
           
        }
	</style>
</head>

<body>
	<nav class="navbar navbar-default navbar-static-top ">
		<div class="container">
			<ul class="nav nav-pills ">
				<div>
					<a class="navbar-brand" href="#"><img src="中国大学.png" width="150px" width="40px" </a>
				</div>
				<div class="navbar-form navbar-right">
					<a href="#" class="navbar-link">登陆</a>
					<a href="#" class="navbar-link">注册</a>

					</div>
				<li>
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">课程<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<p class="navbar-text">中国大学MOOC，为你提供一流的大学教育</p>
						<li><a href="#">大学</a></li>
						<button type="button" class="btn btn-default">国家精品</button>
						<button type="button" class="btn btn-default">计算机</button>

						<li><a href="#">中国大学是一流的教育平台</a></li>
						<li><a href="#">中国大学是一流的教育平台</a></li>
					</ul>
				</li>
				<li><a href="#">学校</a></li>
				<li><a href="#">学堂云</a></li>
				<li><a href="#">慕课堂</a></li>
				<li><a href="#">下载App</a></li>
				<from class="navbar-form navbar-right" style="margin-right: width=" 220px;>
					<div class="form-group">
						<input type="text" class="form-contro1" />
					</div>
					<button type="button" class="btn btn-group">搜索</button>
				</from>
			</ul>
		</div>
	</nav>
	</div>
	<!--banner部分开始-->
	<div class="banner">
		<div class="w">
			<div class="container">
				<div class="row">
					<div class="col-lg-1">
						<div class="subnav">
							<ul>
								<li>
									<a href="#"><span>国家精品</span></a>
								</li>

								<li>
									<a href="#"><span>外语</span></a>
									<a href="#">听力/</a>
									<a href="#">口语/</a>
									<a href="#">写作/</a>
									<a href="#">翻译</a>
								</li>
								<li>
									<a href="#"><span>理学</span></a>
									<a href="#">数学/</a>
									<a href="#">物理/</a>
									<a href="#">化学/</a>
									<a href="#">天文..</a>
								</li>
								<li>
									<a href="#"><span>工学</span></a>
									<a href="#">力学/</a>
									<a href="#">材料</a>
								</li>
								<li>
									<a href="#"><span>考研</span></a>
									<a href="#">数学/</a>
									<a href="#">考研英语/唐迟英语</a>
								</li>
								<li>
									<a href="#"><span>期末不挂科</span></a>
									<a href="#">数学不挂科/</a>
									<a href="#">英语</a>
								</li>
								<li>
									<a href="#"><span>应试英语</span></a>
									<a href="#">四六级/</a>
									<a href="#">万词班</a>
								</li>
								<li>
									<a href="#"><span>更多》</span></a>
								</li>
							</ul>
						</div>
					</div>
					<div class="col-lg-10">
						<!-- Swiper  中心轮播图-->
						<div class="swiper-container">
							<div class=

最低0.47元/天解锁文章

游离的白菜

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
bootstrap前端框架应用实例

bootstrap前端框架项目：学习网站(网站参照的是中国大学慕课）工具：bootstrap主页代码展示<!doctype html><html><head> <meta charset="utf-8"> <title>中国大学MOOC-不是所有的网站都叫中国大学</title> <link href="css/bootstrap.css" rel="stylesheet"> <link rel=
复制链接

扫一扫

专栏目录