bootstrap 站点欣赏

用Bootstrap 写了个站点

近期发现vdceye的站点有些丑陋,就找了一个bootstrap工具,又一次把站点写了一遍这个工具果然好用 http://vdceye.com/

来源:http://www.w3cplus.com/css/twitter-bootstrap-tutorial.html 特别声明:此篇文章由白牙根据Leon Revill的英文文章原名<Twitter Bootstrap Tutorial – Up and running with Twitter Bootstrap in 20 Minutes>进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此译文,需注明英文出处:http://www.revi

实现 Bootstrap 基本布局

看到了一篇 20 分钟打造 Bootstrap 站点的文章,内容有点老,重新使用 Bootstrap3 实现一下,将涉及的内容也尽可能详细说明. 1. 创建基本的页面我们先创建一个基本的 HTML 模板页面,使用 sublime + emmet 可以直接创建这个页面. 1.1 新建一个文件, Ctrl + N 1.2 保存到页面文件中,Ctrl + S,命名为 index.html 1.3 在这个空白页面中,输入 html:5,然后直接按制表键 Tab,就应该可以看到一个基本的 HTML5 模

Bootstrap 3 How-To #1 下载与配置

Bootstrap 3 发布了,通过简单的几步,我们就可以使用 Bootstrap 的样式表,图标,以及 javascript 来配置一个简单的站点. 准备 Bootstrap 不仅仅是一个代码集,还是一个在线社区.作为开始,你需要从熟悉 bootstrap 网站开始:http://getbootstrap.com. 目前版本是 3.0 ,你应该看到如上的页面. 在这里,你可以找到如下内容: 文档如果这是你第一次访问这个站点,冲一杯热茶,细心地阅读这个网站的页面,查看每个组件,阅读详细的说明,

详解Bootstrap实现基本布局的方法

看到了一篇 20 分钟打造 Bootstrap 站点的文章,内容有点老,重新使用bootstrap教程实现一下,将涉及的内容也尽可能详细说明. 1. 创建基本的页面我们先创建一个基本的 HTML 模板页面,使用 sublime + emmet 可以直接创建这个页面. 1.1 新建一个文件, Ctrl + N 1.2 保存到页面文件中,Ctrl + S,命名为 index.html 1.3 在这个空白页面中,输入 html:5,然后直接按制表键 Tab,就应该可以看到一个基本的 HTML5 模板页

Bootstarp 使用布局

实现 Bootstrap 基本布局看到了一篇 20 分钟打造 Bootstrap 站点的文章,内容有点老,重新使用 Bootstrap3 实现一下,将涉及的内容也尽可能详细说明. 1. 创建基本的页面我们先创建一个基本的 HTML 模板页面,使用 sublime + emmet 可以直接创建这个页面. 1.1 新建一个文件, Ctrl + N 1.2 保存到页面文件中,Ctrl + S,命名为 index.html 1.3 在这个空白页面中,输入 html:5,然后直接按制表键 Tab,就应

翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 3

原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockoutjs and Bootstrap Part 1: 创建 Web Application (Knockout.js, Asp.Net MVC and Bootstrap): 前端设计在开始 UI 部分之前,我们先看一下在 ASP.NET MVC4 中使用 Knockoutjs 和 Bootstrap

翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 1

原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 另一种 MVC 应用程序: 简介站点总是快速成长,一旦开始成长,站点就变得很难开发,组织和维护.所以在我们增加功能或者开发项目的时候,缺乏设计的大型网站会变得失去控制.这里要说的是站点的架构设计必须简单,容易被任何设计者理解 ( 从初级开发者到中级开发者 ),以及

【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

A.优化站点资源速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap]2.作品展示站点中的资源.特别的,来看一看我们能控制的.影响页面速度的重要因素 —— 文件大小,包括图片.CSS和 JavaScript 文件.只要简单几步,我们就可以给这些文件“瘦身”,缩短加载时间. A.1 优化图片这些图片都通过 Photoshop 的 “保存为 Web 格式” 进行了一

【读书笔记《Bootstrap 实战》】2.作品展示站点

假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这个项目可以利用Bootstrap的很多内置特性,同时也将根据需要对Bootstrap进行一些定制. 1.设计目标虽然对大屏幕中的展示效果已经胸有成竹,但我们还应该从小设备开始,强迫自己聚焦在关键的要素上面. 这个作品展示站点应该具有下列功能: □ 带Logo的可折叠的响应式导航条: □ 重点展示四

【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势

A.优化站点资源速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap]2.作品展示站点中的资源.特别的,来看一看我们能控制的.影响页面速度的重要因素 —— 文件大小,包括图片.CSS和 JavaScript 文件.只要简单几步,我们就可以给这些文件“瘦身”,缩短加载时间. A.1 优化图片这些图片都通过 Photoshop 的 “保存为 Web 格式” 进行了一

【Bootstrap】2.作品展示站点

假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这个项目可以利用Bootstrap的很多内置特性,同时也将根据需要对Bootstrap进行一些定制. 1.设计目标虽然对大屏幕中的展示效果已经胸有成竹,但我们还应该从小设备开始,强迫自己聚焦在关键的要素上面. 这个作品展示站点应该具有下列功能: □ 带Logo的可折叠的响应式导航条: □ 重点展示四

两周“学会”bootstrap搭建一个移动站点

一直想着用bootstrap搭建网站,它的自适应.元素封装完善.现成的Glyphicons字体图标,省去很多的css.js.ui的工作,可以快速搭建一个客户需要的站点.ytkah自己有一些div+css的基础知识,所以上手bootstrap相对会比较快一些,从入手到完成项目只用了两周“学会”bootstrap搭建一个企业站,中间还有其他的一些事需要处理.当然做得比较粗糙,效果图在文章尾部. 国内的企业站一般都喜欢这样的版式:头部导航.幻灯片banner.次导航.文章列表.tag标签.转化引导.主

使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑

翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑 Part 3: 设计逻辑层:核心开发如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构风格,在应用的长时间生命周期中,解决维护和扩展问题.所以,让我们在解决方案中添加一个类库项目,命名为 Application.Common. Applicatio

翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑

Part 3: 设计逻辑层:核心开发如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构风格,在应用的长时间生命周期中,解决维护和扩展问题.所以,让我们在解决方案中添加一个类库项目,命名为 Application.Common. Application.Common : 这是一个类库项目, 提供公共功能,可以被不同的业务逻辑层使用.例如:安全,日志,跟踪,验证等等. 定义在这个层中的组

java web 站点头像上传处理 (springmvc +bootstrap+cropper)

制作头像上传.请依据您的实际需求.改动代码,不全然正确.仅供參考! 前端页面设计使用bootstrap ,头像预览和剪裁工具使用cropper 后台使用springmvc. 如今来看前端的页面设计前端页面设计,自然须要bootstrap .jqury 和cropper ,这能够自行去网上百度查找剪裁效果图 html 文件 <!DOCTYPE html> <html> <head lang="en"> <meta charset="

翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 5 - 数据库设计

数据库方面我们需要的主要功能如下: 联系人有姓名和电子邮件地址. 联系人可以拥有多个地址. 联系人可以拥有多个电话. 为了实现目标,我们需要在数据库中创建下列表.表与表的关系如下图所示: 数据库的脚本可以从这里直接下载:Application_DB.sql 文章转载于:http://www.cnblogs.com/haogj/

翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 4 - 验证

验证: 快要完成我们程序的界面部分了.剩下的事情就是在用户点击 "保存" 的时候管理验证问题了.验证是主要需求,今天就是最无知的应用也不会忽视它.通过正确的验证,用户可以知道应该输入什么数据.下面,我们将会讨论 KnockoutJS Validation 库,可以通过从这里下载.也可以直接通过 NuGet 获取, 先让我们看看常用的验证场景,以及如何使用. 这里有篇文章讨论 Knockout 扩展的原理:翻译:使用 Knockout 扩展器扩展 observables Scenario

翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 2

我们的目标: 需求 Screen 1: 联系人列表 - 查看所有联系人 1.1 这个 screen 将显示数据库中的所有联系人. 1.2 用户可以删除任何联系人.1.3 用户可以编辑任何联系人的详细信息.1.4 用户可以创建新的联系人. 初始草图: Screen 2: 创建新联系人这个页面提供一个空白的页面,支持如下操作. 2.1 用户可以输入用户的姓名和电子邮件地址.2.2 通过点击添加按钮,用户可以为联系人添加任意多的电话号码.2.3 用户可以删除联系人的任何电话号码. 2.4 通过点击添

bootstrap设计站点中加入代码高亮插件

这款插件的名字叫做google-code-prettify 使用该插件之前的效果: 使用插件之后的效果: 接下来说步骤: (1)下载两个文件 http://codecloud.sinaapp.com/google-code-prettify/prettify.css http://codecloud.sinaapp.com/google-code-prettify/prettify.js (2)在head中引入这两个文件 <link href="google-code-prettify/p