mvc5+ef+ adminlte教程20：响应式布局的更改一
我要让PC和移动两个样式，说到底，就是响应式了，反正带bootstrap.
一、login页面。
<div class="col-md-4 col-xs-8 col-center-block">
<section id="loginForm">
@using (Html.BeginForm("Login", "User", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
注意看中间的col-xs-8,这个是让它居中的原因。 然后在jsddh.css中增加
col-center-block的代码。
/*login*/
.col-center-block {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
}
效果：达到大屏小屏都居中。
2.更改布局页面。
只要更改布局页面，才能达到我们的PC和手机的要求。
我们先要以HOHE/INDEX为查看效果。
先上源码，改得差不多的了。
@using Microsoft.AspNet.Identity
@{
string id = User.Identity.GetUserId();
Session["rquesturl"]= Request.Url.ToString();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>@ViewBag.Title </title>
@Styles.Render("~/Content/adminlte/bootstrap/css")
<link href="~/Content/jsdhh.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- HTML5 Shim and Respond.js 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://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="~/Content/jsdhh.css" rel="stylesheet" />
</head>
<body class="hold-transition skin-blue layout-boxed sidebar-mini">
<div class="alltitleapp hidden-md hidden-lg navbar-fixed-top" style="z-index:999;">
<div class="container jsapptitle">
<div class="col-xs-4 col-sm-4"> @Session["TitleName"] </div>
@using (Html.BeginForm("indexList", "CmsContents", FormMethod.Post, new { @class = "form-horizontal" }))
{
<div class="cole-sm-8 cole-xs-8">
<div class="input-group input-group-sm">
@Html.TextBox("SearchString", "", new { @class = "form-control" , style = "margin-top:5px;" })
<span class="input-group-btn">
<input id="btnSearch" class="btn btn-default" type="submit" value="GO!">
</span>
</div>
</div>}
</div>
<div class="container" style="padding-left:0px;margin-left:0px;">@Html.Action("HeadMenu", "Home")</div>
</div>
<div class="appmarintop hidden-md hidden-lg"></div>
<div class=" container navtitle hidden-sm hidden-xs">
@Session["TitleName"]
</div>
<div class="wrapper" style="background:#ffffff;box-shadow:none;">
<!-- app head css -->
<!-- end app css -->
<!-- Main Header -->
<header class="main-header hidden-xs hidden-sm">
<!-- Logo -->
<a href="~/home/index" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>H</b>LT</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>HomeP</b>age</span>
</a>
<!-- Header Navbar -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar">---</span>
<span class="icon-bar">---</span>
<span class="icon-bar">---</span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("文章中心", "IndexList", "CmsContents",new { SeachColumnString = 1},"")</li>
<li>@Html.ActionLink("内部邮件", "index", "Emails")</li>
<li>@Html.ActionLink("支撑", "index", "ClubContents")</li>
<li>@Html.ActionLink("图表分析", "index", "Echarones")</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="~/NewArrearones/" role="button" aria-haspopup="true" aria-expanded="false">
分析 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>@Html.ActionLink("欠费分析", "index", "NewArrearones")</li>
<li>@Html.ActionLink(@Session["SpecialOneName"].ToString(), "index", "Specialoneones")</li>
<li>@Html.ActionLink(@Session["SpecialTwoName"].ToString(), "index", "Specialtwoones")</li>
<li>@Html.ActionLink(@Session["SpecialThreeName"].ToString(), "index", "Specialthreeones")</li>
<li>@Html.ActionLink(@Session["SpecialFourName"].ToString(), "index", "Specialfourones")</li>
</ul>
</li>
</ul>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">@Session["emalcount"]</span>
</a>
<ul class="dropdown-menu">
<li class="header">你有 <span class="label label-primary">@Session["emalcount"] </span> 未读邮件</li>
<li>
<!-- inner menu: contains the messages -->
<ul class="menu">
<li><a href="~/Emails/Index"><i class="fa fa-inbox"></i> 收件箱</a></li>
<li><a href="~/Emails/SeedIndex"><i class="fa fa-envelope-o"></i> 已发邮箱</a></li>
<li><a href="~/Emails/Create"><i class="fa fa-file-text-o"></i> 发邮件</a></li>
<!-- end message -->
</ul>
<!-- /.menu -->
</li>
<li class="footer">welcome for you!</li>
</ul>
</li>
<!-- /.messages-menu -->
<!-- Notifications Menu -->
@*<li class="dropdown notifications-menu">
<!-- Menu toggle button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- Inner Menu: contains the notifications -->
<ul class="menu">
<li>
<!-- start notification -->
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
<!-- end notification -->
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>*@
<!-- Tasks Menu 旗子任务图标 -->
@*<li class="dropdown tasks-menu">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- Inner menu: contains the tasks -->
<ul class="menu">
<li>
<!-- Task item -->
<a href="#">
<!-- Task title and progress text -->
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<!-- The progress bar -->
<div class="progress xs">
<!-- Change the css width attribute to simulate progress -->
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>*@
<!-- User Account Menu -->
<li class="dropdown user user-menu" style="z-index:999;">
<!-- Menu Toggle Button -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<!-- The user image in the navbar-->
<img src=@Session["headerPic"] class="user-image" alt="User Image">
<!-- hidden-xs hides the username on small devices so only the image appears. -->
<span class="hidden-xs">@Session["username"] -[ @Session["role"] ]</span>
</a>
<ul class="dropdown-menu">
<!-- The user image in the menu -->
<li class="user-header">
<img src=@Session["headerPic"] class="img-circle" alt="User Image">
<p>
qq：@Session["qq"] | Tel:@Session["phone"]
<small>生日：@Session["birthDate"]</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
<a href="~/User/ChangePassword?id= @User.Identity.GetUserId()">改密码</a>
</div>
<div class="col-xs-4 text-center">
<a href="~/User/DetailsListUser?id=@Session["userId11"]">查看资料</a>
</div>
<div class="col-xs-4 text-center">
<a href="~/User/EditUser?id=@Session["userId11"]">修改资料</a>
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="~/User/Admin" class="btn btn-default btn-flat">后台</a>
</div>
@using (Html.BeginForm("LogOff", "User", FormMethod.Post, new { id = "logoutForm" }))
{ @Html.AntiForgeryToken()
<div class="pull-right">
<a href="javascript:document.getElementById('logoutForm').submit()">注销</a>
</div>}
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<!-- Content Wrapper. Contains page content -->
<div class="container body-content col-sm-12 jscontzinde">
<!-- Content Header (Page header) -->
<!-- 最上面的HEADER -->
@RenderBody()
</div>
</div>
<!--end 中间内容 Content Wrapper. Contains page content -->
<!-- Main Footer -->
<footer class="container-fluid navbar-fixed-bottom hidden-md hidden-lg jsdhhfoot">
<ul>
<li class="col-xs-2 col-sm-2"><a href="~/Home/Index">
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
<p class="dhhfoottit">首页</p>
</a>
</li>
<li class="col-xs-2 col-sm-2"><a href="~/Emails">
<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
<p class="dhhfoottit">邮件</p>
</a>
</li>
<li class="col-xs-2 col-sm-2"><a href="~/Echarones">
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
<p class="dhhfoottit">图表</p>
</a>
</li>
<li class="col-xs-2 col-sm-2">
<a href="~/ClubContents">
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
<p class="dhhfoottit">支撑</p>
</a>
</li>
<li class="col-xs-2 col-sm-2"><a href="~/NewArrearones">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span>
<p class="dhhfoottit">分析</p>
</a>
</li>
<li class="col-xs-2 col-sm-2"><a href="~/Home/About">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<p class="dhhfoottit">我的</p>
</a>
</li>
</ul>
</footer>
<footer class="container dhhfoot hidden-sm hidden-xs">
<p>
© @DateTime.Now.Year -
© CopyRight By @Session["AdminName"] - Tel:@Session["AdminTel"] -QQ: @Session["QQ"]
</p>
<p>© 网站备案:@Session["BeiAnHao"] </p>
</footer>
@*@Scripts.Render("~/bundles/adminlte")*@
@Scripts.Render("~/bundles/adminlte", "~/ueditor/ueditor.config.js", "~/ueditor/ueditor.all.js")
@RenderSection("scripts", required: false)
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
</body>
</html>
然后JSDHH.CSS
/*手动增加的一些CSS*/
body, html, div {
padding: 0;
margin: 0;
}
.navtitle { font-size:40px;padding:20px; color:#1b56fb ;
}
.dhhfoot {
margin-top: 20px;
border-top: 1px solid #1b56fb; padding:10px;
}
.titlepadding {padding:15px;
}
.detail-about {
position: relative;
margin-top: 5px;
line-height: 20px;
background-color: #F2F2F2;
padding: 15px;
color: #999;
}
.dhhtentext {margin: 20px; line-height: 26px; font-size: 16px;}
/**
*文件名：umeditor.css
*******这里开始添加你的CSS***********/
/*编辑器图片自适应大小*/
img {
max-width: 100%; /*图片自适应宽度*/
}
body {
overflow-y: scroll !important;
}
.view {
word-break: break-all;
}
.vote_area {
display: block;
}
.vote_iframe {
background-color: transparent;
border: 0 none;
height: 100%;
}
/*去除点击图片后出现的拉伸边框*/
#edui1_imagescale {
display: none !important;
}
.detail-about {
position: relative;
margin-top: 5px;
line-height: 20px;
background-color: #F2F2F2;
padding: 15px;
color: #999;
}
.clubtentext {
margin: 20px;
line-height: 26px;
font-size: 16px;
overflow: hidden;
max-height:150px;
}
.dhhheight1 {
height:20px;
}
.dhhmargintop {
margin-top:40px;
}
.panel-body ul li {
list-style: none;
}
.dhhbootom {
margin-bottom:10px;
}
.dhhechardiv {
height:300px; width:80%;
}
.dhhleft {
padding-left:20px;
}
.dhhlisttile {
font-size: 24px;
line-height: 42px;
}
.dhhlisttile a{
color:#000000;
}
/*login*/
.col-center-block {
float: none;
display: block;
margin-left: auto;
margin-right: auto;
}
/*app title*/
.alltitleapp {
height: 83px;
border-bottom: 1px solid #d0c8c8;
background-color: #ffffff ;z-index:9999;
}
.jsapptitle {
color: #fff;
background-color: #337ab7;
line-height: 40px;
font-size: 24px;
/*position:relative;*/
}
.jsdhhlititle ul {
list-style-type: none;
}
.jsdhhlititle ul li {
float: left;
color: #000000;
}
.jsdhhlititle ul li a {
color:#000000;
margin-right:10px;
font-size:18px; line-height:26px;
}
.jsdhhlititle ul li a:visited {
color: #000000;
}
.appmarintop {
margin-top:83px;
}
.jscontzinde {
z-index:1;}
/*app-foot*/
.jsdhhfoot {
height: 60px;
padding-top: 8px;
border-top: 1px solid #d0c8c8;
background-color: #ffffff;
z-index: 9999;
width: 100%;
margin-left: 0px;
padding-left: 0px;
}
.jsdhhfoot ul {
list-style-type: none;
}
.jsdhhfoot li {
list-style-type: none;
float: left;
text-align:center;
font-size:20px;
margin-left:0px;padding-left:0px;
}
.dhhfoottit {
font-size: 8px;
}
4.然后，注意我使用了一个头部的菜单自动读取的，在home控制器下
}
public ActionResult HeadMenu()
{
//读取数据栏目表为菜单
///读出所有的栏目
var drolistmenu = db.CmsColumns.Where(x => x.ColumnType == "1");
//end 菜单
return View(drolistmenu);
}
5.在sharp下增加一个分布局
@model IEnumerable<jsdhh2.Models.CmsColumn>
@{
Layout = null;
}
<section class="sidebar jsdhhlititle" >
<ul >
@foreach (var item in Model)
{
<li>
<a href="~/CmsContents/IndexList?SeachColumnString=@item.Id"> @item.Name</a>
</li>
}
</ul>
</section>
6.显示效果。
7.增加About的修改
浙公网安备 33010602011771号