Bootstrap 实战

推荐语
机器学习现如今火的不得了,似乎不学一点儿都不敢说自己是程序员。这本《机器学习实战》,是难得的一本理论与实战结合的好书,推荐给大家。汇智网已经为这本书匹配了专门的在线学习环境,书中示例代码也已经在线提供,希望能够帮助大家更好的学习。

前言

2011年8月,Twitter Bootstrap横空出世。如今,这个被称为Bootstrap的框架,俨然已成为前端设计领域最受欢迎的辅助技术。Bootstrap 3又是一个里程碑式的版本,增加了移动优先的响应式网格、新的强大的LESS混入,而且还针对现代浏览器对核心代码进行了优化。

本书详细介绍Bootstrap的使用方法(入门教程qkxue.net)。全书简明易懂,循序渐进,让读者时时处处体验到自定义和重编译Bootstrap的LESS文件的强大威力,同时掌握应用Bootstrap的JavaScript插件设计专业用户界面的技巧。

这本书并不局限于Bootstrap。Bootstrap只是一个工具,一个达到目标的手段(腾云科技ty300.com)。学习完这本书之后,读者将成为一位更加高效、熟练的Web设计师。

本书内容

第1章“初识Bootstrap”,教给大家如何下载Bootstrap,如何基于HTML5 Boilerplate设置站点模板,并且掌握把Bootstrap的LESS文件编译为CSS的方法。

第2章“作品展示站点”,开始学习创建简单的个人作品展示网站,包括全宽的传送带切换效果,三栏文本布局,以及使用Font Awesome的字体图标——通过自定义Bootstrap的LESS文件。

第3章“WordPress主题”,学习把第2章的个人作品展示站点转换成一个WordPress主题。这一章要利用有名的Roots Theme,根据我们的需要,还会涉及自定义模板文件、LESS、CSS和JavaScript。

第4章“企业网站”,将通过创建一个企业级网站学习如何创建复杂的页头区,添加下拉菜单和实用导航,以及构建复杂的三栏布局和四栏页脚,同时还要确保所有这些内容具有完全的响应能力。

第5章“电子商务网站”,带领大家探索商品展示页面的设计,学会在复杂的响应式网格中控制多行商品。与此同时,还要实现一个响应式的商品筛选工具。

第6章“单页营销网站”,这一章教给大家构建时尚的单页营销网站,包括带高清图的大字欢迎语、带大图标的商品功能列表、图片墙式的用户评论区,以及三个精美的价目表,最终完成一个支持动态滚动导航的漂亮的单页网站。

附录A“优化站点资源”,以第2章的网站资源为例,介绍了为最终部署网站而优化Bootstrap LESS/CSS及JavaScript等静态资源的基本流程和工具。这个附录对所有Bootstrap项目都一样有用。

附录B“实现响应式图片”,介绍最前沿的响应式图片解决方案Picturefill,仍然以第2章项目中的作品图片传送带为例。这个附录对其他项目也一样有用。

附录C“让传送带支持手势”,介绍在Bootstrap的传送带中使用一款先进的插件Hammer.js,实现传送带图片的轻扫切换功能。

稿源:勤快学QKXue.NET

阅读图文完整版Bootstrap 实战

时间: 2024-10-12 12:37:17

Bootstrap 实战的相关文章

【读书笔记《Bootstrap 实战》】6.单页营销网站

我们已经掌握了很多实用 Bootstrap  的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型介绍性传送带图片展示区,配有自定义的响应式欢迎信息: □ 一个客户留言区,显示为带标题的图片墙,就像砖垒的一样: □ 一个功能清单,使用大号 Font Awesome 图标: □ 一个带有自定义价目表的注册区: □ 一个带动态滚动的 ScrollSpy 导航条. 1.概况 有一位潜在客户联系我们,她

【读书笔记《Bootstrap 实战》】4.企业网站

上一章有对个人作品站点进行一些优化.本章,轮到我们充实这个作品站点了,补充一些项目,从而展示我们的能力.换句话说,我们要构建一个相对复杂的企业网站主页. 下面有几个成功企业的网站: □ Zappos (http://www.zappos.com/) □ Amazon (https://www.amazon.com/) 尽管这些网站网站各有特色,但共同的一点就是它们都很复杂. 如果按照区域划分,可以将这些网站的主页分成三部分. □ 页头区:这一部分包含Logo.带下拉菜单的主导航.二级和实用链接导

ASP.NET MVC4+BootStrap 实战(二)

上一篇文章我们讲述了页面初始加载数据的一些东西,本篇我们来讲一下查询按钮和分页按钮.在很久以前我写过一篇ASP.NET MVC4切近实战的文章,有关于分页的代码,本篇我们不采用微软的AJAX框架. 先看一下查询效果,在点击Get按钮之后,会进行AJAX请求. js代码如下 jQuery(document).ready(function () {     setRowBackColor();     $("#btnsearch").click(function () {         

ASP.NET MVC4+BootStrap 实战(三)

上节我们剩余Compare和Fix按钮没有讲,本节我们就来讲一下Compare按钮的功能,年底了,要开年会了,一个个积极的跟邱少云似得,给员工涨工资的时候能不能也积极点.不说了,说多了都是泪. 还记得我之前写的大数据实战之环境搭建,我们今天主要是拿DB的数据和solr的数据作比较,得出比较结果.首先,先启动centOS,启动tomcat,这样我们才能利用SolrNet调用solr公开的API.关于solr的启动再次我就不再赘述. OK,我们将solr实例启动起来后,用firefox浏览管理界面,

[转]ASP.NET MVC4+BootStrap 实战(一)

本文转自:http://leelei.blog.51cto.com/856755/1587301 好久没有写关于web开发的文章了,进到这个公司一直就是winform和Silverlight,实在是没有实战web项目的机会.大D也辞职了,去搞web app了.自己也该闲暇时间多学习学习,每天进步一点点. OK,不多说了,看一下Solution的截图 基本上一看就明白了,控制器调用Biz层,Biz层调用DAL层,DAL层进行数据的CURD.Utility是一些公用的类库.ok,为什么程序集的命名都

Bootstrap 实战之响应式个人博客 (一)

一.示例 1.主页 2.博客详情页 3.在线地址 在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时间和经济成本去专门购买一台云服务器显然是得不偿失的.github提供了github-page让用户可以免费部署自己的静态站点.更多参考:github-page 在本项目的静态站点部署时与其他的代码仓库,提交同步没有太大的区别(言外之意:还是有点不同的): 第一点:需要将项目目录名设置为 "githu

ASP.NET MVC4+BootStrap 实战(十)

年过完了,也该收心了.想想过年这几天都是每天睡到12:00,实在是腐化.大家都沉浸在抢红包的喜悦之中. 不说了,今天我们主要看一下新闻链接管理界面.先上图,无图无真相. 上半部分主要是对已经添加的外链接进行修改删除,设置优先级,下半部分是新增外链接网站. 首先我们先看一下上半部分. <div id="div_newsManage" class="panel panel-primary" ng-app="newsLinkManageModule&quo

ASP.NET MVC4+BootStrap 实战(八)

今天西安下雪了,贼冷,我去.今年的年终奖还没发,都快揭不开锅了. 今天的话我们来看一下用户删除和修改,天太冷,先调一下胃口,上图,无图无真相. 看到了吧,新增了选择列,操作列,以及页面最下面的全选,反选,新增,删除按钮. 我们先来看一下全选反选吧,经过修改之后,我们的Table变成如下的代码 <table class="table table-bordered table-striped table-hover" ng-init="load()">   

ASP.NET MVC4+BootStrap 实战(七)

连续三年年会中奖,第一年二等奖,价值2600元的魔音耳机,到现在才用了10几次.第二年中了个价值260元的飞利浦烧水壶,到现在还没用.今年中了个飞利浦挂烫机,也没查是多少钱,反正觉得奖项一年不如一年.在此我就给大家上一张年会热图. 男人的肚皮舞,嗨爆全场.好了,废话不多说,我们进入正题吧. 今天我们要说的就是主页面以及用户注册界面,功能做的都比较简单,我们先看一下Index界面. <div id="div_navigation" style="margin-top:10