Chapter XI of front-end development -bootstrap

11.5.0 bootstrap

11.5.1 bootstrap introduction and responsive

http://book.luffycity.com/python-book/95-bootstrap/951-bootstrapde-jie-shao.html

The CSS3 @media queries

Definition and use

Use @media query, you can define different screen sizes for different styles. @media can be set for different screen sizes different styles, especially if you need to set up a responsive design pages, @ media is very useful. When you reset the browser size of the process, the page will be re-render the page according to the width and height of the browser, which is a great convenience for debugging.

CSS syntax:

@media mediaType and|not|only (media feature) {
     /*CSS-Code;*/
}

Media Type (mediaType) type there are many here do not list them here, only lists a few commonly used.

all equipment for all printers for print and print preview screen for computer screens, tablets and smartphones. (The most common) speech applied to screen readers and other sound equipment media features (media feature) there are many media features, listed below are a few common

Value Description

max-width: definition of the output device the maximum visible area of ​​the page width min-width: the output device defined page width minimum visible region

Preparation 1: Set Meta Tags

First we need to set up the following code at the time of use @media to show the effect of compatible mobile devices:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Several parameters explain this code:

width = device-width: a width equal to the width of the current initial-scale apparatus: an initial scale (default setting is 1.0, which represents no scaling)

user-scalable: whether the user can manually zoom (default is no, because we do not want users to zoom page) There are many other parameters too, want to learn about children's shoes can go directly to Baidu

Preparation 2: Load compatible files JS

Because neither supports IE8 does not support HTML5 CSS3 @media, so we need to load two JS files, to ensure that our code compatibility effects:

<!--[if lt IE 9]>
　　<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
　　<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

Preparation 3: Set the default IE rendering the highest (optional) There are a lot of people's IE browser upgrade to IE9 above, so this time there has a lot of strange things happen, for example, now is the IE9 browser , but the document mode of the browser is IE8 to prevent this, we need the following code to make IE document rendering mode is always the latest

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

The code behind the addition of a chrome = 1, if a chrome user's computer installation, you can let the computer inside no matter which version of IE can use Webkit engine and V8 engine layout and operation, if not installed, IE displays the latest rendering mode.

Code examples

1, if the document width less 300px pattern in braces is applied - to edit the body of the background color (background-color):

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

As can be seen from the above code, the media type screen (Screen), and connected to the back using a functional medium, is written here max-width: 300px, that is, when the maximum width of the screen is less when 300px, on the application of braces inside of style.

2, when the width of the document style or greater displayed 300px

@media screen and (min-width: 300px){
    body {
        background-color:lightblue;
    }
}

Note that this media capabilities using min-width instead of max-width, I've marked red highlighted out.

3, when the document is greater than a width equal to or less 300px and 500px (width> = 300 && width <= 500) when the display style

@media screen and (min-width:300px) and (max-width:500px) {
    /* CSS 代码 */
}

Note the use of the two and, for connecting two media features for limiting a minimum, for limiting a maximum.

※ caveats (designated focus)

1, by more flexible application of skills, to develop a responsive page, is not close at hand feeling.

2, do not be fooled min-width and max-width, it is easy to mistake for beginners min-width means that when it is smaller than the xxx application, but which fall into error, but in fact it means: When you set a min -width when the width of the document is less than the value set, this block will not be applied in the CSS style, so that it can achieve min-width greater than worth the time, the block will be applied in the CSS style equal to the set, max-width as well.

3, or to think so, look at the code, meaning of this code is equal to 300px by a width greater than, less than or equal 500px (width> = 300 && width <= 500) when the application pattern

@media screen and (min-width:300px) and (max-width:500px) {
    /* CSS 代码 */
}

min-width: the role 300px that when the document width not less than 300px on the application of {} in the CSS code blocks, i.e., greater than or equal 300px, max-width: the role 500px the time when the document width no greater than 500px on the application of { } in the CSS code blocks, i.e., less than or equal 500px

Download and basic use of 11.5.2 bootstrap

A. The first step in using Bootstrap, Bootstrap downloaded first generation environment down. Then download, and then built himself into the current directory https://www.bootcss.com/

Second, the point to start the basic template

You will see the whole copy and paste the code built in file index.html

官网明确表示：
使用此给出的这份超级简单的HTML模板，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
  </body>
</html>

Here wanted to write Book, but found more Niubi official website of language organization! Then follow me to enter the Bootstrap css styles, components, plug-ins.

11.5.2 bootstrap global css styles

https://v3.bootcss.com/css/

Layout container

Bootstrap need to wrap a grid system for the page content and .containercontainer. We offer two useful for this class. Note that, since paddingother reasons property, two containers can be nested with each other.

.container Class width for fixing and supporting the container in response to the layout.

<div class="container">
  ...
</div>

.container-fluid % Of the width 100 for the class, occupy the entire viewport (the viewport) of the container.

<div class="container-fluid">
  ...
</div>

Column offset

Use .col-md-offset-*class may be shifted to the right column. These classes are actually used by *the selector increases the left margin (margin) of the current element. For example, .col-md-offset-4class .col-md-4elements 4 shifted width of the column (column) to the right.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Example:

1.容器
.container 固定宽度容器
.container-fluid 100%宽度的容器
2.栅格系统
.row
.col-lg- .col-md- .col-sm- .col-xs
3.文本颜色
text-muted
text-primary
text-success
text-danger
text-waring
text-info
4.背景颜色
bg-primary
bg-success
...
5.按钮
btn btn-default
btn btn-link
btn btn-success
btn btn-primary
...
6.对齐
.text-left
.text-right
.text-center
.text-justify 两端对齐 适应于英文
7.图片设置
.img-rounded
.img-circle
.img-thumbnail 
8.三角符号
.caret
9.关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
10.显示和隐藏内容
show/hidden
11.快速浮动
.pull-left 左浮动
.pull-right 右浮动
   清除浮动
.clearfix
12.内容块居中
.center-block
13.表格
给table添加.table的类。默认给表格赋予少量的内补和边框
.table-striped 条纹状的
.table-bordered 带边框
.table-hover 状态类
14.表单form
每组表单控件都会添加一个.form-group类中，表单控件通常都由.form-control

11.5.3 bootstrap grid system

Principle: Use the @media queries

https://v3.bootcss.com/css/#overview-container

Bootstrap provides a responsive, mobile device priority streaming grid system, with the increase of the screen or viewport (the viewport) size, the system will automatically be divided into a maximum of 12 **

Grid system is used to create page layouts by combining a series of rows (row) and column (column), you can put the contents of these create a good layout. Here we introduce Bootstrap grid system works:

<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> -->
    <link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
        <div class="col-sm-6 col-md-4 col-lg-3 ">
          <div class="thumbnail" style="height: 366px"></div>
        </div>
         <div class="col-sm-6 col-md-4 col-lg-3 ">
            <div class="thumbnail" style="height: 366px"></div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3 ">
          <div class="thumbnail" style="height: 366px"></div>
        </div>      
        <div class="col-sm-6 col-md-4 col-lg-3 ">
          <div class="thumbnail" style="height: 366px"></div>
        </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script> -->
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> -->
  </body>
</html>

11.5.4 bookbootstraptrap components

aa