年後回來，跟之前和幾個同事和朋友聊天，發現有兩個.net的和一個php的朋友都轉到了前端，真是出乎意料。自從之前的webapp興起後，前端感覺比後端吃香很多，總結朋友們轉的原因，大概就幾點 1.易上手，相對其他語言來說，作為後端人員，轉到前端，其實已經有了很好的底子和基礎了，畢竟以前多少都會和js,
前端越來越吃香的感覺
年後回來，跟之前和幾個同事和朋友聊天，發現有兩個.net的和一個php的朋友都轉到了前端，真是出乎意料。自從之前的webapp興起後，前端感覺比後端吃香很多，總結朋友們轉的原因，大概就幾點
1.易上手，相對其他語言來說，作為後端人員，轉到前端，其實已經有了很好的底子和基礎了，畢竟以前多少都會和js,jq,html,css打交道
2.前端比後端容易找工作，這裡的容易找工作，是指不會被後端的語言限死。就像我朋友說的“做網站不一樣需要.net，可以是java，可以是php，但一定離不開js,jq,html,css這些東西”。
3.前端妹子多......
其實自己也覺得有一定道理，感覺這兩年.net的需求度相對其他的語言都弱了些，前程上搜索發現，.net的職位數是1100+，php是1800+, 前端是2000+，java 是3600+（都是僅限於廣州）。所以還是蠻明顯的。
看到了那麼多朋友轉前端，自己也開始搞點前端的東西，近期剛好有點時間，正好研究下webapp開發， 其實webapp開發說到底就是響應式佈局嘛，配合html5+css3就看上去高大上點了。不過作為後端程式猿來說，我還沒打算深入去研究html5和css3，反正就是響應式佈局，用現成的前端框架來練練手。於是，就想用bootstrap做一個簡單的新聞網站來裝下逼。
初試
Boootstrap，來自 Twitter，是目前很受歡迎的前端框架，主要是響應式佈局，無論是文檔，資料，還是demo等都比較齊全，而且界面好看，提供多樣式主題，還有很多開源的插件和模板，上手相對簡單，讓後端程式屌絲也能做出好看的界面。
文件的下載和相關引用，可參考如下地址，詳細明瞭
http://v3.bootcss.com/getting-started/
就是下載後只要依次引入：
bootstrap.min.css
bootstrap-theme.min.css
Jquery.min.js
Bootstrap.min.js
這四個文件就好了，然後 在<head> 之中添加 viewport 元數據標簽，用來指定移動設備優先
<meta name="viewport" content="width=device-width, initial-scale=1">viewport
登陸，註冊
使用到的組件 panel(面板),navbar(導航條),from(表單) jNotify(提示框)
表單驗證，Bootstrap下的表單本身不帶驗證功能，不過它的插件很多，表單插件bootstrapvalidator就是其中一款，感覺它封裝的驗證功能比easyui的還要強大。
下載地址: https://github.com/nghuuphuoc/bootstrapvalidator
使用方式,引入 bootstrapValidator.min.css 和 bootstrapValidator.min.js
這兩個文件，然後初始化表單
Bootstrapvalidator下載的代碼中有大量的demo,可以根據需要自己選擇查看。
提示框，jNotify
jNotify是一款提示消息的插件，不過它並不是Bootstrap專有的插件。它提示界面好看，而已又是屬於輕量級的，方法使用也簡單，下載地址：http://www.jq22.com/jquery-info1377
使用方式，引入 jNotify.jquery.js 和 jNotify.jquery.css
這兩個文件，然後就可以直接使用
jError("錯誤信息提示");
jSuccess("成功信息提示");
jNotify("一般信息提示");
1 <div class="panel"> 2 <div class="wrapper-dropdown active navbar navbar-default" id="navbar"> 3 <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>登錄</strong></label> 4 <div class="h_Icon"> 5 <a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 6 <img src="/Content/img/head/nemu.png" /> 7 </a> 8 <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu"> 9 <li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i> 首頁</a></li> 10 <li><a href="/Home/Registere"><i class="glyphicon glyphicon-user"></i>註冊</a></li> 11 </ul> 12 </div> 13 </div> 14 <div class="row panel-body"> 15 <form id="loginform"> 16 <div class="form-group"> 17 <input type="text" class="form-control" id="username" name="username" placeholder="用戶名"> 18 </div> 19 <div class="form-group"> 20 <input type="password" class="form-control" id="password" name="password" placeholder="密碼"> 21 </div> 22 <button type="button" data-loading-text="正在提交" autocomplete="off" id="validateBtn" class="btn btn-info btn-block">登陸</button> 23 </form> 24 </div> 25 </div>登錄頁代碼
1 <div class="panel"> 2 <div class="wrapper-dropdown active navbar navbar-default" id="navbar"> 3 <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>註冊</strong></label> 4 <div class="h_Icon"> 5 <a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 6 <img src="/Content/img/head/nemu.png" /> 7 </a> 8 <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu"> 9 <li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i>首頁</a></li> 10 <li><a href="/Home/Login"><i class="glyphicon glyphicon-lock"></i>登錄</a></li> 11 12 </ul> 13 </div> 14 </div> 15 <div class="row panel-body"> 16 <form id="loginform"> 17 <div class="form-group"> 18 <input type="text" class="form-control" name="username" placeholder="用戶名"> 19 </div> 20 <div class="form-group"> 21 <input type="text" class="form-control" name="nickName" placeholder="用戶昵稱"> 22 </div> 23 <div class="form-group"> 24 <input type="password" class="form-control" name="password" placeholder="密碼"> 25 </div> 26 <div class="form-group"> 27 <input type="password" class="form-control" name="confirmPassword" placeholder="確認密碼"> 28 </div> 29 <button type="button" data-loading-text="正在提交" autocomplete="off" id="validateBtn" class="btn btn-info btn-block">註冊</button> 30 </form> 31 </div> 32 </div>註冊頁代碼
1 var $btn; 2 $('#loginform').bootstrapValidator({ 3 message: 'This value is not valid', 4 feedbackIcons: { 5 valid: 'glyphicon glyphicon-ok', 6 invalid: 'glyphicon glyphicon-remove', 7 validating: 'glyphicon glyphicon-refresh' 8 }, 9 fields: { 10 username: { 11 validators: { 12 notEmpty: { 13 message: '用戶名不能為空' 14 }, 15 stringLength: { 16 min: 6, 17 max: 30, 18 message: '用戶名必須在6-30位之間' 19 }, 20 remote: { 21 type: 'POST', 22 url: '/User/CheckUserName', 23 message: '該用戶名已經存在' 24 }, 25 different: { 26 field: 'password,confirmPassword', 27 message: '用戶名不能與密碼一致' 28 } 29 } 30 }, 31 nickName: { 32 validators: { 33 notEmpty: { 34 message: '用戶昵稱不能為空' 35 }, 36 stringLength: { 37 min: 2, 38 max: 8, 39 message: '用戶昵稱必須在2-8位之間' 40 }, 41 remote: { 42 type: 'POST', 43 url: '/User/CheckNickName', 44 message: '該用戶昵稱已經存在' 45 } 46 } 47 }, 48 password: 49 { 50 validators: { 51 notEmpty: { 52 message: '密碼不能為空' 53 }, 54 stringLength: { 55 min: 8, 56 max: 20, 57 message: '密碼長度必須在8-20位之間' 58 }, 59 different: { 60 field: 'username', 61 message: 62 '用戶名不能與密碼一致' 63 } 64 } 65 }, 66 confirmPassword: { 67 validators: { 68 notEmpty: { 69 message: '確認密碼不能為空' 70 }, 71 identical: { 72 field: 'password', 73 message: 74 '兩次密碼不一致，請檢查' 75 }, 76 different: { 77 field: 'username', 78 message: 79 '用戶名不能與密碼一致' 80 } 81 } 82 } 83 } 84 });表單驗證初始化
1 (function ($) { 2 $.extend($, 3 { 4 //成功提示 5 MsgSuccess: function (msg, func) { 6 jSuccess(msg, { 7 VerticalPosition: 'center', 8 HorizontalPosition: 'center', 9 TimeShown: 1000, 10 onClosed: function () { 11 if (func) func(); 12 } 13 }); 14 }, 15 //出錯時的提示 16 MsgError: function (msg, func) { 17 jError(msg, { 18 VerticalPosition: 'center', 19 HorizontalPosition: 'center', 20 TimeShown: 1000, 21 onClosed: function () { 22 if (func) func(); 23 } 24 }); 25 }, 26 27 //一般的提示 28 MsgInfo: function (msg, func) { 29 jNotify(msg, { 30 VerticalPosition: 'center', 31 HorizontalPosition: 'center', 32 TimeShown: 1000, 33 onClosed: function () { 34 if (func) func(); 35 } 36 }); 37 }, 38 //統一處理 返回的json數據格式 39 DealAjaxData: function (data, funcSuc, funcErr) { 40 41 //如果是字元串格式的josn，就變為json對象 42 if (typeof (data) == "string") { 43 try { 44 data = eval("(" + data + ")"); 45 } catch (e) { 46 47 } 48 } 49 50 if (!data || data.Code == undefined) { 51 return; 52 } 53 54 switch (data.Code) { 55 //錯誤的提示 56 case 0: 57 $.MsgError(data.Msg, function () { if (funcErr) { funcErr(data); } }); 58 break; 59 //成功的提示 60 case 1: 61 $.MsgSuccess(data.Msg, function () { if (funcSuc) { funcSuc(data); } }); 62 break; 63 //帶跳轉的提示 64 case 2: 65 $.MsgInfo(data.Msg, function () { if (window.top) window.top.location = data.BackUrl; else window.location = data.BackUrl; }); 66 break; 67 } 68 } 69 }); 70 }(jQuery));JNotify簡單封裝
效果如下:
新聞列表
使用到的組件 panel(面板),dropdown(下來菜單),Carousel（輪播）glyphicon（圖標） 柵格佈局
1 <div class="head"> 2 <div class="wrapper-dropdown active navbar navbar-default" id="navbar"> 3 <label style="color: white; padding-left: 8px; font-size: 20px;"><strong>新聞列表</strong></label> 4 <div class="h_Icon"> 5 <a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 6 <img src="/Content/img/head/nemu.png" /> 7 </a> 8 <ul class="dropdown dropdown-menu" id="menu" aria-labelledby="dropdownMenu"> 9 <li><a href="/Home/Index"><i class="glyphicon glyphicon-home"></i> 首頁</a></li> 10 <li><a href="/Home/Login"><i class="glyphicon glyphicon-lock"></i>登錄</a></li> 11 <li><a href="/Home/Registere"><i class="glyphicon glyphicon-user"></i>註冊</a></li> 12 <li><a href="/Collection/Index"><i class="glyphicon glyphicon-star"></i>我的收藏</a></li> 13 14 </ul> 15 </div> 16 </div> 17 <nav class="head-bar"> 18 <a class="action" href="jvavscript:;">推薦</a> 19 <a href="/News/NewsList?type=News">新聞</a> 20 <a href="/News/NewsList?type=Sports">體育</a> 21 <a href="/News/NewsList?type=Entertainment">娛樂</a> 22 23 </nav> 24 </div>頂部菜單代碼
1 <div class="row fix-bottom"> 2 <div class="col-xs-6"> 3 <a href="/Home/Index"> 4 <img src="/Content/img/Login/home.png" /> 5 </a> 6 </div> 7 <div class="col-xs-6"> 8 <a href="/Collection/Index"> 9 <img src="/Content/img/Login/collect.png" /> 10 </a> 11 </div> 12 </div> 13 14 <!--返回頂部--> 15 <div class="toTop"> 16 <a href="javascript:void(0)" onclick='$("body").animate({ "scrollTop": "0px" }, 300)'> 17 <img src="/Content/top.png"/> 18 </a> 19 </div>尾部菜單代碼
1 <!--焦點圖start--> 2 <div class="carousel slide" id="NewsCarousel"> 3 <!--Indicators--> 4 <ol class="carousel-indicators"> 5 <li class="active" data-slide-to="0" data-target="#NewsCarousel"></li> 6 <li data-slide-to="1" data-target="#NewsCarousel"></li> 7 <li data-slide-to="2" data-target="#News
