Current Topic: 4.2.3. CSS for Responsive pages and Bootstrap.css
You have a privilege to create a quiz (QnA) related to this subject and obtain creativity score...
CSS for Responsive pages and Bootstrap.css
Web pages can be projected to desktops and viewed on mobile devices.
They must be Responsive to the size of devices. How do we make Responsive web pages?
Of course, we use Cascade Style Sheets. We can create our own CSS files or use one of the existing CSS libraries. The most popular library for mobile-friendly web sites is Bootstrap.css.
You can download bootstrap library, place in your css and js folders, and provide proper references.
(See the links at the bottom of the section)
Or you can provide direct referces to existing locations like in the sample below.
The Bootstrap library has many useful elements. Let us start with the container element. Container can include many row elements. Each row element can be split into 12 (twelve) columns. A developer can distribute these 12 columns in several ways: 4+4+4 or 6+6 or 3+4+5, etc.
Here is the example of 5+7 columns.
Column 1
Column 2
Column 1
Column 2
The beauty of this code is that this page is adaptable. For some devices it will look like one row with two columns and for smaller ones as one column with more rows.
To emphasize some specific content Bootstrap has the jumbotron class. Here is the example below:
Attention!
Attention!
Another class that serves as a section divider.
Example Section Divider
Example Section Divider
Bootstrap library includes the table class.
Basic Table
Name
Email
Jeff
jeff@example.com
Basic Table
Name
Email
Jeff
jeff@example.com
The Bootstrap library includes the dropdown class that creates a toggleable menu to choose one value from a list:
Dropdown Example
class="btn btn-primary dropdown-toggle"
type="button" data-toggle="dropdown">
Dropdown Example
How does the Bootstrap helps with navigation? There is the navbar class which provides the navigational tabs resizable for mobile devices.
Assignments: 1. In the Eclipse project 4.2.HTML create the index.html in the html folder.
index.html or index.jsp are accotding to web naming conventions are the main files, which usually start presentations.
2. In the index.html file provide your own samples similar to discussed in this section.
3. To demonstrate the carousel feature download several images and place them in the images folder.
4. To demonstrate the navigation bar create at least two more web pages in the html folder.
5. Check the tutorial and download links on the Bootstrap:
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
6. Read the following sections of the tutorial and provide the examples of: BS Buttons, BS Glyphicons, BS Modal, and BS Tooltips
7. Email HTML files to dean@ituniversity.us
We invite you to create your own questions and answers (QnA) to increase your rank and win the Top Creativity Prize!
The Bootstrap library has many useful elements. Let us start with the container element. Container can include many row elements. Each row element can be split into 12 (twelve) columns. A developer can distribute these 12 columns in several ways: 4+4+4 or 6+6 or 3+4+5, etc.
Here is the example of 5+7 columns.
The beauty of this code is that this page is adaptable. For some devices it will look like one row with two columns and for smaller ones as one column with more rows.
To emphasize some specific content Bootstrap has the jumbotron class. Here is the example below:
Assignments: 1. In the Eclipse project 4.2.HTML create the index.html in the html folder.
index.html or index.jsp are accotding to web naming conventions are the main files, which usually start presentations.
2. In the index.html file provide your own samples similar to discussed in this section.
3. To demonstrate the carousel feature download several images and place them in the images folder.
4. To demonstrate the navigation bar create at least two more web pages in the html folder.
5. Check the tutorial and download links on the Bootstrap:
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
6. Read the following sections of the tutorial and provide the examples of: BS Buttons, BS Glyphicons, BS Modal, and BS Tooltips
7. Email HTML files to dean@ituniversity.us
We invite you to create your own questions and answers (QnA) to increase your rank and win the Top Creativity Prize!
