Article 1: bootstrap first and bootstrap first
Bootstrap is a very popular front-end framework. In short, it is a set of html, css, and javascript tools. We can use bootstrap to build a simple and fresh website or software interface, with bootstrap, background developers no longer need to worry about the front-end interface. Bootstrap was developed by twitter engineers in his spare time. After being open-source on github, the largest and most popular open-source site, the website became the most frequently updated project, A large number of engineers enthusiastically contributed code to the project, and a large number of websites built using bootstrap emerged in a short time. Why is the development speed of bootstrap so amazing? This is mainly because of the outstanding features of bootstrap:
Mobile device priority:Put mobile features first
Browser support: All mainstream browsers support Bootstrap.
Easy to use: As long as you have basic HTML and CSS knowledge, you can start learning Bootstrap.
Responsive Design: Bootstrap's responsive CSS can adapt to desktops, tablets, and mobile phones.
It contains powerful built-in components and is easy to customize
Next we will look at the simplest page built with bootstrap.
<! DOCTYPE html>
<Html lang = "zh-cn">
<Head>
<Meta charset = "UTF-8">
<Meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<Meta name = "viewport" content = "width = device-width, initial-scale = 1">
<Title> Bootstrap 101 Template </title>
<! -- Bootstrap -->
<Link href = "css/bootstrap.min.css" rel = "stylesheet">
<! -- HTML5 Shim and Respond. js IE8 support of HTML5 elements and media queries -->
<! -- WARNING: Respond. js doesn't work if you view the page via file: // -->
<! -- [If lt IE 9]>
<Script src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script>
<Script src = "http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"> </script>
<! [Endif] -->
</Head>
<Body>
<Div class = "container">
<Div class = "jumbotron">
<H1> my first Bootstrap page <P> Reset the window size to view the response results! </P>
</Div>
<Div class = "row">
<Div class = "col-sm-4">
<H3> Column 1 <P> learning is not only a technology, but also a dream! </P>
<P> you can't resist your dream! </P>
</Div>
<Div class = "col-sm-4">
<H3> Column 2 <P> learning is not only a technology, but also a dream! </P>
<P> you can't resist your dream! </P>
</Div>
<Div class = "col-sm-4">
<H3> Column 3 <P> learning is not only a technology, but also a dream! </P>
<P> you can't resist your dream! </P>
</Div>
</Div>
</Div>
</body>
</Html>
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
