Bootstrap实战之新闻网

最新推荐文章于 2023-09-12 14:38:32 发布

姚舜禹_12140

最新推荐文章于 2023-09-12 14:38:32 发布

阅读量2.5k

点赞数 9

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_47382783/article/details/111743905

版权

Bootstrap 专栏收录该内容

2 篇文章 2 订阅

订阅专栏

一、效果展示

二、主要功能

1、当界面处于大屏幕下，顶部导航栏正常显示。

2、当界面处于小屏幕下，顶部导航栏除logo之外全部隐藏，显示出Menu，通过点击Menu将导航栏的信息展示出来。

3、点击顶部的“首页”，跳转至首页。

4、点击页面上的新闻，跳转至具体新闻页面。本项目中仅展示中间内容的第一条新闻跳转功能，如需完成其他新闻跳转至详情页，可自己实现。

5、分别点击注册、登录，跳转至注册和登录页面。

三、分析实现

1、开发工具与相关技术

开发工具：HBuilder

2、环境搭建

（1）引入bootstrap文件

（2）在CSS目录下创建index.css文件

（3）在index.html、news.html、login.html和register.html中引入上述文件。

目录结构如下：

3、结构分析与整体框架

（1）index页面

来看下图：

通过观察上图，可以发现：

a：从整体上，自上而下分为三部分：顶部导航栏、中间内容部分以及底部页脚部分。

b：主题内容部分，自左向右分为：左侧、中间和右侧三大区域。

c：主题内容的中间部分显示的是每条新闻的简要信息，每一条新闻信息可以分为左右两大部分。

d：主题内容的右边部分可分为上下两大部分，下部分的内容可分为标题和具体内容。如下：

经过上述分析，可以搭建起index.html的主体框架，代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>新闻实战</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<!-- 导航栏 -->
		<nav class="navbar navbar-default">
			
		</nav>
		<!-- 主题内容 -->
		<div class="container">
			<div class="row">
				<!-- 左侧部分 -->
				<div class="col-sm-2">
					
				</div>
				<!-- 中间部分 -->
				<div class="col-sm-7">
					<div class="news-list">
						<div class="news-list-item clearfix">
							<!-- 左边图片部分 -->
							<div class="col-sm-5">
								
							</div>
							<!-- 右边文字部分 -->
							<div class="col-sm-7">
							</div>
						</div>
						
					</div>
				</div>
				<!-- 右侧部分 -->
				<div class="col-sm-3 clearfix">
				</div>
			</div>
		</div>
		<!-- 页脚部分 -->
		<div class="footer">
			
		</div>

	</body>
</html>

其中，对于中间内容的右侧部分可进行更为细致的划分，如下：

                <div class="col-sm-3 clearfix">
					<!-- 搜索框 -->
					<div class="searhc-bar">
						<input type="search" class="form-control" />
					</div>
					<!-- 报警区 -->
					<div class="side-bar-card flag clearfix">
						<div class="col-xs-5">
							<img src="img/警察.png" />
						</div>
						<div class="col-xs-7 text-jb">
							<p>有害信息举报专区</p>
							<p>举报电话：12377</p>
						</div>
					</div>
					<!-- 24小时热文 -->
					<div class="side-bar-card">
						<!-- 标题 -->
						<div class="card-title">
							24小时热文
						</div>
						<!-- 具体新闻信息 -->
						<div class="card-body">
							<div class="list">
								
							</div>
						</div>
						
					</div>
				</div>

（2）news页面

新闻详情页如下：

观察上图：新闻详情页从上到下也分为三部分，由于截屏原因，页脚并未截取。中间内容部分可分为左右两大部分。左侧部分为新闻的具体信息，右侧部分包括了相关推荐和24小时热文。整体框架如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>新闻实战</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="css/index.css"/>
	</head>
	<body>
		<!-- 导航栏 -->
		<nav class="navbar navbar-default">
			
		</nav>
		<!-- 主题内容 -->
		<div class="container">
			<!-- 左侧占8列 -->
			<div class="col-md-8">
				
			</div>
			<!-- 右侧占四列 -->
			<div class="col-md-4">
				<div class="side-bar-card">
					<div class="card-title">
						相关推荐
					</div>
					<div class="card-body">
						<div class="list">
							<div class="item clearfix">
								<div class="col-xs-5 no-padding-h">
								</div>
								<div class="col-xs-7">
								</div>
							</div>
						</div>
						
					</div>
					<div class="side-bar-card">
						<div class="card-title">
							24小时热文
						</div>
						
						<div class="card-body">
							<div class="list">
								<div class="item">
									
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
		</div>
	</body>
</html>

（3）login页面

登陆页面如下：

观察上图可知：登录页面从上到下分为三部分：顶部导航栏、中间表单以及底部页脚三大部分，则其整体框架为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>新闻实战</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<!-- 导航栏 -->
		<nav class="navbar navbar-default">
			
		</nav>
		<!-- 表单项 -->
		<div class="container contain-small">
			<h1>
				<small>没有账号？<a href="register.html">请注册</a></small>
			</h1>
			<form action="" method="">
				
			</form>
		</div>
		<!-- 底部页脚 -->
		<div class="footer">
		</div>

	</body>
</html>

（4）register页面

注册页面如下：

观察上图知：注册页面与登陆页面仅表单项不一致，其余部分基本一致。其主框架为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>新闻实战</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<!-- 导航栏 -->
		<nav class="navbar navbar-default">
			
		</nav>
		<!-- 表单项 -->
		<div class="container contain-small">
			<h1>
				<small>欢迎注册</a></small>
			</h1>
			<form action="" method="">
				
			</form>
		</div>
		<!-- 底部页脚 -->
		<div class="footer">
		</div>

	</body>
</html>

4、超小屏幕下导航栏的隐藏

通过效果图，不难发现，在超小屏幕下将导航栏进行隐藏，取而代之的是Menu。通过点击Menu将导航栏再次显示出来。那么如果达到这个效果呢？

a：超小屏幕下将导航栏所在的div设置class属性hidden-xs

b：定义label标签。点击label的时候改变checkbox的属性，通过label的for属性与checkbox的id属性关联。如果label被点击，就代表checkbox被选中，则此时导航栏展示出来，反之，则将导航栏隐藏。

如下：

具体实现：

                <label for="toggle-checkbox" id="toggle-label" class="visible-xs-inline-block">Menu</label>
				<input type="checkbox" id="toggle-checkbox" class="hidden"/>
				<div class="hidden-xs">
					<ul class="nav navbar-nav">
						<li><a href="index.html">首页</a></li>
						<li><a href="#">科技</a></li>
						<li><a href="#">焦点</a></li>
						<li><a href="#">文化</a></li>
						<li><a href="#">搞笑</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="login.html">登录</a></li>
						<li><a href="register.html">注册</a></li>
					</ul>
				</div>

index.css中的实现：

#toggle-checkbox:checked ~ div{
	display: block!important;
}

四、具体代码

index.html的实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>新闻实战</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<!-- 导航栏 -->
		<nav class="navbar navbar-default">
			<div class="container">
				<div class="navbar-header">
					<a href="index.html" class="navbar-brand"></a>
				</div>
				<label for="toggle-checkbox" id="toggle-label" class="visible-xs-inline-block">Menu</label>
				<input type="checkbox" id="toggle-checkbox" class="hidden"/>
				<div class="hidden-xs">
					<ul class="nav navbar-nav">
						<li><a href="index.html">首页</a></li>
						<li><a href="#">科技</a></li>
						<li><a href="#">焦点</a></li>
						<li><a href="#">文化</a></li>
						<li><a href="#">搞笑</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="login.html">登录</a></li>
						<li><a href="register.html">注册</a></li>
					</ul>
				</div>
				
			</div>
		</nav>
		<!-- 主题内容 -->
		<div class="container">
			<div class="row">
				<!-- 左侧部分 -->
				<div class="col-sm-2">
					<div class="list-group slider-bar">
						<a href="#" class="list-group-item">首页</a>
						<a href="#" class="list-group-item">国际</a>
						<a href="#" class="list-group-item">国内</a>
						<a href="#" class="list-group-item">社会</a>
						<a href="#" class="list-group-item">影视</a>
						<a href="#" class="list-group-item">运动</a>
					</div>
				</div>
				<!-- 中间部分 -->
				<div class="col-sm-7">
					<div class="news-list">
						<div class="news-list-item clearfix">
							<div class="col-sm-5">
								<img src="img/news-1.jpg" />
							</div>
							<div class="col-sm-7">
								<div class="title">
									<a href="news.html">中东部将现入冬以来最冷天气：羽绒服等抗寒物质热销、甚至断货</a>
								</div>
								<div class="info">
									<p class="text-muted">出处：快科技 作者：雪花 编辑：雪花</p>
									<p class="text-muted">2020-12-26 09:28:37 人气： 5010 次 评论(6)</p>
								</div>
							</div>
						</div>
						<div class="news-list-item clearfix">
							<div class="col-sm-5">
								<img src="img/news-3.png" />
							</div>
							<div class="col-sm-7">
								<div class="title">
									<a>6旬残疾老人回应跳井救男童：急得忘记了生死，即便牺牲也无所谓</a>
								</div>
								<div class="info">
									<p class="text-muted">出处：北京晚报官网官方帐号</p>
									<p class="text-muted">12-26 10:14 人气： 24060 次 评论(992)</p>
								</div>
							</div>
						</div>
						<div class="news-list-item clearfix">
							<div class="col-sm-5">
								<img src="img/news-4.PNG" />
							</div>
							<div class="col-sm-7">
								<div class="title">
									<a>保安为考研生建群共享教室信息 暖心！</a>
								</div>
								<div class="info">
									<p class="text-muted">出处：北京晚报官网官方帐号</p>
									<p class="text-muted">2020-12-26 10:29:51 人气： 9300 次 评论(4235)</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 右侧部分 -->
				<div class="col-sm-3 clearfix">
					<div class="searhc-bar">
						<input type="search" class="form-control" />
					</div>
					<div class="side-bar-card flag clearfix">
						<div class="col-xs-5">
							<img src="img/警察.png" />
						</div>
						<div class="col-xs-7 text-jb">
							<p>有害信息举报专区</p>
							<p>举报电话：12377</p>
						</div>
					</div>
					<div class="side-bar-card">
						<div class="card-title">
							24小时热文
						</div>
						<div class="card-body">
							<div class="list">
								<div class="item">
									<div class="title">苹果给用户发邮件：价格乌龙订单将被取消</div>
									<div class="desc text-muted">发布时间：12-25 15:46 青岛软媒网络科技有限公司</div>
								</div>
								<div class="item"></div>
							</div>
						</div>
						<div class="card-body">
							<div class="list">
								<div class="item">
									<div class="title">为塞尔维亚带来首批援塞中国专家的英雄机长，因新冠肺炎去世</div>
									<div class="desc text-muted">发布时间：12-2520:14上海观察者信息技术有限公司官方帐号,优质创作者</div>
								</div>
								<div class="item"></div>
							</div>
						</div>
						<div class="card-body">
							<div class="list">
								<div class="item">
									<div class="title">降温幅度堪比2016年“霸王级”寒潮！关于年末寒潮你必须知道的十大要点</div>
									<div class="desc text-muted">发布时间：12-25 18:44中国天气网,优质创作者</div>
								</div>
								<div class="item"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源
		</div>

	</body>
</html>

news.html的实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>新闻实战</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="css/index.css"/>
	</head>
	<body>
		<!-- 导航栏 -->
		<nav class="navbar navbar-default">
			<div class="container">
				<div class="navbar-header">
					<a href="index.html" class="navbar-brand"></a>
				</div>
				<label for="toggle-checkbox" id="toggle-label" class="visible-xs-inline-block">Menu</label>
				<input type="checkbox" id="toggle-checkbox" class="hidden"/>
				<div class="hidden-xs">
					<ul class="nav navbar-nav">
						<li><a href="index.html">首页</a></li>
						<li><a href="#">科技</a></li>
						<li><a href="#">焦点</a></li>
						<li><a href="#">文化</a></li>
						<li><a href="#">搞笑</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="login.html">登录</a></li>
						<li><a href="register.html">注册</a></li>
					</ul>
				</div>
				
			</div>
		</nav>
		<div class="container">
			<div class="col-md-8">
				<h1 class="news-title">中东部将现入冬以来最冷天气：羽绒服等抗寒物质热销、甚至断货</h1>
				<div class="news-status">
					2020-12-26 09:28:37  出处：快科技 作者：雪花 编辑：雪花   人气： 5010 次    评论(6)
				</div>
				<div class="news-content">
					<blockquote>
						<p>
							羽绒服等抗寒物质热销、甚至断货
						</p>
					</blockquote>
					
					中央气象台预计，12月28日至31日，将有一股强冷空气影响我国中东部地区，届时大风降温雨雪都会陆续登场，西北地区东部、华北、黄淮、江汉、江南等地可达10～12℃，并将伴有4～6级偏北风，阵风可达7～8级，级别堪称今冬最强寒潮。
					
					据悉，此次天气过程具有影响范围广、降温剧烈、气温低、大风持续时间长等特点。其中，沈阳、呼和浩特等地最高气温低于-10℃；上海、合肥、无锡、武汉、西安等地最低气温都将跌破-5℃；广州的最低气温也将跌至4℃左右。具体预报如下：
					
					大风降温方面，预计28日至31日，中东部大部地区气温将下降8～10℃，西北地区东部、东北地区东南部、华北西部和北部、黄淮南部、江淮、江南、华南中北部等地降温12～14℃，局地降温幅度可达14℃以上；降温过后，最低气温0℃线将南压至华南北部一带，最低气温-10℃线在黄河下游到秦岭一带；中东部大部地区将有4～6级、阵风7～9级偏北风，我国东部和南部海区有7～9级、阵风10～11级偏北风。
					
					气象专家提醒，12月以来中东部大部地区气温较常年同期偏低，最低气温0℃线基本达到了今年入冬以来最南位置。
					
					另外，因持续的低温和大风天气，中东部地区风寒效应明显。公众需及时关注天气，做好防风御寒措施，谨防感冒；还需防范雨雪和低温导致的道路积雪结冰对出行交通等的不利影响。
					
					随着年末寒潮来袭，一些抗寒物质也出现了热销的情况，据统计羽绒服、围巾、手套、棉靴、暖宝宝之类的抗寒商品，近段时间同比增长了50%，不少甚至出现了断货的情况。
					<br/>
					<img src="img/news-1.jpg"/>
				</div>
			</div>
			<div class="col-md-4">
				<div class="side-bar-card">
					<div class="card-title">
						相关推荐
					</div>
					<div class="card-body">
						<div class="list">
							<div class="item clearfix">
								<div class="col-xs-5 no-padding-h">
									<img src="img/news-2.jpeg"/>
								</div>
								<div class="col-xs-7">
									<div class="title">元旦后将补缴电商税被阿里火速辟谣，电商征税正进入最后倒计时</div>
									<div class="desc">发布时间：12-26 10:23</div>
								</div>
							</div>
							<div class="item clearfix">
								<div class="col-xs-5 no-padding-h">
									<img src="img/news-2.jpeg"/>
								</div>
								<div class="col-xs-7">
									<div class="title">元旦后将补缴电商税被阿里火速辟谣，电商征税正进入最后倒计时</div>
									<div class="desc">发布时间：12-26 10:23</div>
								</div>
							</div>
							<div class="item clearfix">
								<div class="col-xs-5 no-padding-h">
									<img src="img/news-2.jpeg"/>
								</div>
								<div class="col-xs-7">
									<div class="title">元旦后将补缴电商税被阿里火速辟谣，电商征税正进入最后倒计时</div>
									<div class="desc">发布时间：12-26 10:23</div>
								</div>
							</div>
						</div>
						
					</div>
					<div class="side-bar-card">
						<div class="card-title">
							24小时热文
						</div>
						<div class="card-body">
							<div class="list">
								<div class="item">
									<div class="title">苹果给用户发邮件：价格乌龙订单将被取消</div>
									<div class="desc text-muted">发布时间：12-25 15:46 青岛软媒网络科技有限公司</div>
								</div>
								<div class="item"></div>
							</div>
						</div>
						<div class="card-body">
							<div class="list">
								<div class="item">
									<div class="title">苹果给用户发邮件：价格乌龙订单将被取消</div>
									<div class="desc text-muted">发布时间：12-25 15:46 青岛软媒网络科技有限公司</div>
								</div>
								<div class="item"></div>
							</div>
						</div>
						<div class="card-body">
							<div class="list">
								<div class="item">
									<div class="title">苹果给用户发邮件：价格乌龙订单将被取消</div>
									<div class="desc text-muted">发布时间：12-25 15:46 青岛软媒网络科技有限公司</div>
								</div>
								<div class="item"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footer">
			转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>新闻实战</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<!-- 导航栏 -->
		<nav class="navbar navbar-default">
			<div class="container">
				<div class="navbar-header">
					<a href="index.html" class="navbar-brand"></a>
				</div>
				<label for="toggle-checkbox" id="toggle-label" class="visible-xs-inline-block">Menu</label>
				<input type="checkbox" id="toggle-checkbox" class="hidden"/>
				<div class="hidden-xs">
					<ul class="nav navbar-nav">
						<li><a href="index.html">首页</a></li>
						<li><a href="#">科技</a></li>
						<li><a href="#">焦点</a></li>
						<li><a href="#">文化</a></li>
						<li><a href="#">搞笑</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="login.html">登录</a></li>
						<li><a href="register.html">注册</a></li>
					</ul>
				</div>
				
			</div>
		</nav>
		<!-- 主题内容 -->
		<div class="container contain-small">
			<h1>
				<small>没有账号？<a href="register.html">请注册</a></small>
			</h1>
			<form action="" method="">
				<div class="form-group">
					<label>用户名/手机/邮箱</label>
					<input type="text" class="form-control"/>
				</div>
				<div class="form-group">
					<label>密码</label>
					<input type="password" class="form-control"/>
				</div>
				<div class="form-group">
					<input type="submit" class="btn btn-primary btn-block"/>
				</div>
				<div class="form-group">
					<a>忘记密码？</a>
				</div>
			</form>
		</div>
		<div class="footer">
			转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源
		</div>

	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>新闻小项目</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<!-- 导航栏 -->
		<nav class="navbar navbar-default">
			<div class="container">
				<div class="navbar-header">
					<a href="index.html" class="navbar-brand"></a>
				</div>
				<label for="toggle-checkbox" id="toggle-label" class="visible-xs-inline-block">Menu</label>
				<input type="checkbox" id="toggle-checkbox" class="hidden"/>
				<div class="hidden-xs">
					<ul class="nav navbar-nav">
						<li><a href="index.html">首页</a></li>
						<li><a href="#">科技</a></li>
						<li><a href="#">焦点</a></li>
						<li><a href="#">文化</a></li>
						<li><a href="#">搞笑</a></li>
					</ul>
					<ul class="nav navbar-nav navbar-right">
						<li><a href="login.html">登录</a></li>
						<li><a href="register.html">注册</a></li>
					</ul>
				</div>
				
			</div>
		</nav>
		<!-- 主题内容 -->
		<div class="container contain-small">
			<h1>
				<small>欢迎注册</a></small>
			</h1>
			<form action="" method="">
				<div class="form-group">
					<label>手机/邮箱</label>
					<input type="text" class="form-control"/>
				</div>
				<div class="form-group">
					<label>验证码</label>
					<div class="input-group">
						<input type="text" class="form-control"/>
						<div class="input-group-btn">
							<div class="btn btn-default">获取验证码</div>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label>输入密码</label>
					<input type="password" class="form-control"/>
				</div>
				<div class="form-group">
					<label>再次输入密码</label>
					<input type="password" class="form-control"/>
				</div>
				<div class="form-group">
					<input type="submit" class="btn btn-primary btn-block"/>
				</div>
			</form>
		</div>
		<div class="footer">
			转载内容版权归作者及来源网站所有，本站原创内容转载请注明来源
		</div>

	</body>
</html>

样式文件index.css

img{
	display: inline-block;
	width: 100%;
}
a{
	text-decoration: none;
}
a:hover{
	text-decoration: none;
	cursor: pointer;
}
.navbar{
	text-align: center;
}
.navbar-brand{
	background-image: url(../img/logo.png);
	width: 100px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}
.navbar-default .navbar-nav>li {
	width: 120px;
}
.navbar-default .navbar-nav>li>a {
    font-size: 18px;
}
.navbar-default .navbar-nav>li>a:hover {
    background-color: white;
	color: #000000;
}
.slider-bar .list-group-item{
	border: 0;
	border-radius: 5px;
	font-size: 14px;
	text-align: center;
	background-color:gainsboro;
}

.slider-bar .list-group-item:hover{
	background-color: #efaccb;
}


.news-list-item {
	padding-top: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid gainsboro;
}
.news-list-item .title{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.5;
}
.news-list-item .info p{
	display: inline-block;
}

.side-bar-card{
	background: rgba(0, 0, 0, 0.1);
	margin-top: 15px;
	padding: 10px 0;
}
.side-bar-card.flag{
	padding: 20px 0;
}
.side-bar-card .text-jb{
	font-size: 14px;
	text-align: center;
	line-height: 2;
} 

.side-bar-card .card-title,
.side-bar-card .card-body .list .item{
	padding: 10px 15px;
}
.side-bar-card .card-title{
	font-size: 18px;
	font-weight: bold;
	padding-top: 0;
	padding-bottom: 0;
}
.side-bar-card .card-body .list .item:hover{
	background: rgba(0, 0, 0, 0.1);
	cursor: pointer;
}

.side-bar-card .card-body .list .title{
	padding-bottom: 5px;
}

.news-title{
	line-height: 1.5;
}

.news-status{
	color: #999;
}
.news-content{
	margin-top: 20px 0;
	font-size: 18px;
	line-height: 2;
}
.news-content img{
	margin-top: 10px auto;
}
.no-padding-h{
	padding-left: 0;
	padding-right: 0;
}
.footer{
	margin-top: 20px;
	padding: 50px 0;
	text-align: center;
	color: #D4D4D4;
}

.contain-small{
	max-width: 500px;
}

.btn-primary{
	background-color: #efaccb;
	border-color: #efaccb;
}
.btn-primary:hover{
	background-color: hotpink;
	border-color: hotpink;
}
.btn-primary:focus{
	background-color: hotpink;
	border-color: hotpink;
}

#toggle-checkbox:checked ~ div{
	display: block!important;
}
#toggle-label{
	display: inline-block;
	position: absolute;
	right: 10px;
	top: 10px;
	font-size: 16px;
	font-weight: normal;
	display: none;
}