zoukankan      html  css  js  c++  java

  • 第十一章 前端开发-bootstrap

    11.5.0 bootstrap

    11.5.1 bootstrap的介绍和响应式

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

    CSS3 的 @media 查询

    定义和使用

    使用 @media 查询，你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，这对调试来说是一个极大的便利。

    CSS 语法：

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

    媒体类型（mediaType ） 类型有很多，在这里不一一列出来了，只列出了常用的几个。

    all 用于所有设备 print 用于打印机和打印预览 screen 用于电脑屏幕，平板电脑，智能手机等。（最常用） speech 应用于屏幕阅读器等发声设备 媒体功能（media feature） 媒体功能也有很多，以下列出常用的几个

    值 描述

    max-定义输出设备中的页面最大可见区域宽度 min-定义输出设备中的页面最小可见区域宽度

    准备工作1：设置Meta标签

    首先我们在使用 @media 的时候需要先设置下面这段代码，来兼容移动设备的展示效果：

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

    这段代码的几个参数解释：

    width = device-width：宽度等于当前设备的宽度 initial-scale：初始的缩放比例（默认设置为1.0，即代表不缩放）

    user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面） 其他还有很多参数呢，想要了解的童鞋可以直接去百度

    准备工作2：加载兼容文件JS

    因为IE8既不支持HTML5也不支持CSS3 @media ，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

    <!--[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]-->

    准备工作3：设置IE渲染方式默认为最高(可选) 现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8 为了防止这种情况，我们需要下面这段代码来让IE的文档渲染模式永远都是最新的

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

    这段代码后面加了一个chrome=1，如果用户的电脑里安装了 chrome，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，如果没有安装，就显示IE最新的渲染模式。

    代码实例

    1、如果文档宽度小于等于 300px 则应用花括号内的样式——修改body的背景颜色(background-color):

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

    从上面的代码可以看出，媒体类型是屏幕（screen），使用 一个 and 连接后面的媒体功能，这里写的是 max-300px ，也就是说，当屏幕的最大宽度 小于等于 300px 的时候，就应用花括号里面的样式。

    2、当文档宽度大于等于300px 的时候显示的样式

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

    注意，这里的媒体功能使用的是 min-width 而不是 max-width，我已经标红高亮显示出来了。

    3、当文档宽度大于等于 300px 并且小于等于500px （ width >=300 && width <=500）的时候显示的样式

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

    注意，这里使用了两个 and ，用来连接 两个媒体功能，一个用于限制最小，一个用于限制最大。

    ※ 需要注意的地方（划重点）

    1、通过灵活应用以上技巧，开发出一个响应式页面，还不是近在咫尺的感觉。

    2、不要被 min-width 和 max-width 所迷惑，初学者很容易误以为 min-width 的意思是小于xxx的时候才应用，然而这就陷入误区了，其实它的意思是：当设置了 min-width 的时候，文档的宽度如果小于设置的值，就不会应用这个区块里的CSS样式，所以 min-width 它才能实现大于等于设置的值得时候，才会应用区块里的CSS样式，max-width 也是如此。

    3、或者这样想想，先看代码，这句代码的意思是宽度大于等于 300px ，小于等于 500px （ width >=300 && width <=500）的时候应用样式

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

    min-300px 的作用是当文档宽度不小于 300px 的时候就应用 {} 里的CSS代码块，即大于等于 300px，max-500px 的作用是当文档宽度不大于 500px 的时候就应用{} 里的CSS代码块，即小于等于 500px

    11.5.2 bootstrap的下载和基本使用

    一. 使用Bootstrap第一步，先将生成环境的Bootstrap下载下来。然后将下载，然后引入到自己建好的当前目录中 https://www.bootcss.com/

    二、点到起步中的基本模板

    将看到的整段代码复制粘贴到建好的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/bootstrap@3.3.7/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/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

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

    本来是想在这里写Book，但发现官网上的语言组织的更牛逼！接下来就跟着我一起进入Bootstrap的css样式、组件、插件。

    11.5.2 bootstrap的全局css样式

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

    布局容器

    Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

    .container 类用于固定宽度并支持响应式布局的容器。

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

    .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

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

    实例： 官方网址：https://v3.bootcss.com/css/#type

    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的栅格系统

    原理:使用了@media 查询

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

    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列**

    栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：


    列偏移

    使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

    <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>

    <!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/bootstrap@3.3.7/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/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/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/jquery@1.12.4/dist/jquery.min.js"></script> -->
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> -->
  </body>
</html>

    11.5.4 bookbootstraptrap的组件

    1. 网址

      https://v3.bootcss.com/components/

    2. 分类 在bootstrap中 凡是看到data-xxx的属性， 表示与js有很大关联

    3. 注意：

      • 不要随意修改bootstrap固有的类名，如果想修改样式，自己添加对应的类名，小心选择器的优先级，实在不行： !important; 行内样式
      • 字体图标注意：不要和其它的组件混合使用，嵌套一个span标签，加上对应字体图标的类名

    11.5.5 JavaScript 插件

    1. 网址

      https://v3.bootcss.com/javascript/

    2. 分类
  • 相关阅读:
    POJ 1703 Find them, Catch them
    POJ 2236 Wireless Network
    POJ 2010 Moo University
    POJ 2184 Cow Exhibition
    POJ 3280 Cheapest Palindrome
    POJ 3009 Curling 2.0
    POJ 3669 Meteor Shower
    POJ 2718 Smallest Difference
    POJ 3187 Backward Digit Sums
    POJ 3050 Hopscotch
  • 原文地址：https://www.cnblogs.com/hanfe1/p/12080490.html
Copyright © 2011-2022 走看看