bootstrap 3.3 a guide book for beginners to learn web framework fast!.pdf
TRANSCRIPT
-
Bootstrap3.3AGuideBookforBeginnerstoLearnWeb
FrameworkFast!
KevinLyn.
Copyright2015byKevinLyn.
All rights reserved. No part of this publication may be reproduced, distributed, or
transmitted in any form or by any means, including photocopying, recording, or other
electronic or mechanical methods, without the prior written permission of the author,
except in the case of brief quotations embodied in critical reviews and certain other
noncommercialusespermittedbycopyrightlaw.
Disclaimer
While all attemptshavebeenmade toverify the informationprovided in this book, theauthordoesntassumeanyresponsibilityforerrors,omissions,orcontraryinterpretationsof the subjectmatter containedwithin.The information provided in this book is foreducationalandentertainmentpurposesonly.Thereaderisresponsibleforhisorherownactionsandtheauthordoesnotacceptanyresponsibilitiesforanyliabilitiesordamages,realorperceived,resultingfromtheuseofthisinformation.
-
TableofContents
BookDescription
Introduction
Chapter1:Definition
Chapter2:GettingstartedwithBootstrap
Chapter3:GridSysteminBootstrap
Chapter4:FixedLayoutwithBootstrap
Chapter5:TablesinBootstrap
Chapter6:ListsinBootstrap
Chapter7:CreatingFormswithBootstrap
Chapter8:StylingImageswithBootstrap
Chapter9:ButtonsinBootstrap
Chapter10:ModalsinBootstrap
Chapter11:AccordioninBootstrap
Chapter12:BootstrapCarousel
Conclusion
-
BookDescription
Thisbookisallaboutbootstrap.Afterreadingit,youwillknowhowtousebootstrapfor
development.Youwillalsoknowtheconstituentcomponentsofbootstrap.Thetwotypes
ofbootstrap,thatis,thecompiledandthesourcecodefilesareexploredindetailwith
emphasisonthedifferencebetweenthetwotypes.
Hereyouwilllearnhowtopredicttheappearanceofawebpageondifferentdevicesand
screensdependingonthekindoflayoutyouhaveused.Tables,whichareacommon
featureinwebdevelopmenthavebeendiscussed.Addinghover,borders,adding
backgroundfeaturesandaswellasdifferentiatingtherowsofatablehavebeendiscussed.
Thefileswhichareusuallyfoundinthebootstrapfolderarealsoexplainedintermsof
whattheydo.Youwillalsobeguidedonhowtoincludethesebootstrapfilesinyour
projectandevenintheheaderofyourcode.Thedifferenttypesoflayoutswhichare
availableinbootstrapareexploredindetailandtheireffectondeviceswithdifferent
screensizes.
Youwillalsoknowhowtomakeresponsivetableswithbootstrapsothattheycanappear
wellondifferentdevicesregardlessofthescreensize.Listsarealsoexploredinthisbook.
Thedifferenttypesofbuttonsarealsoexplored,andaswellasimagesandformsin
bootstrap.
-
Modals,accordionsandcarousel,whichareadvancedfeaturesinbootstraphavealsobeen
discussedinthisbook.Therearecodeexamplesaswellaspicturesinthisbookforeaseof
understanding.Thefollowingtopicshavebeendiscussed:
Definition
Gettingstarted
GridsysteminBootstrap
FixedLayout
Tables
Lists
Forms
StylingImages
Buttons
Modals
Accordion
Carousel
-
Introduction
Withbootstrap,youcancreatewebpagesthatwillscrollwellonanydevice.Something
likeatable,whichmightseemdifficulttofitonacellphonecanbemadetodothisusing
bootstrap.Thisexplainshowpowerfulbootstrapis.Thiscanalsobedonewithouttoo
muchcodingandinashortperiodoftime.
Youmighthaveheardofresponsivewebdesign.Ifnot,dontworryforyoullunderstand
whatitisafterreadingthisbook.Youmighthaverealizedthatsomewebsitesarenot
accessibleviacellphonesandtablets,butonecanonlyaccessthemviacomputers.Web
pagesalsodonotappearthesameondeviceswithdifferentsizesintermsofthelayout
andhowtheyscroll.
Youknowaboutvalidation.InsteadofusingJquery,withwhichmuchcodingwillbe
needed,bootstrapcanbeusedforthispurposeusinglessthan5words.Ithasnumerous
controlswhichareavailableinHTMLsuchasbuttonsandtextfields.Withbootstrap,
thesecanbemadebeautiful.Imageandtextsliderscanalsobemadeusingbootstrapwith
muchlesseffortintermsofcoding.
-
Chapter1:
Definition
Everheardofresponsivewebdesign?Bootstrapisacollectionoftoolswhichhelps
developersincreatingresponsivewebsites.Mostoftodayswebsitesarenotresponsive,
meaningthatyoucanonlyaccessthemviacomputers.Deviceswithsmallscreensuchas
mobilephonesandtabletscannotaccessthesewebsites.
ThisiswhyJacobThorntonandMarkOttodevelopedbootstrap.Withthistool,
developerscreatewebsiteswithamazingfeaturesandthesecanbeaccessedviadevicesof
anyscreensize.Responsivenessisoneoftheemergingissuesinwebdevelopment,and
thisisthereasonwhyyoushouldconsiderlearningbootstrap.
Itiscompatiblewithnearlyallthebrowserscurrentlyinuse.Ifyouhaveneverusedthis
tool,youwillbeamazedhowitsensesthesizeofthescreenofthedeviceandthenit
adjuststhepagesofthewebpagedynamically.Itsdocumentationhasbeentranslatedinto
otherlanguagessuchasRussian,SpanishandChinese.
Ifyouhavenotdownloadedit,itisavailableforfreedownloadonGithub,soyoucanget
itfromthere.Theprocessofcreatingaresponsivelayoutwithbootstrapismucheasysuch
thatevenbeginnerswillfinditeasy.ThetoolisbasedonHTMLandCSS.
-
Someoftheinterfacecomponentsthatcanbecreatedwithbootstrapincludecarousel,
buttons,modals,accordion,forms,tables,dropdowns,alerts,navigationandtabs.Italso
offersJavascriptextensionswhichareoptional.
WhyyoushoulduseBootstrap
1.Responsivedesign-withbootstrap,webpagesappearwellondeviceswith
differentscreensizesandresolution.Youwillnotobserveanychangeinmarkup.
2.Easytolearnanduse-providedyouknowthebasicsofHTMLandCSS,you
dontneedtolearnbootstrap.Youonlyneedtogetstarted.
3.Savestime-insteadofdefiningyourownclasses,youjustusethepredefined
bootstrapclassesandtemplatesandthenusethatdoingindoingotherdevelopmentwork.
4.CompatibilitywithBrowsers-bootstrapiscompatiblewithmostofthecurrent
browserssuchasGoogleChrome,MozillaFirefox,Safari,OperaandInternetExplorer.
5.ConsistencyinDesign-throughacentrallibrary,allofthecomponentsofthistool
sharethesamedesignstylesandtemplateswhichhaveledtoconsistency.
-
6.Opensource-bootstrapisavailableforfreedownloadonGitHub.
Itisworthtonotethatsomepropertiessuchasshadows,roundedcornersandgradients
whicharesupportedbyCSS3arealsosupportedinBootstrap.However,whenyouuse
olderversionsofbrowserssuchastheInternetexplorerandyouhavedevelopedthese
featureswithbootstrap,theywillnotbesupported.
-
Chapter2:
GettingstartedwithBootstrap
Beforeyoucanbegintousebootstrap,itisgoodtomakesurethatyouunderstandthe
basicsofbothHTMLandCSSasthesearethebuildingblocksofbootstrap.Also,ensure
thatyourcomputerhasaneditorofchoice.Idontpreferthebasiconessuchasnotepad.
YoucandownloadandinstallDreamweaverorNotepad++.
DownloadingBootstrapFiles
Whendownloadingbootstrapfiles,youwillbeavailedwithtwoversions,theBootstrap
sourcefilesandtheCompiledBootstrapfiles.Thesourceversionalwayscontains
originalsourcefilesforallJavascriptandCSSandalocalcopyofthedocuments.
ThecompiledversioncontainstheminifiedandcompiledversionsofJavascriptandCSS
files.Foreasyandfasterwebdevelopment,ithasiconsinfontformat.Inthisbook,weare
goingtousethecompiledversionofbootstrap.Itiseasyforunderstandingandsavingof
timesinceastheprogrammer,youwillnotbeneededtoincludeseparatefilesforeach
functionality.
ItalsohaslessHTTPrequest,henceyouwillsaveonbandwidthwhenmovingthesitetoa
-
productionenvironment.Afterdownloadthebootstrapfile,itwillcomeazippedformat.
Unzipitandyouwillfindthefollowingfiles:
Css:
bootstrap.css
bootstrap.min.css
bootstrap-theme.css
bootstrap-theme.min.css
js:
bootstrap.js
bootstrap.min.js
fonts:
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Theabovearethecomponentsofthecompiledversionofbootstrap.Ithasthecompiles
JavascriptandCSSfilesandafontsfile.Thefourfilescontain200icons.
-
Nowthatyouhaveknownthestructureofthebootstrap,letuscreateourfirsttemplate
usingit.ConsiderthefollowingbasicHTMLcode:
AnHTMLfile
Helloworld
Wewanttoenhancetheperformanceoftheabovebymakingitabootstrappedtemplate.
Toachievethis,wejustneedtoaddtheCSSandJSfilesfrombootstrap,andwewillbe
done.TheJavascriptfilesshouldbeaddedatthepagesbottom.Thisshouldbeasfollows:
-
ABootstrapTemplate
Helloworld
Bekeenwhenspecifyingthepathwherethebootstrapfilesarelocated.Notethatwehave
addedthreefilestodevelopthetemplate.Youcannowsavethetemplateandgiveita
nameofchoice.
Ensurethatthenamehasa.htmlextension.Youcanthennavigatetothelocationwhere
youhavesavedthefileanddoubleclickonitorrightclickonitandchoosingOpen.It
willopenwiththedefaultbrowserofyourcomputer.TextwrittenHelloworldwillbe
printedonthebrowser.Incasethefiledoesntopenafterusingtheabovetwomethods,
justopenabrowseranddragitthere.Itwillopen.
-
Chapter3:
GridSysteminBootstrap
Thismakesitpossibleforwebdeveloperstocreatedifferentlayoutsfortheirwebpages.
InBootstrap3,thisgridsystemcanspanupto12columnsdependingonthescreensizeof
thedevice.Thistypeofgridsystemiscalledmobilefirstfluidgridsystem.
Developershaveusedthistocreatewebsiteswhichcanbeaccessedusinganydevice
regardlessofthescreensize.Thisversionofbootstrapalsohasdifferentclassesfor
makinglayoutsofdifferentdevicessuchastablets,desktopsandcellphones.
CreatingLayoutswithBootstrapGridsystem
Withbootstrap,onecandetermineandcontrolhowthepagesofthewebsitewilllookon
differentdeviceswithdifferentscreensizes.Considerthefollowingdevices:
-
Wehavepresentedthefourscreenseachwith12contentboxes.However,thearrangement
isnotthesameonallscreens.Thefirstscreenillustratesthescreenofacellphone.The
contentboxeshavebeenarrangedverticallyandeachoccupiesarow.
Thesecondscreenillustratesadevicesuchasadesktopwithalargedisplay.Thecontent
boxeshavebeenarrangedina4*3gridlayout.Thethirdscreenillustrateswhatwehave
inadevicesuchasatablet.Thecontentboxeshavebeenarrangedina2*6gridlayout.
Thelastscreenillustrateswhatwehaveinalaptopwithamediumsizedscreen.The
contentboxeshavebeenrepresentedina3*4gridlayout.
Nowthatwehavethefourscreens,howcanyoucreatealayouttofitinanyoftheabove
screens?Thatswhatwegoingtotackle.Letusstartwiththedevicehavingamedium
sizedscreensuchasalaptop.Typethefollowingcodeandrunitonsuchadevice:
A3gridsystemwithbootstrap
-
p{
background:#f2f2f2;
padding:52px;
font-size:30px;
text-align:center;
font-weight:bold;
}
1
2
3
4
5
6
7
8
9
-
10
11
12
Followthestepswedidinourfirstexampletorunthefileaftersavingit.Ifyouusea
mediumsizeddevicesuchalaptop,theoutputwillbeboxesarrangedina3*4grid
layout,thatis,4rowsand3columns.However,younoticethatifanyofthecolumnsis
tallerthantheothers,itwillnotclearproperly.Fixthisbyadding.clearfixandtheclasses
responsibleforresponsivenessasshownbelow:
A3gridsystemwithbootstrap
-
p{
font-size:32px;
font-weight:bold;
padding:50px;
background:#f2f2f2;
text-align:center;
}
1
2
3
4
-
5
6
7
8
9
10
11
12
Thatsforalaptop.Letustothesameforatabletwhichhas2*6gridlayout.Thecode
shouldbeasfollows:
A3gridlayoutwithBootstrap
-
p{
background:#f2f2f2;
padding:50px;
font-size:32px;
text-align:center;
font-weight:bold;
}
1
2
3
4
-
5
6
7
8
9
10
11
12
Noticethatinthiscasewehaveused.col-sm-6.
Forsmalldevicessuchasthemobilephones,theclearingwilllookasfollows:
1
-
2
3
4
5
6
7
8
9
10
11
12
-
Lastly,forlargescreenssuchasdesktops,theclearingwouldbeasfollows:
1
2
3
4
5
6
7
8
9
-
10
11
12
-
Chapter4:
FixedLayoutwithBootstrap
Youcanusebootstraptocreatepagesforawebwithafixednumberofpixels.Thegood
thingwiththisisthatitwillremainresponsiveonalldeviceseventhoughyouarenot
requiredtoincludetheresponsivestylesheet.Inthiscase,westartwiththeclass
.container.
Forustowrapthehorizontalgroupsofcolumns,weusethe.rowclass.Foryoutoensure
thatthereisaproperpaddingandalignment,allrowsmustbeplacedinthe.container
class.Creationofcolumnscanthenbedonewithintherowsusingclassessuchas.col-sm-
*,.col-xs-*,.col-lg-*and.col-md-*.
Notethat*standsforthenumberofgridswhichcantakevaluesfrom1to12.Letus
illustratethiswithacodewhichwillcreateafixedwidthpagewith750pxanditis
responsive.Thiswebpageshouldbe750pxwideonadevicesuchasatabletwhichhasa
smallscreensize,970pxwideonadevicewithamediumsizeddisplaysuchalaptopand
1170pxwideondeviceswithlargedisplaysizesuchaslargedesktops.
Ondevicessuchascellphoneswhosedisplayissmall(
-
AfixedlayoutwithBootstrap
NavigatingToggle
-
Bootstrapbook
Home
About
Contact
LearntouseBootstrap
WithBootsrap,onecancreateafixedandresponsiveweb
Readthisbooktoget
started
-
HTML
HTMLisalsogoodforcreatingwebpages.Itisoneoftheconstituentcomponents
ofbootstrap.
ReadMore
CSS
CSSisagoodwhenitcomestopresentationofawebpage.Oncanalsoaddmany
stylestothewebpagewiththis.Colors,paddingandindentationcanbeachievedwith
CSS,thus,itisaverypowerfultool.ItisaconstituentcomponentofBootstrapalongwith
HTML
Readmore
Bootstrap
Bootstrapisatoolforresponsivewebdesign,withwhichadevelopercanachieve
amazingfunctionalities,andwithlesseffortandwithinashortperiodoftime.
Readmore
-
Bootstrapbook
Onceyouhavesavedthefilewitha.htmlextension,justrunit.Thefirstpartoftheoutput
willbeanavigationbarcontainingmenus.ThefirstmenuwillbewrittenBootstrap
book.Theothermenuswillappearasfollows:
AtthecenterofthewebpageshouldbeadescriptionofthetitleLearntouseBootstrap.
ThedescriptionforHTML,CSSandBootstrapwillalsobeshown.Noticethecolorofthe
buttonsusedinthisexample.Theyareallgreen.Thisisbecausewehaveusedthebutton
-
success.Therearemanyothertypesofbuttonsandyouwilllearntheseasweprogress.
-
Chapter5:
TablesinBootstrap
Bootstrapcanbeusedtoenhancehowyourtablelookslike.Thismeansthatonecan
improvetablesfromwhattheycancreateusingpureHTML.Letusbeginycreatinga
simpletableusingthe.tableclassinbootstrap:
RowNumber
FName
LName
Email
1
-
Michael
Joseph
2
john
Parker
3
peter
mary
-
AddingAlternateBackgroundtotheTable
Youcanaddadditionalfeaturestoyourtablesuchasstripesresemblingtheonesofa
zebra.Runthefollowingcodeandobservetheoutput:
RowNumber
FName
LName
Email
1
-
Peter
mary
2
john
Parker
3
emmanuel
ken
Afterrunningtheabovecode,thefollowingoutputwillbeobserved:
-
AddingborderstoaTable
Toaddborderstoeachcellofthetable,usetheclass.table-bordered.Addittothe.table
baseclass.Runthefollowingcodeandobservetheoutput:
Row
FirstName
LastName
Email
1
-
Peter
mary
2
john
Parker
3
emmanuel
ken
Afterrunningthecode,thefollowingtablewillbedisplayedonthebrowser:
-
Asyoucansee,aborderhasbeenaddedtoeachcell.
-
HoverstateonTableRows
Thiscanbeenabledontherowsofthetablebysimplyusingthe.table-hoverbootstrap
class.Thiscanbeaddedtothe.tableclassandwithintheelement.Writethe
followingcodeandrunit:
Row
FirstName
LastName
Email
1
Peter
mary
-
2
john
Parker
3
emmanuel
ken
Onrunningthecodeabove,youwillnoticethatthemovementofthecursoronthetableis
beingtracked.Thisiswhatwecallhover:
-
Notethatinourexample,thecursorisonthesecondrowofthetableandthatswhyitis
highlighted.
-
CondensedTables
Youcanchoosetosaveonsavebymakingyourtablemorecompact.Thiscanbeachieved
byusingthe.table-condensedclasswhichshouldaddedtothe.tableclass.Writeandrun
thecodebelow:
RowNumber
FName
LName
Email
1
Peter
mary
-
2
john
Parker
3
emmanuel
ken
Youwillnoticethattheoutputtablewillbemuchcondensedcomparedtowhatwehadin
ourpreviousexamples.Youwillhavesavedonspace.
-
DifferentiatingTableRows
Youcanputemphasisonaparticulartablerowtoensurethatitlooksuniquefromtherest
oftherows.Thiswillenableyoutouniquelyidentifythisrow.Considertheexample
below:
RowNumber
YourBill
DateofPayment
PaymentStatus
1
Bank
08/09/2013
Callforconfirmation
-
2
Water
02/08/2013
Cleared
3
Internet
07/08/2013
Plantobechanged
4
Electricity
08/07/2013
Awaiting
5
-
Telephone
08/09/2013
Overpay
Nowtrytorunthecodeabove.Theoutputtablewillbeveryamazingasshownbelow:
ResponsiveTableswithBootstrap
Inmostdevicesandespeciallytheoneswithasmalldisplaysize,tablesdonotscrollwell.
Withbootstrap,thisproblemcanbesolvedsuchthatyourtablescanscrollwellevenon
cellphones.Ondeviceswithlargedisplays,youwillnotnoticeanydisplay.Writethe
followingcodeonyoureditor:
-
RowNumber
FName
LName
Email
History
1
Peter
Mark
PeterMarkisagreatman
2
-
Victor
Benjamin
Agreatfriend
3
Alphonse
David
Amathematician
Onceyouhavewrittenthecodeabove,runitonadevicehavingalargedisplaysuchasa
desktop.Observehowthetableisalignedorhowitscrolls.Runitonadevicewitha
mediumsizeddisplaysuchasalaptopandagain,observehowthetablebehaves.
-
Chapter6:
ListsinBootstrap
Listsarecommonelementsinwebdesign.Youmightneedtousetheminthecourseof
programming.Withbootstrap,youcancreatethefollowingtypesoflists:
1.OrderedLists-akindoflistwhereorderisreallyimportant.Theelementsinan
orderedlistarenumbered.
2.UnorderedList-orderinthiskindoflistdoesnotmatter.Theelementsinthis
listaremarkedbyuseofbullets.
3.DefinitionList-thisisjustasetoftermsaccompaniedbytheirdescription.
UnorderedListsandUn-styledOrderedLists
Listitemsusuallycomewithadefaultstyling.However,youmightneedtodoawaywith
thisstyleforsomereasons.Thiscanbeachievedbyusingtheclass.list-unstyled.Write
thecodebelowandrunit:
-
UnstyledListswithBootstrap3
.ls-example{
margin:20px;
}
UnstyledUnorderedList
Home
-
About
Services
Accessories
Location
Contact
UnstyledOrderedList
Home
About
Services
Accessories
Location
Contact
-
Afterrunningthecodeabove,thefollowingwillbetheoutput:
Asyoucansee,thereisnothedefaultstylinginbothunorderedandtheorderedlistsince
thisiswhatwehavespecified.
-
HowtoplacetheitemsofUnorderedandorderedListinline
Youvisitwebsitesregularly.Whatyouseeisalistofmenusrunninghorizontallyacross
thescreen.Thesecanbecreatedusingeitherorderedorunorderedlists.Thetrickbehind
thisisthatalltheitemsofthelistshouldbeplacedinasingleline.Thebootstrapclass
.list-inlineisusedinthiscase.Itisappliedtotheelementsofeithertheorderedor
unorderedlist.Onceyoudothis,yourmenuwillbeamazing.Writethecodebelowand
runit:
InlineListswithBootstrap
.ls-example{
margin:20px;
-
}
Home
AboutUs
Services
Location
ContactUs
Thefollowingshouldformtheoutputofthecodeafterrunningit:
Itisanamazingmenu.Ifyouhavenevercreatedone,Iknowyoufeelaftergettingthe
-
above.Justmodifyitincaseyouwanttouseforyoursite,butthemostimportantthisisto
understandhowtocreateit.
HorizontalDefinitionListswithBootstrap
Youmightneedtocreatealistoftermsaccompaniedbytheirdescription.Thisismuch
easywithbootstrap.Thebootstrapsclass.dl-horizontalisusedforthispurposeandit
doesautomaticadjustmentifthecontentdoesntfitwell.Writethefollowingcodeandrun
it:
HorizontalDefinitionListswithBootstrap
.ls-example{
margin:20px;
-
}
HorizontalDefinitionLists
Bootstrap
AcombinationofbothHTMLandCSStocreateresponsivewebpages
CSS
CSSisalanguageusedtodefinehowwebpageswillappear.Itisaverypowerful
toolwithwhichcanaddcolorsandotherstylestothewebpage.
PHP
ApowerfullanguagethatcanbeusedtoaddfunctionalitytoanHTMLlayout.
Onceyourunthecode,theoutputwilljustbethelitoftermswehavespecified
accompaniedbythedescriptiononwhattheyare:
-
Itisaveryamazingfeatureandyoumightrequiretouseitsomewhereinthecourseof
programming.
ListGroupsinBootstrap
Youcanusebootstrapslistgroupsifyouwanttogroupyourlistitemsandmakethem
beautifulbyaddingsomeextrafeaturestothem.Writethecodebelowandrunit:
ListGroupswithBootstrap
-
.list-group{
width:200px;
}
.ls-example{
margin:19px;
}
Home
AboutUs
Services
ContactUs
-
Theoutputofthecodewillbeasfollows:
Itissoamazingcomparedtowhatwehadinourpreviousexamples.Ifyousuchfeatures
onyourwebsite,itwillbeamazingtothepeoplewhovisitit.Thelistitemshavebeenput
incells.Hyperlinkscanalsobeaddedtotheabovelistitemsifyouneedtodoso.Thisis
asshownbelow:
LinkedListGroupswithBootstrap
-
.list-group{
width:200px;
}
.ls-example{
margin:20px;
}
GotoDocuments140
GotoPictures20
-
GotoVideos10
GotoMusic45
Onceyourunthecodeabove,youwillobservethefollowingoutput:
Theabovelistitemshavehyperlinkswiththem.Iconshavealsobeenaddedtothem.If
youaregularcomputeruser,theiconsusedaboveexactlymatchwhatwehaveonreal
-
computersandthisshowshowpowerfulbootstrapis.Youshouldtakeadvantageofthese
functionalitiestocreateamazingwebpages.
Paragraphsandheadingscanalsobeaddedtoalisttoenhancethelookhowofyourweb
pageasshownbelow:
BootstrapLinkedListGroups
.ls-example{
margin:20px;
}
-
WhatisCSS?
CSSisalanguageusedtodefinehowwebpageswill
appear.Itisaverypowerfultoolwithwhichcanaddcolorsandotherstylestotheweb
page.
WhatisJquery?
Jqueryisalanguageusedinwebdesign.Ithasso
manyframeworkswhichenabledeveloperstoachievetheirfunctionalities.Onecan
developafullyfunctionalwebsiteusingJquery
WhatisPHP?
Apowerfullanguagethatcanbeusedtoadd
functionalitytoanHTMLlayout.StandsforCascadingStyleSheet
-
Onceyourunthecodeabove,youwillobservethefollowingoutput:
Weadvancedwhatwehadinourpreviousexampletothis.Thewaytheaboveexample
looksisgoodforenhancingthelookofyourwebsite.
AddingContextualStatestoListGroups
Thiscanbedonesoastoaddextrafeaturesandemphasisonalistgroupjustlikeitis
doneonotherelements.Theresultisalwaysagoodlookinglistwithfeaturesthatcanbe
likedbymostpeople.Theserangefromcoloringtoothercomplexfeatures.Writethecode
belowandrunit:
-
ListGroupContextualClasseswithBootstrap
.ls-example{
margin:20px;
}
Aserverisusedtoservicerequests
fromaclientmachine.
Theworkoftheclientistoonly
requestforservicesfromtheservermachine.
Incasetheserverisnotavailable,
theclientisnotifiedofthis.
Clientscanalsomakemistakes
-
whilemakingrequests.Theserverwillnotprovideanyservicethen.
Onceyouruntheabovecode,thefollowingwillbetheobservedoutput:
Asyoucansee,theoutputlooksbeautiful.Thebackgroundtext,textcolorlookvery
beautifulandattractive.Thisistheworkofbootstrap.Ifyouwanttousethisfeatureon
thelinkedlistgroup,usethe.activeclassasshownbelow:
-
ListGroupContextualClasseswithBootstrap
.ls-example{
margin:20px;
}
Aserverisusedtoservicerequests
fromaclientmachine.
Theworkoftheclientistoonly
requestforservicesfromtheservermachine.
Incasetheserverisnotavailable,
theclientisnotifiedofthis.
Clientscanalsomakemistakes
whilemakingrequests.Theserverwillnotprovideanyservicethen.
-
Afterrunningtheabovecode,youwillrealizethattheonlydifferencewiththeprevious
exampleisthatthelatterhassomelinksunlikewhatwehaveinthepreviousexample.
-
Chapter7:
CreatingFormswithBootstrap
Formsareregularlyusedonwebpages.Theyusuallypromptuserstoprovidesome
informationortheymightbeoutputtingdatatotheusers.StylingformsusingCSSalone
isverytediousandthisiswhybootstrapcamein.Youcancreateamazingformcontrols
usingbootstrap.Bootstrapoffersthreekindsoflayoutforyourformswhichincludethe
following:
1.Verticalform.
2.Horizontalform.
3.Inlineform.
VerticalFormwithBootstrap
Thisistheformwhichiscreatedbydefaultinbootstrapifyoudontspecifythekindof
formthatyouwant.Thestylesarealsoaddedbydefaultincasenostylesareaddedtothe
baseclass.Considerthecodebelowforcreatingaform:
-
VerticalFormwithBootstrap
.ls-example{
margin:20px;
}
UserName
-
Password
Rememberme
Login
Onceyouruntheabovecode,thefollowingwillbetheoutput:
-
Thefieldsforenteringtextareroundedatthecorners,whichisadefaultstyleinbootstrap.
Theylookamazing.Thepurposeoftheplaceholderistoguidetheuser,andespeciallythe
noviceoneswhileenteringthetext.Onceyoustarttypinginsidethetextfield,the
placeholdertextwilldisappear.Thewidthofallformcontrolsliketextareaandtextfields
areusuallysetat100%wideinbootstrap.Ifyoudontneedthemtobelikethis,youneed
tochangetoyourfavoritesize.
HorizontalFormswithBootstrap
Inthesekindsofforms,labelsareright-aligned.Forthesakeofmakingthemappearinthe
samelineasotherformcontrols,theyarefloatedtotheleft.However,withthisform,you
willneedtomakealotofchangestoitsothatitcanappeardifferentfromwhatwehave
inthedefaultform.Thefollowingstepsarenecessaryforyoutocreateanhorizontalform:
1.Intheelement,includethe.form-horizontalelement.
2.Wraptheformcontrolsincludinglabelsinaelement.Addthe.form-
grouptothis.
-
3.Alignformcontrolsandlabelsusingthebootstrapgridclasses.
4.Totheelement,addtheclass.control-label.
Writethecodebelowandrunit:
HorizontalFormLayoutwithBootstrap
.ls-example{
margin:20px;
}
/*usebootstraptosolvetheproblemofaligninglabelsondeviceswithsmalldisplay
sizesuchascellphones*/
.form-horizontal.control-label{
-
padding-top:8px;
}
userName
Password
-
Rememberme
Login
Onceyourunthecodeabove,thefollowingoutputwillbeobserved:
-
InlineFormswithBootstrap
Thisisusedwhenoneneedstoplacetheformcontrolsside-by-side.Theresultinglayout
willbecompactedandhencemuchspacewillbesaved.Weuse.form-inlinewhichisa
bootstrapclassinsidetheelement.Writethecodebelowandrunit:
InlineFormLayoutwithBootstrap
.ls-example{
margin:20px;
}
-
userName
password
Rememberme
Login
-
Thefollowingcodeshouldformtheoutputafterrunningit:
Asyoucansee,thecontrolsoftheformhavebeenplacedside-by-side.Muchspacehas
beensavedwiththislayout.Notethatifthedeviceyouusetoruntheabovecodehasa
displaywithlessthan768px,theformwillbedisplayedinthedefaultverticalstyle.To
seethepowerofbootstrapintermsofresponsiveness,justminimizethesizeofthe
browserandobservewhatwillhappen.Itwilldisplayitvertically.Thisisexactlywhat
willhappenifthedevicehasasmalldisplaysuchasacellphone.
-
Chapter8:
StylingImageswithBootstrap
Inwebdesign,itisacommonpracticetouseimages.Theyneedtobedisplayedusingthe
necessarystylesandevenattherightlocation.Thiscanbeachievedwithbootstrap.
Considerthecodebelow:
ImageStylingwithBootstrap
imag{
margin:10px;
-
}.ls-example{
margin:20px;
}
Specifyingcorrectlythepathoftheimagestobeused.Nowrunthecode.Theoutputwill
beyourimagesbeingmodified.Thefirstonewillbemaderound,thesecondonewillbe
madecircularwhilethelastimagewillbemadeathumbnail.Itwillremainsquare.This
showshowbootstrapcanbeusedtomodifythestyleofanimage.
ThumbnailsinBootstrap
-
Sometimes,youmightneedtocreategridsofvideos,picturesorevenportfolios.
Thumbnailsareagoodapplicationforthis.Considerthefollowingexampleonhowto
createthumbnails:
ThumbnailswithBootstrap
.ls-example{
margin:20px;
}
-
Again,makesurethatyouspecifythecorrectlocationofyourimages,otherwiseyouwill
getanundesiredoutput.Runthecode:
Heoutputwillbeimagesdisplayedhorizontally.Eachoftheimageswillhaveatext
Written125*125.Eachimagewillbeplacedonasquarewithslightly-roundedcorners.
-
MediaObjectsinBootstrap
Youmightneedtodisplayanimagetotherightorleftofatextsuchasacomment.This
imagemightrepresenttheownerofthetextorcomment.Considerthecodebelow:
MediaObjectswithBootstrap
.ls-example{
margin:20px;
}
-
PeterJohnPostedonMarch6,2015
Itistruethatwithbootstraponecanachievesomuch.Anamazingwebpagecanbe
created.Thischapterdealswithmediaobjects
PeterJohnPostedonMarch6,2015
Itistruethatwithbootstraponecanachievesomuch.Anamazingwebpagecan
-
becreated.Thischapterdealswithmediaobjects.
Onrunningthecodeabove,theobservedoutputwillbe:
Whatwehavedoneisthatwehavedemonstratedbyusingasingleimage.Inthefirst
case,theimagehasbeenplacedatthebeginningofthetextandinthesecondcase,it
hasbeenplacedattheendofthetext.
-
Chapter9:
ButtonsinBootstrap
Buttonsarehighlyusedwhenitcomestowebdesign,especiallyincreating
forms.Inbootstrap,thereexistmanytypesofbuttons,soyouusetherightbuttonto
indicatetheintendedstatus.Thefollowingaretheavailablebuttonsinbootstrap:
1.Default-representedbyuseofagraycolor.Belongstotheclassbtnbtn-
default.
2.Success-representedbyuseofagreencolor.Belongstotheclassbtnbtn-
success.Useittoindicatethatanactionwassuccessful.
3.Primary-usethisbuttontoputemphasisonaprimarybuttonifyouhaveused
manybuttons.Belongstotheclassbtnbtn-primary.
4.Danger-usesredcolortoindicatethedangerassociatedwithanaction.Belongs
totheclassbtnbtn-danger.
-
5.Warning-cautionstheuserbeforecarryingoutacertainaction.Hasayellow
coloranditbelongstotheclassbtnbtn-warning.
6.Info-Useitasanalternativetothedefaultbutton.Belongstotheclass
btnbtn-info.
7.Link-makesthebuttonlooklikealinkheadingtosomewhere.
Writeandrunthecodebelow:
ButtonsinBootstrap
-
.ls-example{
margin:20px;
}
Default
Info
Primary
Danger
Success
Link
Warning
-
Default
Primary
Info
Success
Warning
Danger
Link
Afterrunningtheabovecode,thefollowingwillformtheoutput:
-
Chapter10:
ModalsinBootstrap
Modalsarekindofwindowswhichpopuponthescreenandprovideinformationtothe
userbeforemovingon.Theyarekindofadialogbox,andwithbootstrap,onecaneasily
createthem.Theycontainheader,bodyandafooter.Writethecodebelowandrunitto
illustratetheuseofmodals:
BootstrapModals
$(document).ready(function(){
-
$(#modal).modal(show);
});
Verification
Doyouwanttosaveanychangesmadetothisdocument?
Ifyoufailtodosotheywillbelost.
Close
Save
-
Onrunningtheabovecode,apopupwillbeshown.Thebackgroundwillbefadesothat
emphasiscanbeputonthemodalasshownbelow:
-
Chapter11:
AccordioninBootstrap
Youmayfindthatyouhavetoomuchtexttoberepresentedonyourwebpage.Youthen
needtopresenttextandhidetheextraonewhichcanbeaccessedbyclickingonsome
text.Thiscanbeachievedbyuseofaccordions.Writethecodebelowandrunit:
BootstrapAccordion
.ls-example{
margin:20px;
-
}
1.Whatis
Bootstrap?
BootstrapisjustacombinationofbothHTMLandCSSforwebdevelopment.
Pagesdevelopedwithbootstraprespondwellonscreensofdifferentsizes.Readmore.
-
2.WhatisPHP?
PHPisalanguagewhichisusedtoaddfunctionalitywebpages.Buttonsandother
componentsneedtodosomethingonclick,andthisisthepurposeofPHP.Readmore.
3.Whatis
CSS?
-
Itisoneoftheconstituentcomponentsofbootstrap.Forinstance,mostofbootstrap
functionalitieshavebeenachievedwithCSS.Mainlyusedforaddingstylestowebpages.
StandsforCascadingStyleSheetReadmore.
Onceyouruntheabovecode,thefollowingwillbetheoutput:
Onclickingonanytitle,theotherswillcollapseinandthedescriptionoftheclickedone
willcollapseout.Youhavethenhiddentheextratextwhichcouldnotfitonthescreen.
Theamountoftextusedheredoesntmatter,asitbeofanysize.Thisshowshowan
-
accordionisimportant.
-
Chapter12:
BootstrapCarousel
Sometimesaftervisitingwebsites,youjustseesomeslidingimagesortextontheweb
pages.Inbootstrap,theseslidingimagesandtextcanbecreatedusingthecarousel.The
imagesandtextcanalsobecombinedtoslidetogether.Thisalsohelpsinpreservingthe
availablespaceonawebpageandaswellasmakingthewebpageslookbeautiful.Write
andrunthecodebelow:
ExampleofBootstrap3Carousel
-
h2{
margin:0;
color:#666;
padding-top:90px;
font-size:52px;
font-family:trebuchetms,sans-serif;
}
.item{
background:#333;
text-align:center;
height:300px!important;
}
.carousel{
margin-top:20px;
}
.bs-example{
margin:20px;
}
-
ourfirstslideimage.
-
Seondslideimage
Thisisthethirdslideimage.
-
Onrunningtheabovecode,theoutputwillbeasequenceofslidingimages.Youwillalso
beprovidingwithtwomeansofslidingthenextimagesmanually.Thesewillbetwo
arrowsandthreebuttons:
-
Conclusion
Itcanthenbeconcludedthatbootstrapisatoolusedinwebdevelopment.Itisa
combinationofbothHTMLandCSS.TheHTMLhasbeenusedforthepurposeof
providethecontrolssuchasbuttons,textfieldsandothercontrolswhicharenecessaryfor
webdevelopment.TheCSShasbeenusedtoenhancethelookofthesecontrols.This
involvestheuseofstyleswhichmakedeveloperscreateveryamazingwebsites.
Responsivenessisoneofthecurrenttrendsandemergingtrendsinwebdevelopment.This
referstohowwebpagesbehaveondifferentdeviceswithdifferentdisplaysizes.A
responsivedesigninvolvescreatingwebpageswhichscrollwellonalldevicesregardless
oftheirdisplaysize.Bootstrapisagoodtoolinthis.
Onecancreatearesponsivewebsiteusingbootstrapwithalotofeaseandalsoquickly.
Thisexplainswhyyoushouldconsiderlearningbootstrap.Complexandbeautifulbuttons
canbecreatedwithbootstrap.UnlikewithpureHTML,tablescreatedusingbootstrapwill
scrollwellevenoncellphones.Phonescanalsobecreatedwithamazingcontrolswhich
alsorespondautomaticallyondifferentdevices.
Threedifferenttypesoflayoutsforformsarealsoavailableonforms,soyoucanchoose
thelayoutofyourchoice.Listsarealsosupportedinbootstrap.Onecanusethesetocreate
amazingmenusfortheirwebpages,andthenaddlinkstotheselistitems.
-
Accordionsareacomponentofbootstrap.Ifyouwanttorepresenttoomuchtextsuchthat
youfinditcrowdingthescreen,useaccordiontohidethistext.Toputemphasisona
particularthing,amodalcanbeused.Thiswillpopuponthescreenandtheuserwill
diverthisorherattentiontothemodal.Thisshouldhappenmostlywhencarryingout
dangerousactions.
Youcanalsousebootstraptoslideyourimagesandtextifyouneedtodoso.Thisisfor
thepurposeofsavingonspaceorenhancingthebeautyofyourwebsite.
Book DescriptionIntroductionChapter 1: DefinitionChapter 2: Getting started with BootstrapChapter 3: Grid System in BootstrapChapter 4: Fixed Layout with BootstrapChapter 5: Tables in BootstrapChapter 6: Lists in BootstrapChapter 7: Creating Forms with BootstrapChapter 8: Styling Images with BootstrapChapter 9: Buttons in BootstrapChapter 10: Modals in BootstrapChapter 11: Accordion in BootstrapChapter 12: Bootstrap CarouselConclusion