Web-css-bootstrap, bootstrapcss
1. rule
# Html
<!DOCTYPE html>
</body>
Css
H1 {font: color: red; // rgb (123,21, 2) #00 ccff font-family: Arial, Helvetica, sans-serif; font-size: 50px; position display: block; // ul, li, p, h1: inline; // a, img position: fixed; // top: 10px; left: 30px;: relative; // relative parent container top: left: float: left; // floating clear: both; // close floating === margin: 22px; border: 3px solid # cc0000; padding: 23px;-top right bottom left margin: auto // center margin-right: auto // left margin-left: auto; // background-color: # 0099cc background-image: url ('HTTP: // goo. gl/ODpi3y ');}
2bootstrap framework
2.1.grid grid system (12 = 6 + 6 = 4 + 4 + 4 = 4 + 8 = 2 + 8 + 2)
<Head>
<! -- Reference -->
<Link href = "http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel = "stylesheet">
</Head>
<Div class = "row"> <div class = "col-md-2">
2.2.tab label (like gmail)
<ul class="nav nav-tabs "> <li><a href="#">Primary</a></li> <li class="active"><a href="#">Social</a></li> <li><a href="#">Promotions</a></li> <li><a href="#">Updates</a></li></ul>2.3 Pills (display different parts of the website, similar to the Google search results page)
<ul class="nav nav-pills"> <li><a href="#">Primary</a></li> <li class="active"><a href="#">Social</a></li> <li><a href="#">Promotions</a></li> <li><a href="#">Updates</a></li></ul>
2.4.jumbotron (demonstrate big case showcase, similar to Google Mobile)
<div class="jumbotron"> 3. Sum summary maryAfter mastering the basic usage of css, you can quickly build the basic style framework of the website by using a framework like bootstrap to design more nice pages, bootstrap provides many components for customization.
How to deploy BootStrap in a java web projectBootStrap mainly acts on front-end beautification and has its own layout. You only need to extract the downloaded file package and add it to the project, you can reference the file in html or jsp. However, before introducing JavaScript, you must introduce jquery first because it depends on jquery, also, it is best not to disturb the order of his files, because it also calls its own files internally. If you mess up the file, as a result, it may not find its own file. Therefore, direct introduction is the best method. first introduce the CSS file <link href = "> and then introduce jquery <script src =" ">, finally, introduce the Javascript file <script src = "">, for example:
<! Doctype html>
<Html>
<Head>
<Link href = "bootstrap-datetimepicker-master/sample in bootstrap v2/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
<Link rel = "stylesheet" type = "text/css" media = "screen"
Href = "bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">
</Head>
<Body>
<Div class = "input-append date form_date" data-date-format = "yyyy-mm-dd">
<Input size = "16" type = "text" value = "" readonly>
<Span class = "add-on"> <I class = "icon-remove"> </I> </span>
<Span class = "add-on"> <I class = "icon-calendar"> </I> </span>
</Div>
<Div class = "input-append date" id = "datetimepicker" data-date-format = "yyyy-mm-dd">
<Input class = "span2" size = "16" type = "text">
<Span class = "add-on"> <I class = "icon-th"> </I> & l ...... the remaining full text >>>
Thirsty cut-what is the difference between the open-source Chinese css framework and bootstrap?Bootstrap does not support IE6 and has poor support for IE7 and IE8, but it is very good in terms of visual and interactive effects. I personally think it is only applicable to foreign users and has little application space in China.
The eager file is relatively small. Unlike bootstrap, it is easy to reference over KB of JS, and browser compatibility is much better. At this level, it is more in line with national conditions. However, a small file size will bring about weaker functions and effects, which is not suitable for large website projects.
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
