Answered step by step
Verified Expert Solution
Link Copied!

Question

1 Approved Answer

create a web page following the instructions given. Overview: Use the Bootstrap CSS framework. Use the Bootstrap CSS framework (included with the start files, but

create a web page following the instructions given. image text in transcribed
image text in transcribed
Overview: Use the Bootstrap CSS framework. Use the Bootstrap CSS framework (included with the start files, but you may want to instead download the most recent version) as well as modify chapter07-project03.css and chapter07-project03.html so it looks similar to that shown in Figure 7.57 0. col-md-2 col-md-10 Main row col-md-8 col-md-4 Nested row Share Terra c e Navbar Temple of Hephaistos Panel t Button group Panel Main row Label Thumbnail Button groups footer row Glyphicons Media objects col-md-6 col-md-3 col-md-3 footer row Nested row col-md-8 col-md-6 Figure 7.57 Completed Project 3 footer row Glyphicons Media objects col-md-6 col-md-3 col-md-3 footer row Nested row col-md-8 col-md-6 Figure 7.57 Completed Project 3 Instructions 1. Examine chapter07-project03.html in the browser. You will need to add a fair bit of HTML in accordance with the Bootstrap documentation. Since you can use the various Bootstrap classes, you will need to write very little CSS (the solution shown in Figure 7.57 Ohas just over a dozen rules defined). 2. The first step will be defining the basic structure. Figure 7.57 Oshows that most of the content is contained within a main row (.e., below the navbar and above the footer) that is composed of two columns (one 2 wide, the other 10 wide). The Bootstrap grid classes (e.g., col-md-10) are shown at the top of the figure. One of the columns has a nested row within it that contains the main photo image and the data on the photo 3. The footer contains three columns. One of these contains another nested row. 4. Figure 7.57 Oidentifies the other Bootstrap components that are used in this project. You will need to use the online Bootstrap documentation for more information on how to use these components. Testing 1. Be sure to test by increasing/decreasing the size of the browser window. If you shrink the browser window sufficiently it should use the built-in Bootstrap media queries to adapt nicely to the smaller window size. This will require you to construct the navbars with the appropriate collapse classes

Step by Step Solution

There are 3 Steps involved in it

Step: 1

blur-text-image

Get Instant Access to Expert-Tailored Solutions

See step-by-step solutions with expert insights and AI powered tools for academic success

Step: 2

blur-text-image

Step: 3

blur-text-image

Ace Your Homework with AI

Get the answers you need in no time with our AI-driven, step-by-step assistance

Get Started

Recommended Textbook for

The World Wide Web And Databases International Workshop Webdb 98 Valencia Spain March 27 28 1998 Selected Papers Lncs 1590

Authors: Paolo Atzeni ,Alberto Mendelzon ,Giansalvatore Mecca

1st Edition

3540658904, 978-3540658900

More Books

Students also viewed these Databases questions