关闭

关闭

封号提示

内容

首页 twitter bootstrap web development how-to.pdf

twitter bootstrap web development how-to.pdf

twitter bootstrap web developme…

上传者: 手机3792415630 2014-02-24 评分 4.5 0 64 9 292 暂无简介 简介 举报

简介:本文档为《twitter bootstrap web development how-topdf》,可适用于IT/计算机领域,主题内容包含wwwitebooksinfoTwitterBootstrapWebDevelopmentHowToAhandsonintroductiontobu符等。

wwwitebooksinfoTwitterBootstrapWebDevelopmentHowToAhandsonintroductiontobuildingwebsiteswithTwitterBootstrap'spowerfulfrontenddevelopmentframeworkDavidCochranBIRMINGHAMMUMBAIwwwitebooksinfoTwitterBootstrapWebDevelopmentHowToCopyrightPacktPublishingAllrightsreservedNopartofthisbookmaybereproduced,storedinaretrievalsystem,ortransmittedinanyformorbyanymeans,withoutthepriorwrittenpermissionofthepublisher,exceptinthecaseofbriefquotationsembeddedincriticalarticlesorreviewsEveryefforthasbeenmadeinthepreparationofthisbooktoensuretheaccuracyoftheinformationpresentedHowever,theinformationcontainedinthisbookissoldwithoutwarranty,eitherexpressorimpliedNeithertheauthor,norPacktPublishing,anditsdealersanddistributorswillbeheldliableforanydamagescausedorallegedtobecauseddirectlyorindirectlybythisbookPacktPublishinghasendeavoredtoprovidetrademarkinformationaboutallofthecompaniesandproductsmentionedinthisbookbytheappropriateuseofcapitalsHowever,PacktPublishingcannotguaranteetheaccuracyofthisinformationFirstpublished:NovemberProductionReference:PublishedbyPacktPublishingLtdLiveryPlaceLiveryStreetBirminghamBPB,UKISBNwwwpacktpubcomCoverImagebyWilliamKewley(williamkewleykbbsie)wwwitebooksinfoCreditsAuthorDavidCochranReviewersChrisGuntherVeturiJVSubramanyeswariAcquisitionEditorSarahCullingtonCommissioningEditorMeetaRajaniTechnicalEditorVrindaAmberkarProjectCoordinatorMichelleQuadrosProofreaderMariaGouldProductionCoordinatorMelwynD'saCoverWorkMelwynD'sawwwitebooksinfoAbouttheAuthorDavidCochranisAssociateProfessorofCommunicationatOklahomaWesleyanUniversityHeandhisstudentshaveafondnessforenvisioningandproducingexcitingprojects,withwellbuiltstandardscompliantwebsitesplayingacentralroleinthemDavidfrequentlypublishesonlinetutorialstoshareinsightsgainedinthecourseofthoseprojectsInrecentmonths,TwitterBootstraphasbeenakeytopicYou'llfindanumberofthesetutorialsatWebdesigntutspluscomandathisblog,aLittleCodecomIwouldliketothankmywife,Julie,andourkidsThanksforridingthroughthebusytimeswithgraceAndthankyouforthejoyyoubringI'mgratefulbeyondwordsIwouldalsoliketothankmycolleagues,students,andformerstudentsatOklahomaWesleyanUniversityYoumakelearningandteachingapleasureIlookforwardtomanymoreprojectstogetherwwwitebooksinfoAbouttheReviewersSree(akaVeturiJVSubramanyeswari)iscurrentlyworkingasasolutionarchitectatawellknownsoftwareconsultingMNCinIndiaAfterjoiningthiscompanysheservedafewIndianMNCs,manystartups,RDsectorsinvariousrolessuchasprogrammer,techlead,researchassistant,andarchitectShehasmorethanyearsofworkingexperienceinwebtechnologiescoveringmediaandentertainment,publishing,healthcare,enterprisearchitecture,manufacturing,publicsector,defensecommunication,andgamingSheisalsowellaknownspeakerwhodeliverstalksonDrupal,OpenSource,PHP,womenintechnology,andsoonShehasalsoreviewedothertechnicalbookssuchasDrupalRules,DevOps,DrupalMultiSitesConfiguration,BuildingPowerfulandRobustWebsiteswithDrupal,DrupalModuleDevelopment,PHPTeamDevelopment,DrupalSiteBlueprints,DrupalAttachmentViews,DrupalECommercewithUbercartx,Drupal:FirstLook,andDrupalSEOIwouldliketothankmyfamilyandfriendswhosupportedmeincompletingmyreviewsontimewithgoodqualityChrisGuntheristhecofounderofRoomSolutions,awebdevelopmentconsultancybasedoutoftheNewYorkChrisisawebapplicationdeveloper,handlingbothfrontendandbackenddevelopmentHehascontributedtomanyopensourceprojects,includingBootstrapChrisspendsmostofhistimedevelopingwithRubyonRailswwwitebooksinfowwwPacktPubcomSupportfiles,eBooks,discountoffersandmoreYoumightwanttovisitwwwPacktPubcomforsupportfilesanddownloadsrelatedtoyourbookDidyouknowthatPacktofferseBookversionsofeverybookpublished,withPDFandePubfilesavailableYoucanupgradetotheeBookversionatwwwPacktPubcomandasaprintbookcustomer,youareentitledtoadiscountontheeBookcopyGetintouchwithusatservicepacktpubcomformoredetailsAtwwwPacktPubcom,youcanalsoreadacollectionoffreetechnicalarticles,signupforarangeoffreenewslettersandreceiveexclusivediscountsandoffersonPacktbooksandeBookshttp:PacktLibPacktPubcomDoyouneedinstantsolutionstoyourITquestionsPacktLibisPackt'sonlinedigitalbooklibraryHere,youcanaccess,readandsearchacrossPackt'sentirelibraryofbooksWhySubscribefFullysearchableacrosseverybookpublishedbyPacktfCopyandpaste,printandbookmarkcontentfOndemandandaccessibleviawebbrowserFreeAccessforPacktaccountholdersIfyouhaveanaccountwithPacktatwwwPacktPubcom,youcanusethistoaccessPacktLibtodayandviewnineentirelyfreebooksSimplyuseyourlogincredentialsforimmediateaccesswwwitebooksinfoTableofContentsPrefaceTwitterBootstrapWebDevelopmentHowToDownloadingandsettingup(Mustknow)Headings,links,andbuttons(Mustknow)Conqueringthelayout(Mustknow)Creatingastandardsubpage(Mustknow)Creatingaportfoliopage(Mustknow)Creatingaproductspage(Mustknow)Customizingthenavbar(Mustknow)Makingitresponsive(Shouldknow)Addingdropdownlists(Shouldknow)Usingtabsforswitchingcontent(Shouldknow)Creatingahomepagecarousel(Shouldknow)Optimizingandcustomizing(Shouldknow)Uploading,testing,andlaunching(Mustknow)Appendix:BootstrapresourceswwwitebooksinfoiiTableofContentswwwitebooksinfoPrefaceOneofthejoysoffrontendwebdevelopmentisitscultureofspontaneousgenerosityRunintotroubleachievingyourdesireddesignIsbrowserXorYcausingyouproblemsChancesaresomeonehasidentifiedtheproblem,workedoutasolution,andposteditwithademoandcodesamplesGoogleitup,tweetathanks,postacomment,maybeevendonateabuck,andyou'refastfriendsontheroadtosomeseriouswebdesignconquestsOvertheyearsthisbasicdispositionhasscaleditselfupFromiconpacksandgradientgeneratorstogridsystemsandGitHubprojects,ourprofession'scultureofgenerosityhasgrowninsophisticationNeedagreatgrid,thoughtfultypography,expertlycraftedbuttonsPerhapssomeuserfriendlyformelementsCandoHere,there,andyonder,you'llfindaplethoraoftips,tools,andpackstogetitdoneIt'sabeautytobeholdGenerositymeetcohesion!Yetperhapsyou'venoticedanunintendedconsequenceofthishabitualgenerosityTheproliferationoftips,tools,recommendations,andsolutionsemergefromallacrossthewebWhensolutionscomefromeverywhichway,thingscanbecomeabitchaoticAcertainamountofcohesionandconsistencyareimportanttodesign,includinginterfacedesignAndyetcohesionandconsistencyoftenseemtobeamongthescarcestofresourcesontheWebNotthatthisproblemisanewoneTheindustryofmobileapplicationdesignhandlesitbyprovidingdeveloperswithSoftwareDevelopmentKits(SDKs)thatincludecarefullyhoned,cohesiveapproachestoaddressingthestandardneedsofinterfacedesignTheindustryofwebdesign,bycontrast,hastypicallynotenjoyedthewidespreaduseofsimilarfrontenddevelopmentkitsNot,thatis,untilTwitterBootstrapwwwitebooksinfoVHAVTypewrittenTextVHAVPrefaceWhenTwitterdevelopersMarkOttoandJacobThorntonfirstreleasedTwitterBootstrapinAugust,theymadeasplashUnderstandablyso,astheirframeworksuppliedcarefullycraftedyeteasilymodifiedstylesandscriptsfortheessentialelementsofacompletewebinterfaceInJanuaryof,TwitterBootstrapbroughtanumberofenhancements,mostsignificantlyaresponsivelayoutwhichadaptedtodesktops,tablets,andhandheldsThusithashappenedthat,asofthiswriting,TwitterBootstraphasquicklybecomethemostwatchedofallGitHubprojects,withmorethan,GithubuserswatchingitmorethantwicetheclosestrunnerupToemergesoquicklyfromafieldofcontenderswhichincludesthelikesoftheHTMLBoilerplateandthejQueryJavaScriptlibrary,thisisnosmallfeatGiventherateofitsgrowthandthesizeofitscommunity,wemaybeforgivenforsuspectingthatwehavesomethingseriousonourhandsAseriouscommunityLiketheHTMLBoilerplateandthejQuerylibrary,TwitterBootstraprepresentsaninformedandenergeticcommunityexertingitsbesteffortstowardacommonandshareablesetofbestpracticesWithoutdemandingsubmissionorcommandinguniformity,thecommunityexertsauthorityforasimplereason:itproducesacohesivecollectionoftested,tried,andprovenlinesofcodeThecodebasemaybeadoptedandembraced,customizedandmodified,ordissectedandexaminedInallcasesitoffersserioussolutionsforrealproblemssolutionsthatspeeddevelopersontheirwaytoservingupconsistent,reliable,anduserfriendlywebexperiencesTheproofisinthepuddingVisitafewofthemanysitescollectedatBuiltwithBootstrapcom<http:builtwithbootstrapcom>andyou'llfindapleasingvarietyofdesignssharingafewkeyfeaturesincommon:strongtypographicalconventions,awellformedgrid,andauserfriendlyinterface,amplyendowedwithcrossbrowsercompatibilityandmultidevicefriendlinesstospareManyadeveloperhasachievedtheseresultswithouttheaidofTwitterBootstrap,ofcourse,butthereislittledoubtthatBootstraphelpsthecauseandcontributestoabetterWebAdoptitwholesaleordissectandinspectit,westandtobenefitfromthetransactionWhatthisbookcoversDownloadingandsettingup(Mustknow),walksyouthroughthebasicsgettingtheCSS,images,andJavaScript,andcreatingapagetemplateHeadings,links,andbuttons(Mustknow),introducesyoutoBootstrap'sreadymadestylesforcleartypographichierarchyandturninghyperlinksintovisuallyappealingbuttonsConqueringthelayout(Mustknow),experimentswithBootstrap'sfantastictwelvecolumngridsystem,justtogetfamiliarwithitCreatingastandardsubpage(Mustknow),appliestheBootstrapgridsystemtolayoutastandardsubpagewithawidemaincolumnandanarrowersidebarwwwitebooksinfoPrefaceCreatingaportfoliopage(Mustknow),assistsyouinlayingoutafullpagegridoflinkedimageswithcaptions,usingBootstrap'sstylesforthumbnailsCreatingaproductspage(Mustknow),walksyouthroughthestepsinvolvedincreatingaproductspageBootstrapcomeswitheffectivestylesforlayingoutagood,basic,visuallyappealingtableWe'lluseittostartaproductspageCustomizingthenavbar(Mustknow),assistsyouinaddinglinkstothesepagesinBootstrap'smainnavigationbarMakingitresponsive(Shouldknow),connectsjQueryandBootstrap'sJavaScriptpluginstoenablethenavbartoadaptresponsivelytosmalldevicesandviewportsAddingdropdownlists(Shouldknow),showshowtoadddropdownliststoyournavbarWiththeJavaScriptinplace,it'squitesimpleUsingtabsforswitchingcontent(Shouldknow),illustratestheuseoftabsforswitchingcontentNowthatwe'regettingusedtoleveragingallofBootstrapmarkup,CSS,andJavaScriptwe'rereadytocreatedynamictabsforswitchingbetweenpanesofcontentCreatingahomepagecarousel(Shouldknow),addsafinaltouchtoyoursiteTofinishoursite,we'lladdabeautifulimageslideshow,usingBootstrap'sexcellent,fullyresponsivecarouselOptimizingandcustomizing(Shouldknow),willshowyouhowtooptimizeyoursiteforbetterperformanceandhowtoaddcustomizationsOutoftheboxBootstrapisgreatButyou'llwanttocustomizeitWe'llbringinsomecustomcolorsandfontfacesAndwe'lloptimizeourfilesintheprocessUploading,testing,andlaunching(Mustknow),walksyouthroughabasicprocessofuploadingoursitetothewebThenyou'llleverageacoupleofgreatonlinetoolstotestoursiteforbothdesktopandmobiledevicesAppendix:Bootstrapresources,containsalistofresourcestohelpyoucontinuegrowingasaBootstrapequippeddeveloperWhatyouneedforthisbookTherequirementsareprettysimple:acomputer,anInternetconnection,atexteditor,andadesiretolearn!wwwitebooksinfoPrefaceWhothisbookisforI'vewrittenwiththenovicetointermediatedeveloperinmindIfyou'renewtoHTML,CSS,andJavaScriptdon'tworry!I'llhelpyoualongIfyou'vebeendesigningsitesforawhile,thebookisanidealwaytogetaquickintroductiontoTwitterBootstrap'sdistinctivemarkup,CSS,andJavaScriptpluginsIfyou'reanadvanceddeveloper,interestedincustomizingBootstrapandworkingwithLESStopreprocessyourCSS,I'mafraidthisbookisnotforyou!ConventionsInthisbook,youwillfindanumberofstylesoftextthatdistinguishbetweendifferentkindsofinformationHerearesomeexamplesofthesestyles,andanexplanationoftheirmeaningCodewordsintextareshownasfollows:"Renamethefileindexhtml"Ablockofcodeissetasfollows:<divclass="herounit"><h>Hello,world!<h><p>Thisisatemplate<p><div>Whenwewishtodrawyourattentiontoaparticularpartofacodeblock,therelevantlinesoritemsaresetinbold:<divclass="itemactive"><imgsrc="imgbutterflyjpg"alt="butterfly"><divclass="carouselcaption"><p>Captioncontenthere<p><div><div>NewtermsandimportantwordsareshowninboldWordsthatyouseeonthescreen,inmenusordialogboxesforexample,appearinthetextlikethis:"ClickonthelargeDownloadBootstrapbutton"WarningsorimportantnotesappearinaboxlikethisTipsandtricksappearlikethiswwwitebooksinfoPrefaceReaderfeedbackFeedbackfromourreadersisalwayswelcomeLetusknowwhatyouthinkaboutthisbookwhatyoulikedormayhavedislikedReaderfeedbackisimportantforustodeveloptitlesthatyoureallygetthemostoutofTosendusgeneralfeedback,simplysendanemailtofeedbackpacktpubcom,andmentionthebooktitleviathesubjectofyourmessageIfthereisatopicthatyouhaveexpertiseinandyouareinterestedineitherwritingorcontributingtoabook,seeourauthorguideonwwwpacktpubcomauthorsCustomersupportNowthatyouaretheproudownerofaPacktbook,wehaveanumberofthingstohelpyoutogetthemostfromyourpurchaseDownloadingtheexamplecodeYoucandownloadtheexamplecodefilesforallPacktbooksyouhavepurchasedfromyouraccountathttp:wwwPacktPubcomIfyoupurchasedthisbookelsewhere,youcanvisithttp:wwwPacktPubcomsupportandregistertohavethefilesemaileddirectlytoyouErrataAlthoughwehavetakeneverycaretoensuretheaccuracyofourcontent,mistakesdohappenIfyoufindamistakeinoneofourbooksmaybeamistakeinthetextorthecodewewouldbegratefulifyouwouldreportthistousBydoingso,youcansaveotherreadersfromfrustrationandhelpusimprovesubsequentversionsofthisbookIfyoufindanyerrata,pleasereportthembyvisitinghttp:wwwpacktpubcomsupport,selectingyourbook,clickingontheerratasubmissionformlink,andenteringthedetailsofyourerrataOnceyourerrataareverified,yoursubmissionwillbeacceptedandtheerratawillbeuploadedonourwebsite,oraddedtoanylistofexistingerrata,undertheErratasectionofthattitleAnyexistingerratacanbeviewedbyselectingyourtitlefromhttp:wwwpacktpubcomsupportwwwitebooksinfoPrefacePiracyPiracyofcopyrightmaterialontheInternetisanongoingproblemacrossallmediaAtPackt,wetaketheprotectionofourcopyrightandlicensesveryseriouslyIfyoucomeacrossanyillegalcopiesofourworks,inanyform,ontheInternet,pleaseprovideuswiththelocationaddressorwebsitenameimmediatelysothatwecanpursuearemedyPleasecontactusatcopyrightpacktpubcomwithalinktothesuspectedpiratedmaterialWeappreciateyourhelpinprotectingourauthors,andourabilitytobringyouvaluablecontentQuestionsYoucancontactusatquestionspacktpubcomifyouarehavingaproblemwithanyaspectofthebook,andwewilldoourbesttoaddressitwwwitebooksinfoTwitterBootstrapWebDevelopmentHowToWelcometoTwitterBootstrapWebDevelopmentHowToThecontentofthisbookisuptodatewithversionofTwitterBootstrapInwhatfollows,thisbookwillhelpyoutogettoknowTwitterBootstrapbytryingitonforsizeI'vewrittenwiththenovicetointermediatedeveloperinmindIfyou'vebeendesigningsitesforawhile,thenthisbookwillgiveyouaquickintroductiontoseveralkeyfeaturesofTwitterBootstrap'smarkup,stylesheets,andJavaScriptpluginsIfyou'renewtoHTMLandCSS(andmaybeevenalittlescaredofJavaScript)don'tworry!ThisbookwillhelpyoualongIf,bycontrast,you'relookingtocompileCSSfromLESSandintegratetheresultswithBackbonejsthisisn'tforyouFairenoughLet'sdiveinDownloadingandsettingup(Mustknow)Inafewsimplesteps,we'llputtogetherabasicstartersiteequippedwithTwitterBootstrap'sframeworkofstylesheets,icons,andJavaScriptpluginsGettingreadyTwitterBootstrapismorethanasetofcodeItisanonlinecommunityTogetstarted,youwilldowelltofamiliarizeyourselfwithTwitterBootstrap'shomebase:http:twittergithubcombootstrapwwwitebooksinfoTwitterBootstrapWebDevelopmentHowToHereyou'llfindthefollowing:fThedocumentation:Ifthisisyourfirstvisit,grabacupofcoffeeandspendsometimeperusingthepages,scanningthecomponents,readingthedetails,andsoakingitin(You'llseethisisgoingtobefun)fThedownloadbutton:YoucangetthelatestandgreatestversionsoftheTwitterBootstrap'sCSS,JavaScriptplugins,andicons,compiledandreadyforaction,comingtoyouinaconvenientZIPfolderThisiswherewe'llstartDownloadingtheexamplecodeYoucandownloadtheexamplecodefilesforallPacktbooksyouhavepurchasedfromyouraccountathttp:wwwPacktPubcomIfyoupurchasedthisbookelsewhere,youcanvisithttp:wwwPacktPubcomsupportandregistertohavethefilesemaileddirectlytoyouHowtodoit…Whateveryourexperiencelevel,aspromised,I'llwalkyouthroughallthenecessarystepsHeregoes!GototheBootstraphomepage:http:twittergithubcombootstrapClickonthelargeDownloadBootstrapbuttonLocatethedownloadfileandunziporextractitYoushouldgetafoldernamedsimplybootstrapInsidethisfolderyoushouldfindthefoldersandfilesshowninthefollowingscreenshot:Fromthehomepage,clickonthemainnavigationitem:GetstartedwwwitebooksinfoTwitterBootstrapWebDevelopmentHowToScrolldown,orusethese

精彩专题

职业精品

上传我的资料

热门资料

资料评价:

/ 68
所需积分:1 立即下载

意见
反馈

返回
顶部

Q