Home > Developer > Web Develop
Bootstrap usage summary and bootstrap Summary
// Most functions can be specified by specifying the data attribute, but jquery is required for events because events are different processing procedures.
// Events generally have two statuses: show shown and past
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Title> Bootstrap 101 Template </title>
<Meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<! -- Bootstrap -->
<Link href = "css/bootstrap.min.css" rel = "stylesheet" media = "screen">
<Link href = "css/bootstrap-responsive.min.css" rel = "stylesheet" media = "screen">
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</Script>
<Script>
$ (Document). ready (function (){
$ ("P"). click (function (){
$ (This). hide ();
});
// Compile jquery to show the effect, method, and event usage
// $ ("# MyModal"). modal ({show: true, backdrop: true });
$ ('# Mymodal'). on ('shown', function (){
Alert ("hahjah ");
})
});
</Script>
</Head>
<Body>
// View the effect through the data attribute
<! -- Button to trigger modal -->
<A href = "# myModal" role = "button" class = "btn" data-toggle = "modal"> View demo cases </a>
// Specify the data attribute data-backdrop is an optional parameter. You can see that there are many useful attributes in this document.
<Button type = "button" data-backdrop = "false" data-toggle = "modal" data-target = "# myModal"> Launch modal </button>
<! -- Modal -->
<Div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">
<Div class = "modal-header">
<Button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true"> × </button>
<H3 id = "myModalLabel"> Modal header </Div>
<Div class = "modal-body">
<P> One fine body... </P>
</Div>
<Div class = "modal-footer">
<Button class = "btn" data-dismiss = "modal" aria-hidden = "true"> close </button>
<Button class = "btn-primary"> Save changes </button>
</Div>
</Div>
<P> if you click me, I will disappear. </P>
<! --*************************************** *********************************** -->
<Script src = "http://code.jquery.com/jquery.js"> </script>
<Script src = "js/bootstrap. min. js"> </script>
</Body>
</Html>
I know this is powerful for bootstrap, but how can I use it?
This is a framework, not just a few words. Www.bootcss.com/this is the actual BS.
Forum.
By the way, it is still difficult. If you do not understand HTML5 or CSS3, you 'd better lay the foundation first. Otherwise, you can hardly understand it, not to mention the application.
How to Use the bootstrap framework
See the official example.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
