178398726X {f9726479} bootstrap for rails rahman 2015 02 25
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (6.45 MB, 271 trang )
www.it-ebooks.info
www.it-ebooks.info
BootstrapforRails
www.it-ebooks.info
TableofContents
BootstrapforRails
Credits
AbouttheAuthor
AbouttheReviewers
www.PacktPub.com
Supportfiles,eBooks,discountoffers,andmore
Whysubscribe?
FreeaccessforPacktaccountholders
Preface
Whatthisbookcovers
Whatyouneedforthisbook
Whothisbookisfor
Conventions
Readerfeedback
Customersupport
Downloadingtheexamplecode
Errata
Piracy
Questions
1.IntroducingWebApplicationDevelopmentinRails
WhyBootstrapwithRails?
SettingupaTodoapplicationinRails
AnalyzingfolderstructureofaRailsapplication
Creatingviews
StylingviewsusingCSS
RedesigningtheTodoapplication
ChallengesinstylingaRailsapplicationtraditionally
Summary
2.IntroducingBootstrap3
www.it-ebooks.info
WhatisBootstrap?
InstallingBootstrapinaRailsproject
PlacingBootstrapfilesinaRailsproject
Bootstrap–theSassway
BootstrapthroughCDN
Summary
3.PoweringaRailsAppwithBootstrap’sGridSystem
WhatisBootstrap’sgridsystem?
Nestingcolumns
ImplementingBootstrap’sgridsysteminaRailsapplication
Summary
4.UsingBootstrap’sTypography,Buttons,andImagesinaRailsApplication
Settingup
Stylingtypography
Aligningtext
Texttransformation
Blockquotes
Stylinglistingelements
Creatingandstylingbuttons
WhichelementsareeligibletouseBootstrap’sbuttonclasses?
StylingimagesinBootstrap
Summary
5.ReinventingTablesandFormsinBootstrap
CreatingBootstraptables
CreatingBootstrapforms
ValidationclassesinBootstrapforms
AddingBootstraptablestoourRailsapplication
AddingBootstrapformstoourRailsapplication
Summary
6.CreatingNavigationBars
Gettingstartedwithanavigationbar
www.it-ebooks.info
Navigationbarhelperclasses
AddinganavigationbartotheRailsapplication
Summary
7.VariousOtherBootstrapComponents
BootstrapBreadcrumbs
Thepaginationcomponent
Bootstraplabelsandbadges
Bootstrapjumbotrons
Alerts
Creatingaprogressbar
Panels
Summary
8.WorkingwithBootstrapModals
Gettingstartedwithmodals
ChangingBootstrap’smodalsize
AdditionalBootstrapmodalfeatures
FetchingremotecontentfromaBootstrapmodal
UsingBootstrap’smodalinaRailsapplication
Summary
9.CreatingImageSlideshowswithBootstrapCarousel
GettingstartedwithBootstrapCarousel
Addingcaptionstotheslides
CustomizingCarousel
Summary
10.CreatingaShoppingCartUsingBootstrapModals
Addingashoppingcartsymbol
Creatingashoppingcartusingmodals
Summary
A.AddingCustomStylestoaRailsApplication
AddingBootstrap-sasstoaRailsapplication
CustomizingBootstrapthroughvariables
www.it-ebooks.info
Summary
Index
www.it-ebooks.info
www.it-ebooks.info
BootstrapforRails
www.it-ebooks.info
www.it-ebooks.info
BootstrapforRails
Copyright©2015PacktPublishing
Allrightsreserved.Nopartofthisbookmaybereproduced,storedinaretrievalsystem,
ortransmittedinanyformorbyanymeans,withoutthepriorwrittenpermissionofthe
publisher,exceptinthecaseofbriefquotationsembeddedincriticalarticlesorreviews.
Everyefforthasbeenmadeinthepreparationofthisbooktoensuretheaccuracyofthe
informationpresented.However,theinformationcontainedinthisbookissoldwithout
warranty,eitherexpressorimplied.Neithertheauthor,norPacktPublishing,andits
dealersanddistributorswillbeheldliableforanydamagescausedorallegedtobecaused
directlyorindirectlybythisbook.
PacktPublishinghasendeavoredtoprovidetrademarkinformationaboutallofthe
companiesandproductsmentionedinthisbookbytheappropriateuseofcapitals.
However,PacktPublishingcannotguaranteetheaccuracyofthisinformation.
Firstpublished:February2015
Productionreference:1190215
PublishedbyPacktPublishingLtd.
LiveryPlace
35LiveryStreet
BirminghamB32PB,UK.
ISBN978-1-78398-726-9
www.packtpub.com
www.it-ebooks.info
www.it-ebooks.info
Credits
Author
SyedFazleRahman
Reviewers
FabriceEstiévenart
SamuelGoebert
MoncefMaiza
CommissioningEditor
AmarabhaBanerjee
AcquisitionEditor
VinayArgekar
ContentDevelopmentEditor
RitikaSingh
TechnicalEditor
NaveenkumarJain
CopyEditor
NehaVyas
ProjectCoordinator
AboliAmbardekar
Proofreaders
SimranBhogal
LindaMorris
Indexer
RekhaNair
ProductionCoordinator
KomalRamchandani
CoverWork
KomalRamchandani
www.it-ebooks.info
www.it-ebooks.info
AbouttheAuthor
SyedFazleRahmanisanexperiencedfrontenddeveloper.Hehaspublishedmany
frontendarticlesforSitePoint.comandHTMLxprs.com.HisarticlesonBootstrap
frameworkareamongstthemostpopularonesintheweb.Heisenthusiasticaboutstartupsandlikestechnicalwriting/editing.
Heisthecofounderofdevmag.io—anetworkfordevelopersandtechnologists.devmag.io
helpstechnologyenthusiastsconnectanddiscovervariousprogrammingandtechnology
content.
www.it-ebooks.info
www.it-ebooks.info
AbouttheReviewers
FabriceEstiévenart(@fab_estievenart)isawebandmobiledeveloperwithafocuson
webframeworks(suchasYii,Django,AngularJS,NodeJS,andsoon),bigdata
technologies(suchasHadoop,MongoDB,Solr,andsoon),andgamelibraries(suchas
LibGDX).Hehasinitiatedandcontributedtomanyopensourceprojects,suchasNutch
(thehighlyextensibleandscalableWebCrawler),GnuCash,Yii,andRetroWeb(avisual
webwrappingapplication).
Asapassionatevideoandboardgamer,hehascreatedLudoPassion(@ludopassion),
whereheofferstoorganizecustomteambuildingactivitiesaroundseriousgames.Inthis
context,heregularlypublishesvideoswhereinhepresentsafewboardgamesand
explainstheirrules.
Finally,heisasologuitarist/mandolinist(@fabrisss),tryingtofindsomesparetimeto
recordhisfirstfull-lengthalbumwithfolkandbluegrassinspiration.
SamuelGoebertisacomputersciencePhDstudentatthePlymouthUniversity,UK.
Goeberthasover12yearsofexperienceinsoftwaredevelopmentandassociated
technologies.Toknowmoreabouthim,referto
/>
www.it-ebooks.info
www.it-ebooks.info
www.PacktPub.com
www.it-ebooks.info
Supportfiles,eBooks,discountoffers,and
more
Forsupportfilesanddownloadsrelatedtoyourbook,pleasevisitwww.PacktPub.com.
DidyouknowthatPacktofferseBookversionsofeverybookpublished,withPDFand
ePubfilesavailable?YoucanupgradetotheeBookversionatwww.PacktPub.comandas
aprintbookcustomer,youareentitledtoadiscountontheeBookcopy.Getintouchwith
usat<>formoredetails.
Atwww.PacktPub.com,youcanalsoreadacollectionoffreetechnicalarticles,signup
forarangeoffreenewslettersandreceiveexclusivediscountsandoffersonPacktbooks
andeBooks.
/>DoyouneedinstantsolutionstoyourITquestions?PacktLibisPackt’sonlinedigital
booklibrary.Here,youcansearch,access,andreadPackt’sentirelibraryofbooks.
www.it-ebooks.info
Whysubscribe?
FullysearchableacrosseverybookpublishedbyPackt
Copyandpaste,print,andbookmarkcontent
Ondemandandaccessibleviaawebbrowser
www.it-ebooks.info
FreeaccessforPacktaccountholders
IfyouhaveanaccountwithPacktatwww.PacktPub.com,youcanusethistoaccess
PacktLibtodayandview9entirelyfreebooks.Simplyuseyourlogincredentialsfor
immediateaccess.
www.it-ebooks.info
www.it-ebooks.info
Preface
Howdy!So,youwanttolearnBootstrapanditsawesomenessandimplementitinaRails
project?Ithinkyoumadetherightchoicebyselectingthisbook.
Webdesigningisnoteveryone’scupoftea.Ihaveseenmanyexperiencedwebdevelopers
whoareextremelypooratwebdesigning.Theyhavetheabilitytomakethemost
powerfulapplications,butlacktheskillstocreateadecentlookingwebsite.
Ontheotherhand,there’sasuddenriseinthepopularityofCSSandJavaScriptfrontend
frameworks.TheseframeworkslettheuserscreatepopularCSSandJavaScript
components,suchasdrop-downmenus,responsivemenus,apropergridsystemto
structurewebsites,andsooneasilywithouthavinganyknowledgeaboutCSSand
JavaScriptcoding.Bootstrap,beingoneofthepioneersinthebook,providesmany
prestyledCSScomponentsthatcomereadytobeused.Yousimplyneedtoknowthe
appropriateHTMLfilestousethesefrontendframeworks.
ThisbookwillhelpyouunderstandwhatBootstrapis,andhowitcanbeusedinaRails
environment.ItwillguideyouthroughvariousCSSandJavaScriptcomponentsof
Bootstrapviamanypracticalexamples.IfyouareaSassdeveloper,thisbookwillhelp
youidentifyvariousSassvariablestocustomizeBootstrap.
Ihopeyouhavefunreadingthisbook!
www.it-ebooks.info
Whatthisbookcovers
Chapter1,IntroducingWebApplicationDevelopmentinRails,focusesonhowtobeautify
RailsapplicationsthroughthehelpofBootstrap.Thisexplanationisfollowedbythe
summaryofthischapter.
Chapter2,IntroducingBootstrap3,willshowyouhowtodownloadanduseBootstrapin
Railsprojects.
Chapter3,PoweringaRailsAppwithBootstrap’sGridSystem,willtakeyouthrough
Bootstrap’sgridsystemandthenproceedtoshowyouhowtouseitinourfirstexample
application.
Chapter4,UsingBootstrap’sTypography,ButtonsandImagesinaRailsApplication,
focusesmoreonhowtostyleawebsite’scontentsuchastext,links,andimages.
Chapter5,ReinventingTablesandFormsinBootstrap,willtakealookatthevarious
featuresofBootstraptablesandforms.Inthischapter,wewillfirstcreatedummy
productsandthenintegratetheminourrealapplication.
Chapter6,CreatingNavigationBars,willteachyouhowtocreateaBootstrapnavigation
bar,andhowwecanmodifyittofitourneeds.
Chapter7,VariousOtherBootstrapComponents,willexploresomemoreBootstrap
components,whichcomereadytouse.
Chapter8,WorkingwithBootstrapModals,willteachyouhowtocreateaBootstrap
modalanditsvarioustypesandfunctionalities.Wewillalsointegrateamodalcomponent
inourRailsapplication.
Chapter9,CreatingImageSlideshowswithBootstrapCarousel,willgetyoustartedwith
theBootstrapCarousel,howtoaddcaptionstotheslides,andhowtocustomizethe
Carousel.
Chapter10,CreatingaShoppingCartUsingBootstrapModals,isallaboutimplementing
whatwehavelearnedsofarinBootstrap.Thischapterwilldefinitelyclearsomeofthe
coreconceptsofBootstrapsuchashowtouseBootstrapmodal,typography,buttons,and
responsivetables.
Appendix,AddingCustomStylestoaRailsApplication,talksabouthowtoaddacustom
styletoaRailsapplication,whichispoweredbyaBootstrapframework.
www.it-ebooks.info
