In this Step by step Bootstrap Tutorial Lesson 12 - Responsive Lists with linked items
we experiment with several kinds of responsive Lists, Linked, Contextual, Custom , with Badges, and more, shown in different formats, in an from-scratch Application for Mobile & desktop computers . This App will display the Bootstrap Lists fitting all screen sizes .You can download the complete app from the following GitHub repository:
https://github.com/CarmelSoftware/Bootstrap_Lists
This is how the Lists are displayed:
And this is the way how they appear in an Nexus Galaxy devices, for example:
Bootstrap Tutorial Lesson 12 - Responsive Lists with linked items
You can build this app by using a Bootstrap template (free download) from www.initializr.com/ (as explained in this short post : Bootstrap Templates), or elsewhere writing the following jQuery and Bootstrap references in the HTML5 file :
<meta name="viewport" content="width=device-width, initial-scale=1">
And also the following references before closing the </body> :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
The Custom Content List will be displayed this way:
That will be shown this:
And will appear this way:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
If you wish to setup a Mobile device Emulator, read this short tutorial on installing the FREE Ripple Emulator.
1) Displaying Bootstrap Custom Content Lists:
The Bootstrap supports elegant Lists display . Following are several templates for exemplifying the use of Lists in Bootstrap. They include all kind of Lists, Contextual, Linked, Disabled, Badges, and more, shown in different formats. List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
We begin by creating Lists containing Custom Content . We do so by using the Bootstrap classes "list-group-item-heading" and "list-group-item-text" inside several "list-group-item" in a "list-group" , so you can display Custom Content Lists. You can add all type of HTML5 within, even for linked list groups:
The Custom Content List will be displayed this way:
All the Bootstrap Lists documentation can be found in the GetBootstrap Web Site.
2) Responsive Bootstrap Linked items with Contextual classes:
Next, we create another List containing links, but also with Contextual information. The items are Links enhanced with contextual significance, from "Active" to "Disabled", and with Badges counters:
That will be shown this:
3) Minimalistic List Example:
Finally, this is a very simple responsive List, build over an unordered HTML list :
And will appear this way:
This is the style for the App:
body {
padding-top: 60px;
padding-bottom: 20px;
}
.jumbotron h1 {
color: #a8a3a3;
}
h2 {
font: 900 18px Verdana;
color: #a8a3a3;
}
.well p, .panel p {
font: 700 12px Verdana !important;
color: #a8a3a3;
}
h4 + p {
font: 700 10px Verdana !important;
color: #a8a3a3;
}
.well-footer, .well-footer a {
font: 900 10px Comic Sans MS;
color: #a8a3a3;
}
.alert {
font: 600 9px Verdana;
}
.centered {
text-align: center;
}
a.active p {
color: #fff;
}
That's all. Our Lists will be displayed this way:
1- In Mobile devices :
The displays for Nexus devices screens is as follows:
2- On Medium and Big desktops:
by Carmel Schvartzman
כתב: כרמל שוורצמן
No comments:
Post a Comment