利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一)

1.0 为什么要做这个博客站？

　　 在工作学习中，经常要搜索查找各种各样的资料，每次找到相关资料后都会顺手添加到浏览器书签中，时间一长，书签也就满了。而且下次再点击这个书签时，可能就会忘记当时为什么要添加这个书签了，更有可能书签连接已经无效。这样一来，也就不方便自己查阅了。如果转载、收藏到自己的博客园账号中、CSDN账号中，我们中，知乎中等等，依然是很凌乱，不方便下次查阅。

　　因此，我下决心开发一个个人技术博客站。主要原因是：可以整合各种宝贵资源,将知识变为宝库；可以借此巩固加强一下自己的"全栈"基础；记录工作生活中遇到的问题及其解决方案；可以帮助遇到同样问题的网友。

2.0 简单介绍下此个人博客用到的技术点

可以先点击进去看看。地址是http://www.zynblog.com该博客站基于ASP.NET MVC + EF6.0，采用Bootstrap响应式布局搭建，因此使用IE8以下的浏览器访问时可能会出现错位等一系列问题。站点虽小，但五脏俱全：采用ASP.NET MVC架构、并使用了Spring依赖注入、云存储、响应式布局(几乎适应各种屏幕尺寸的设备)、一些繁杂的css、NUnit单元测试、Log4Net日志记录、Lucene站内检索、各式各样的jquery插件、评论插件、点赞插件、分页插件，自定义Ueditor 编辑器，也制作了还算能看的logo和icon。

3.0 博客站效果展示 www.zynblog.com

3.1 网站架构

其实一个博客站没必要搞这么复杂，但为了学习嘛，也就搭了个简单的架构。其中包括Model、Repository、Service、和UI。SiteSearch是站内搜索模块，Inject是Spring.net依赖注入模块，Common中包含了IP获取、截取字符串、发送邮件、MD5、过滤字符串的工具。

3.2 博客站首页展示

3.3 文章详情页展示

3.4 侧边栏展示

3.5 联想搜索模块

结语

　　先暂时介绍到这儿，之后会陆续详细介绍一下站点中使用的关键技术点。

以上所述是小编给大家介绍的利用ASP.NET MVC和Bootstrap快速搭建响应式个人博客站(一)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Bootstrap每天必学之响应式导航、轮播图

    本节课前一节我们开始设计第一个项目, 一个内训公司的企业网站, 本节课学习响应式导航部分. 基本导航组件+响应式: //基本导航组件+响应式 <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="#" class=

  • BootStrap创建响应式导航条实例代码

    BootStrap创建响应式导航条实例代码

    首先你得引入bootstrap与jquery 推荐一个CDN:http://cdn.gbtags.com/index.html 然后就是开始编写HTML代码.如果你不想更改显示效果的话实际上CSS都免去写了2333 因为HTML代码比较多 这里分为三个部分 然后最后再上一份整体HTML代码 首先如上图所示的,实现这个效果需要了解bootstrap的以下几个组件 •导航条 •按钮 •表单 •下拉菜单 实际上以上几个组件的样式有很多.我们只需要了解一部分即可 如需了解更多的请转自http://www

  • Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

    Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记

    继续上一篇,针对Bootstrap Metronic菜单栏整理的笔记分享给大家,供大家参考,具体内容如下 1.简介 1)  .环境配置 2)  .提取页面 3).动态生成菜单(无限级别树) 2.系统环境配置  项目需要程序数据支撑,这里选择MVC5.0+EF6.0[SQLSERVER](不对MVC架构和SQLServer做出解读)  运行环境:VS2013+MVC5.0+EF6.1+SQLServer2012  解决方案名称:AppSolution 项目名称:App.Web(UI层)与App.M

  • Bootstrap实现圆角、圆形头像和响应式图片

    Bootstrap实现圆角、圆形头像和响应式图片

    Bootstrap提供了四种用于<img>类的样式,分别是: .img-rounded:圆角 (IE8 不支持),添加 border-radius:6px 来获得图片圆角: .img-circle:圆形 (IE8 不支持),添加 border-radius:50% 来让整个图片变成圆形. .img-thumbnail:缩略图功能,添加一些内边距(padding)和一个灰色的边框. .img-responsive:图片响应式 (将很好地扩展到父元素). 使用: 将类样式直接添加到class中即可

  • 谈一谈bootstrap响应式布局

    谈一谈bootstrap响应式布局

    随着移动端的用户越来越多,传统的web系统架构无法兼容很多移动终端的正常使用.在工作中也会发现,现在很多的客户都有在手机.平板等移动终端上使用管理系统的需求.如果单独为每一个终端开发相应的响应网页,这必定增加项目的成本和开发人员的压力.这时候了解响应式布局就很有必要,响应式布局就是为解决多终端问题而生的.本次介绍的是轻量级.开源的.免费的bootstrap. 搭建开发环境 首先下载官网的boostrap源码包:http://www.bootcss.com/. 开发简单的项目不必加入源码中的所有c

  • 20分钟成功编写bootstrap响应式页面 就这么简单

    20分钟成功编写bootstrap响应式页面 就这么简单

    最近发现一个叫 Bootstrap 的好东西,Bootstrap 是现在最流行的响应式 CSS 框架,它以移动设备优先,能够快速适应不同设备.使用它编写响应式页面快捷.方便,而且屏蔽了浏览器差异.使用了 Bootstrap 后,再也无法想象过去使用原始的 CSS 编写网页的悲惨生活了. 经过学习,我发现自己也具备了分分钟开发出一个高大上的页面的能力.本文将会为大家介绍 Bootstrap,并且带领大家一起实现一个响应式页面. 图 1. 移动优先,适应不同设备 一.安装 最简单的方式是直接在网页中

  • BootStrap实现响应式布局导航栏折叠隐藏效果（在小屏幕、手机屏幕浏览时自动折叠隐藏）

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title>bootstrap实现导航栏的响应式布局,当在小屏幕.手机屏幕浏览时自动折叠隐藏</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&q

  • Bootstrap实现响应式导航栏效果

    Bootstrap实现响应式导航栏效果

    为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮.第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素.三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮.这些会切换

  • Bootstrap响应式侧边栏改进版

    Bootstrap响应式侧边栏改进版

    侧边栏在响应式设计中起到很大的作用,当屏幕小到手机的屏幕时,能够自适应屏幕大小的侧边栏固然能够为网站添加色彩,那么在Bootstrap的框架中提供了导航条和下拉菜单的组件,详情请自行到官网Bootstrap的文档查看,这里就不作介绍了. 本文是将其中的导航条和下拉菜单进行结合,然后设计并改进了侧边栏的制作. html: <div class="container"> <nav class="navbar navbar-default mynavbar&quo

  • Bootstrap响应式表格详解

    Bootstrap响应式表格详解

    Bootstrap 的响应式 CSS 能够自适应于台式机.平板电脑和手机 下面是手机端显示的样式 代码如下: 1.test.php <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link type="text/css"

随机推荐