2014年辛星web前端教程贺岁版第九本即BootStrap教程

5星(超过95%的资源)
所需积分/C币:10 2014-10-22 10:38:39 3.03MB PDF
10
收藏 收藏
举报

这是辛星在2014年web前端教程第九本Bootstrap教程,希望对您有所帮助。
火;六;次出水次;次;;水出次六次出决次;次出出次出水次出;出兴次 目录: 第一节:快速入门…..… 4 第二节:网格糸统… 第三节:文本样式 第四节:列表与表怒.…… 24 第五节:表单 看。D非春。a非鲁自。D自。日。卷自看。。自番 32 第六节:按钮与图片……… ······················a························ 37 第七节:组件1.…… 第八节:组件2.…… ■D·鲁·鲁D·····D··章D·鲁看D·●··。·D看··D·●·司鲁·●D·看D·看●●垂D 54 第九节:总结……,,,…………………63 附录:意见反馈. …64 3/64 第一节:快速入门 >>>>>>>> Bootstrap是什么<<<<<<<<<<<<<<<<< 1.首先 Bootstrap是 Twitter推出的一个开源的用于前端开发的工具 包,它由 Twitter的设计师 Mark otto和 Jacob thornton合作开发。 2.它一经推出就颇受欢迎,迅速聚集了大量的粉丝,当然我也是宅 的一个粉丝。 3它是基于 jQuery的,而且自带了一些 jQuery插件,并且可以兼 容大部分 jQuery插件。 >>>>>>>站点推荐<<<<<<<<<<<<<<<<<<<<<<< 1.第一个要给大家推荐的就是http://getbootstrap.com这个就是 乞的官网啦,从官网中我们可以学习到相当多的东西,那么我们来 个截图吧 Q Bootstrap 甲裂X国百04☆自吾鲁。如 Bootstrap Getting started Css Components avascnpt Customize B Bootstrap is the most popular HTML, CSs, and Js framework for developing responsive, mobile first p projects on the web Download Bootstrap 2.那么我们下面推荐一下 Bootstrap中文站吧,它的网址是: http://www.bootcss.com那么我们依旧来个截图: 4/64 口8tp中 中 d wewbootcscom B001sap中文网Bos 即中文6户BAP国站实 Bootstrap 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。 Bootstrap3中文文档(320) B00sap2中32 鲁0a交群:3B514705Ba间社区新润数博:8Bap中文网 3这两个网站都是使用 Bootstrap建立的,是不是被宅的清新优雅给 震慑到了?第一次我是被帅到了,不过看到了就没感觉了。 >>>>>>>>下载 Bootstrap<<<<<<<<<<<<<<<<< 1.我们可以在上面推荐的网站的笫二个来下载,我们点击网站首页 上的那个按钮,即 ee wwbootcsscom c国面Ctp合自鲁·t Bootstrap中文网Bosw2中文文·Bomp钟文女tes程myAP实测 第一步,我们点 击这个按钮 Bootstrap 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单 Bootstrap3中水档(v320) 四p中文文柱(232 2.然后我们来到如下界面,然后我们点击那个下载按钮来下载 5/64 中文网 口80中文料+ +u8wbootcscom B。 otstrap品步全局c5s样式件JBa5cg播件尘M 优站 第二步,点击此处 跳转到下载链接 B Bootstrap是最受欢迎的HTML、cSS和Js框架,用于 开发响应式布局、移动设备优先的WEB项目。 下载 Bootstrap 3.然后我们来到妇下界面来下载吧,这里由于我们使用宅来开发, 因此我们下载这个用于生产环境的板本: Btp中文网X日超, Bootstrap中档x(+ ) 3. bootcss. com/8c圖百+kP☆自 下载 我们点击此处下载就可以了 Bootstrap(当前版本3)提供以下几种方式帮你快速上手,每种方式对具有不同技能等级 的开发者和不同的使用场。继续阅读下面的内容,看看哪种方式适合你的需求吧。 用于生产环境的 Bootstrap源码 Sass Bootstrap Less、 Javascript和字体文件的这是 Bootstrap从Less到sass 编译并压缩后的 css/ JavaScrip 源码,并且带有文档。要Less的源码移植項目,用于快速地在 和字体文件。不包学档和浮码文编译器和些设置工作 Rals、 Compass或只针对sass 件 的项目中引入。 下载源码 下载B00p 下载Sass项目 使用 Bootstrap中文网提供的免费cDN加速服务 Bootstrap中文网为 Bootstrap专门构建了自己的免费CDN加速服务。基于国内云厂商的CDN服 各访问速度更快加速效里更胆品没有速度和带贲限制永久费Bnsa中文还对太是 4.由于是在中国的网站,因此速度还不错的,那么下载之后会有 20KB,这个版本解压之后有784KB,那么我们看一下它的目录结 构吧: 6/64 bootstrap-3.2.0-dist css/ bootstrap.css bootstrap css map bootstrap mincss bootstrap-theme.css bootstrap-theme. Css map bootstrap-theme mincss bootstrap bootstrap min. is fonts/ glyphicons-halflings-regulareot glyphicons-halflings-regular. svg glyphicons-halflings-regular ttf glyphicons-halflings-regular woff 5.那么我解释一下吧,这里的有些文件会包含一个min,表示是压 缩后的版本,效果是一样的,但是文件大小会更小,加载速度会提 高。对于那个map文件,它的作用就是对应less于CS,因为 Bootstrap 是使用less写成的。 6而 Bootstrap是基于 jQuery的,因此我们要使用一些动态效黑的 话,是必须导 jQuery的文件的。 7那么我们把这个文件命名为bS,那么我们在b的同级目录下新建 一个 my. html文件吧,首先来个特写: y工具①帮助(H 它的里面装的就是我们刚 才下载的 Bootstrap文件 回名称 大小 bs 2014/6/26星期文件夹 回画 my. html 201410/14星期 Firefox HTML D 7/64 8然后我们的myhm中写入如下内容: K! DOCTYPE html 3 <head> (meta charset= utf-8> 5<metahttp-equiv="x-ua-compAtiBlE"content="ie-edge"> 6(meta name="viewport" content="width=device-width, initial-scale-1> titley)辛星EB前端教程 title 8 (link href:"bs/css/bootstrap min css " rel=stylesheet"> 9(/head g < bod h1>辛星永爱小倩(h1 </body> /html 9然后我们看一下效果吧: 辛星WEB前端教程 +e fle//:/Temp/ADMINI-1Temp/bootstrap-320-dist/my html CEB-Be 辛星永爱小倩 是不是感觉略显平庸呢? 10.可能有些朋友们会说:废了这么大的劲儿,写出来的效果貌似也 很一般呵,而且还会有不少朋友们会对其中所写的代码产生一些不 解,这里我给大家解释一下吧。 1.这里的第五行代码表示如票是旧浏览器,那么使用最新的引擎去 渲亲网页,有肘候可能还会有 chrome=1这个值,它的意思是激活 谷歌内嵌框架GCF。 12.第六行代码则是定义了一个"视口",它的目的是用于修正在移动设 备上的星示,后面的值表示宽度自动使用设备的宽度,并且初始化 8/64 的时候使用原始的大小,当然由于我们使用的是htm15,郄么当浏 览眾不支持html5的肘候,还需要加载其他的一些文件去模拟宅。 13.比如我在本教程的演示中一直使用的是 Firefo,那么这些内容就 可以不写了,因此我们简化后的代码就是这样的 <I DOCTYPE html> <html lang="zh-cn"> <head> <meta charset= utf-8> <tit1e>辛星MEB前端教程</tit1e> link href="bs/css/bootstrap min css rel="stylesheet> </head> <body> <h1>辛星永爱小倩</h1> </body> </html> >>>>>>>>>CDN<<<<<<<<<<<<<<<<<<<<< 国内很多网站都提供了免费的CDN加速服务,使用CDN服务可 以让我们的网页访闷速度更快等很多优点。 2.当然诸如百度、新浪等较大的互联网公司通常都会提供CDN服务 的,不过我们这里还是使用 bootes的吧。 3.下面我们看下面的htm文件代码: <I DOCTYPE html> <html lang="zh-cn <head〉 <meta charset="utf-8> title)辛星MEB前端教程</ title Klinkrel="stylesheet"href="http://cdn.bootcss.com/bootstrap/3.2 8/css/bootstrap min css> </head> <body> h1>辛星永爱小倩</h1> </body> </html> 4.那么我们会发现宅的效果图如下: 9/64 辛星WEB前端教程 台)e/ D: / Temp/ADMINI-1Temp/bootstr32 dist/you. htm圈百度xCm+ 辛星永爱小倩「我们可以发现它们 的效果是一样的 5.对于网站来说,使用CDN加速是很有帮助的,但是对于我们来说, 我们还是使用本地文件。 >>>>对比<<<<<<<<<<<<<<<<<<<<<<<< 1.可能有些朋友会提出一个问题了:我们导入的这个框架到底是否 有作用呢? 2答案是有作用的,我们来看看效果对比吧 辛星WEB前端教程 辛星WEB前端教程 + e)8 file: //D: /TemP/ADMINI-1/Temp/(4)0 file://:/Temp/ADMINl-1/Temp/boot 辛星永爱小倩辛星永爱小倩 左边的没有使用 Bootstrap 右边则是使用 Bootstrap框 架之后的效果 框架 3我相信读者朋友们能够感受到的区别了,其实却是是这样,也 就是说只要我们导入了这个文件,那么就巳经起作用了。 >>>>>>>>>>框架<<<<<<<<<<<<<<<<<<<<<<< 1.我们经常会听到诸如“框架”“架构”“构架”之类的名词,其 实这几个词语很多肘候经常会被泥用。 10/64

...展开详情
试读 64P 2014年辛星web前端教程贺岁版第九本即BootStrap教程
立即下载 身份认证后 购VIP低至7折
一个资源只可评论一次,评论内容不能少于5个字
老大的幸福丶 还可以,谢谢分享
2016-05-18
回复
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
关注 私信
上传资源赚钱or赚积分
最新推荐
2014年辛星web前端教程贺岁版第九本即BootStrap教程 10积分/C币 立即下载
1/64
2014年辛星web前端教程贺岁版第九本即BootStrap教程第1页
2014年辛星web前端教程贺岁版第九本即BootStrap教程第2页
2014年辛星web前端教程贺岁版第九本即BootStrap教程第3页
2014年辛星web前端教程贺岁版第九本即BootStrap教程第4页
2014年辛星web前端教程贺岁版第九本即BootStrap教程第5页
2014年辛星web前端教程贺岁版第九本即BootStrap教程第6页
2014年辛星web前端教程贺岁版第九本即BootStrap教程第7页
2014年辛星web前端教程贺岁版第九本即BootStrap教程第8页
2014年辛星web前端教程贺岁版第九本即BootStrap教程第9页
2014年辛星web前端教程贺岁版第九本即BootStrap教程第10页
2014年辛星web前端教程贺岁版第九本即BootStrap教程第11页
2014年辛星web前端教程贺岁版第九本即BootStrap教程第12页
2014年辛星web前端教程贺岁版第九本即BootStrap教程第13页

试读结束, 可继续读7页

10积分/C币 立即下载