Use Bootstrap 3 to develop responsive website practices 03. Carousel the content layout below, bootstrap03

Use Bootstrap 3 to develop responsive website practices 03. Carousel the content layout below, bootstrap03

Important information and highlighted information are usually displayed below the carousel. The title, subtitle, and paragraph text in a large font are used in this area.

        <div class="row" id="bigCallout">
            <div class="col-md-12">
                <div class="well">
                    <div class="page-header">
<H1> Messi shengteng universe <small> is still king in 2014 </small> 
                    </div>
                    
                    <p class="lead">
Messi scored the first round of the season in. At that time, guadiola had just taken over Barcelona and suffered a slight loss from 0 to 1 away in the first round of Nou Camp, messi scored the only goal for Barcelona.
                    </p>
                    
<A href = "" class = "btn-large btn-primary"> learn more about La Liga </a>
<A href = "" class = "btn-large btn-link"> learn more about Messi </a>
                </div>
            </div>
</Div> <! -- End of the tagging area -->

○ A new row is created through <div class = "row"...>
○ Areas to be highlighted are enclosed in the Grid of <div class = "col-md-12">
○ <Div class = "well"> it is usually an area with rounded corners.
○ Page-header property value: this value is applied to the div, indicating that this part of the div is the title of the page, usually with Large fonts and spacing.
○ Small label: The text size is reduced to 85% of the original size.
○ Lead attribute value: It is applied to p to emphasize a paragraph. The paragraph text will slightly increase, become fine, and become high.
 
If the page size is reduced to the screen size of the mobile phone, we want to see a smaller <div class = "well"> In the <div class = "col-md-12">, what should we do?
-- In <div class = "col-md-12"> and <div class = "well"> Add a <div class = "well-known-small visible-xs">, the complete code is as follows:
        <div class="row" id="bigCallout">
            <div class="col-md-12">
                <div class="well well-small visible-xs">
<A href = "" class = "btn-large btn-block btn-default"> <span class = "glyphicon-phone"> </span> contact us. </ a>
                </div>
                <div class="well">
                    <div class="page-header">
<H1> Messi shengteng universe <small> is still king in 2014 </small> 
                    </div>        
                               
                    <p class="lead">
Messi scored the first round of the season in. At that time, guadiola had just taken over Barcelona and suffered a slight loss from 0 to 1 away in the first round of Nou Camp, messi scored the only goal for Barcelona.
                    </p>
                    
<A href = "" class = "btn-large btn-primary"> learn more about La Liga </a>
<A href = "" class = "btn-large btn-link"> learn more about Messi </a>
                </div>
            </div>
</Div> <! -- End of the tagging area -->


 
When the page width is less than 768px, the <div class = "col-md-12"> and <div class = "well"> contents are always displayed.
○ Visible-xs property value: displayed when the page width is smaller than 768px
○ Btn-block attribute value: the button width is 100%

If you click "learn more about La Liga", what should you do?
-- Add <div class = "alert-success alert-block fade in "id =" successAlert "> region, first display the prompt information area, and then click the jQuery control button. As follows:
        <div class="row" id="bigCallout">
            <div class="col-md-12">
                <div class="alert alert-success alert-block fade in" id="successAlert">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    
<H4> prompt information 
<P> This prompt is displayed only when you click "learn more about La Liga ~~ </P>
                </div>
                <div class="well well-small visible-xs">
<A href = "" class = "btn-large btn-block btn-default"> <span class = "glyphicon-phone"> </span> contact us. </ a>
                </div>
                <div class="well">
                    <div class="page-header">
<H1> Messi shengteng universe <small> is still king in 2014 </small> 
                    </div>        
                               
                    <p class="lead">
Messi scored the first round of the season in. At that time, guadiola had just taken over Barcelona and suffered a slight loss from 0 to 1 away in the first round of Nou Camp, messi scored the only goal for Barcelona.
                    </p>
                    
<A href = "" class = "btn-large btn-primary"> learn more about La Liga </a>
<A href = "" class = "btn-large btn-link"> learn more about Messi </a>
                </div>
            </div>
</Div> <! -- End of the tagging area -->

 
In the CSS folder, site.css customizes and overwrites some Bootstrap classes.
/*----------------------------------------
Typographical
    ------------------------------------*/
.well .page-header {
    margin-top: 0;
}
.well .page-header h1 {
    margin-top: 0;
}
/*----------------------------------------
Global
    ------------------------------------*/
.alert {
    margin-top: 20px;
}
.well {
    margin-top: 20px;
}


 
Finally, a prompt message is displayed when you click the jQuery control button.
When a page is loaded, you want to hide the information area. Set Through css.
.alert {
    margin-top: 20px;
    display: none;
}
JQuery control button.
    <script type="text/javascript">
        $(function() {
            $('#alertMe').click(function(e) {
                e.preventDefault();
                $('#successAlert').slideDown();
            });
        });
    </script>
 
References:
Code a Responsive Website with Bootstrap 3 -- by Brad Hussey
Http://getbootstrap.com/
Http://bootswatch.com/
Http://www.tutorialspoint.com/
Http://www.placehold.it
 
The "Develop responsive website practices using Bootstrap 3" series includes:
Use Bootstrap 3 to develop responsive website practices 01, use Bootstrap 3 to develop responsive website practices 02 in preparation and navigation areas, and use Bootstrap 3 to develop responsive website practices 03, the content layout below the carousel uses Bootstrap 3 to develop responsive website practices 04, use Panels to display content use Bootstrap 3 to develop responsive website practices 05, and use Tab, Modal, and Form to display content, use Popover and Tooltip to display prompt information use Bootstrap 3 to develop responsive website practice 06, use ListGroup and Thumbnails to show content use Bootstrap 3 to develop responsive website practices 07, footer
 
 
 


How can we learn about bootstrap? Generally, what steps can I see that its website is a bit messy and there are many related open-source frameworks?
We recommend that you first learn the layout. This is the most useful. Start with the most basic bootstrap framework. Some of the other frameworks on the home page are scalable. With a complete understanding of some of the basic layout and style of bootstrap, it is not difficult to learn others. In fact, it is quite easy to learn about bootstrap. The layout is dominated by the percentage layout and the fence layout. Other similar buttons. btn error messages. alert-block all use the combined class .. Btn. btn-success is the green button .. Btn + suffix (actually a color system ). One of the most powerful features of bootstrap is the combined class. From typographical layout to css final to bootstrap. js (I personally think it is not likely to be used, and the compatibility and practicality are not the best. Js is useful for beginners. There are also a few commonly used ones. After all, the evil ie is still rooted in China.) After reading this step, I will try some small demos myself and get started quickly. I wish you a smooth learning experience.

What can html achieve? Can I use an ip address to log on and change the TXT file content on my computer?
You can do whatever the backend supports or even manage the entire server. This type of support is generally available only on the LAN, which is hard to see on the Internet. Just like home routing, There is only HTTP management.

HTML is short for hypertext markup language. It is a standard that can be understood as a standard. For customers, HTML is the standard, although the implementation methods for the server may be different. JSP is a Java service method dedicated to HTML extension. Compared with other Java methods, JSP can quickly implement HTML. Dreamweaver is a design software for HTML. It has the "What you see is what you get" effect, but it does not belong to the total score of the server or client, but it is more convenient to use it for design.