Big-man的Bootstrap篇(一)

小鱼儿 2022-06-15 04:19 136阅读 0赞

# Big-man的Bootstrap篇(一) #

## 前言: ##

*  **与Bootstrap的邂逅:**  
    
    
     *  Big-man信奉的是他自己去寻找他自己想要的样式, 简单的说法就是他自己手写他自己想要的样式(`CSS`/`Less`/`Scss`).
     *  所以也就并没有特别传奇的经历, 就是Big-man班上的唯一的一位女程序员(Java工程师)在书写`JSP`引入`Bootstrap`的时候遇到些许问题。Big-man也就简单的进行一下总结和对这些问题的看法。

--------------------

## Bootstrap故事: ##

*  \-

--------------------

## Bootstrap的环境安装: ##

*  **Bootstrap的环境安装?**  
    
    
     *  Bootstrap安装是非常容易的。作为前端的**应用框架**, 安装确实是比较方便以及友好的。

--------------------

### 什么是应用框架: ###

*  Web应用框架（`Web application framework`）是一种**开发框架**，用来**支持动态网站**、**网络应用程序**及**网络服务的开发**。其类型有**基于请求**的和**基于组件**的两种框架。
 *  这里Big-man给出一个应用框架的定义介绍，更加详细的内容参考[应用框架百度百科][Link 1]。

--------------------

### 快速安装: ###

*  **快速安装:**  
    
    
     *  立即下载[编译后的版本][Link 2]，里面已经包含了`CSS`、`JS`和**图片文件**了，而且所有文件已经经过了**压缩处理**。
     *  不过，**文档**和**源码文件不**包含。
     *  **下载源码:**
     *  [GithubBootstrap][] 从GitHub直接下载到的最新版的源码包括`CSS`、`JavaScript`的源文件，以及一份**文档**。

--------------------

### 下载完之后的目录结构: ###

*  Big-man下载好了源文件之后只能说明Big-man\*\*拥有了这个源文件**, 但是**还不可以进行引用里面的特有属性**。在引用之前Big-man需要介绍一下Big-man下载的**目录结构\*\*(作为外加文件的简单介绍)。
 *  源文件目录文件:  
    
    
     *  `css`  
        
        
         *  `bootstrap.css` : `bootstrap`的`CSS`源码;
         *  `bootstrap.min.css`： `bootstrap`的`CSS`源码的**压缩文件**;
     *  `js`注意一点是**bootstrap**的所有`js`都是依赖于[`Jquery`][Jquery]。  
        
        
         *  `bootstrap.js` : `bootstrap`的**`js`源码**;
         *  `bootstrap.min.js` : `bootstrap`的**`js源码`压缩文件**;
     *  `img` 图片是进行压缩的;  
        
        
         *  `glyphicons-halflings.png`;
         *  `glyphicons-halflings-white.png`;

--------------------

## 引入源文件: ##

*  **引入源文件**——Big-man的代码如下:

<!DOCTYPE html>
        <html>
          <head>
            <title>Bootstrap JackDan9</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            
            <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
          </head>
          <body>
            <h1>Hello, world!</h1>
            <script src="http://code.jquery.com/jquery.js"></script>
            <script src="js/bootstrap.min.js"></script>
          </body>
        </html>

*  `media="screen"`:
    
     *  `<a media="value"></a>`标签:  
        
        
         *  `media`属性规定目标URL是为**什么类型**的媒介/设备进行优化。
         *  该属性用于规定目标`URL`是为特殊设备(比如 iPhone)、语音或打印媒介设计的。
         *  该属性可接受多个值。
         *  只能在`href`属性存在时使用。
     *  `value`中可能的值:  
        
        
         *  **运算符**:  
            
            
             *  `and` : 规定`AND`运算符。
             *  `not` : 规定`NOT`运算符。
             *  `,` : 规定OR运算符。
         *  **设备**:  
            
            
             *  `all` : 默认。适合所有设备。
             *  `aural` : 语音合成器。
             *  `braille` : 盲文反馈装置。
             *  `handheld` : 手持设备(小屏幕、有限的贷款)。
             *  `projection` : 投影机。
             *  `print` : 打印预览模式/打印页面。
             *  `screen` : 计算机屏幕。
             *  `tty` : 电传打字机以及使用等宽字符网的类似媒介。
             *  `tv` : 电视类型设备(低分辨率、有限的分页能力)。
         *  **值**:  
            
            
             *  `width` : 规定**目标显示区的宽度**。并且可以使用`min-`或者`max-`前缀。比如 : `media="screen and (min-width : 500px)"`。
             *  `height` : 规定**目标显示区域的高度**。可使用 “min-” 和 “max-” 前缀。例子：`media="screen and (max-height:700px)"`。
             *  `device-width` : 规定**目标显示器/纸张的宽度**。可使用 `"min-"` 和 `"max-"` 前缀。例子：`media="screen and (device-width:500px)"`。
             *  `device-height` : 规定**目标显示器/纸张的高度**。可使用`"min-"`和`"max-"`前缀。例子 : `media="screen and (device-height:500px)"`。
             *  `orientation` : 规定**目标显示器/纸张的取向**。可能的值: `"protrait"`或者`"landscape"`。例子 : `media="all and (orientation: landscape)"`。
             *  `aspect-ratio` : 规定目标显示**区域的宽度/高度比**。可使用 `"min-"` 和 `"max-"` 前缀。例子：`media="screen and (aspect-ratio:16/9)"`。
             *  `device-aspect-ratio` : 规定**目标显示器/纸张的 `device-width/device-height` 比率**。可使用 “min-” 和 “max-” 前缀。例子：`media="screen and (aspect-ratio:16/9)"`。
             *  `color` : 规定**目标显示器的 `bits per color`**。可使用 `"min-"` 和 `"max-"` 前缀。例子：`media="screen and (color:3)"`。
             *  `color-index` : 规定**目标显示器能够处理的颜色数**。可使用 `"min-"` 和 `"max-"` 前缀。例子：`media="screen and (min-color-index:256)"`。
             *  `monochrome` : 规定**在单色帧缓冲中的每像素比特**。可使用 “min-” 和 “max-” 前缀。例子：`media="screen and (monochrome:2)"`。
             *  `resolution` : 规定**目标显示器/纸张的像素密度 (`dpi or dpcm)`**。可使用 `"min-"` 和 `"max-"` 前缀。例子：media=”print and (resolution:300dpi)”。
             *  `scan` : 规定 **`tv` 显示器的扫描方法**。可能的值是：`"progressive"` 和 `"interlace"`。例子：`media="tv and (scan:interlace)"`。
             *  `grid` : 规定输出设备是网格还是位图。可能的值：”1” 代表网格，”0” 是其他。例子：`media="handheld and (grid:1)"`。
 *  `<link media="value">`:
    
     *  `media` 属性规定被**链接文档**将显示在什么设备上。
     *  `media` 属性用于为**不同的媒介类型**规定**不同的样式**。
 *  **所有浏览器**都支持值为 `"screen"`、`"print"` 以及 `"all"` 的 media 属性。
 *  `value`值:  
    
    
     *  `screen` : 计算机屏幕（默认）。
     *  `tty` : 电传打字机以及类似的使用等宽字符网格的媒介。
     *  `tv` : 电视机类型设备（低分辨率、有限的滚屏能力）。
     *  `projection` : 放映机。
     *  `handheld` : 手持设备（小屏幕、有限带宽）。
     *  `print` : 打印预览模式/打印页面。
     *  `braille` : 盲人点字法反馈设备。
     *  `aural` : 语音合成器。
     *  `all` : 适用于所有设备。

--------------------

### 利用`@media screen`实现网页的自适应: ###

*  优点:  
    
    
     *  **无需插件**和**手机主题**，对移动设备友好,能够**适应各种窗口大小**。只需在`CSS`中添加`@media screen`属性，根据浏览器宽度判断并输出不同的长宽值。
 *  **`1280`分辨率**以上（大于`1200px`）:

@media screen and (min-width:1200px){
        #page{ width: 1100px; }
        #content,.div1{ width: 730px;}
        #secondary{ width:310px}
    }

*  **`1100`分辨率**（大于`960px`，小于`1199px`）:

@media screen and (min-width: 960px) and (max-width: 1199px) {
        #page{ width: 960px; }
        #content,.div1{ width:650px;}
        #secondary{ width:250px;}
        #select{ max-width:200px;}
    }

*  **`880`分辨率**（大于`768px`，小于`959px`）:

@media screen and (min-width: 768px) and (max-width: 959px) {
        #page{ width: 900px; }
        #content,.div1{ width:620px;}
        #secondary{ width:220px;}
        #select{ max-width:180px;}
    }

*  **`720`分辨率**（大于`480px`，小于`767px`）:

@media only screen and (min-width: 480px) and (max-width: 767px){
        #page{ width: 450px; }
        #content,.div1{ width: 420px;position: relative; }
        #secondary{ display:none; }
        #access{ width: 450px; }
        #access a { padding-right:5px; }
        #access a img{ display:none; }
        #rss{ display:none; }
        #branding #s{ display:none; }
    }

*  **`440`分辨率**以下（小于`479px`）:

@media only screen and (max-width: 479px) {
        #page{ width: 300px; }
        #content,.div1{ width: 300px;}
        #secondary{ display:none; }
        #access{ width: 330px; } 
        #access a { padding-right:10px;padding-left:10px; }
        #access a img{ display:none; }
        #rss{ display:none; }
        #branding #s{ display:none; }
        #access ul ul a{ width:100px; }
    }

--------------------

*  如上所述: 在引入**源文件**的时候也就需要引入`jquery`文件。

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>Bootstrap JackDan9</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
    
        
        <link href="../css/bootstrap.css" rel="stylesheet">
        <style> body { padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */ } </style>
        <link href="../css/bootstrap-responsive.css" rel="stylesheet">
    
        
        
    
        
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../ico/apple-touch-icon-144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../ico/apple-touch-icon-114-precomposed.png">
          <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../ico/apple-touch-icon-72-precomposed.png">
                        <link rel="apple-touch-icon-precomposed" href="../ico/apple-touch-icon-57-precomposed.png">
                                       <link rel="shortcut icon" href="../ico/favicon.png">
      </head>
    
      <body>
    
        <div class="navbar navbar-inverse navbar-fixed-top">
          <div class="navbar-inner">
            <div class="container">
              <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="brand" href="#">Project name</a>
              <div class="nav-collapse collapse">
                <ul class="nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#about">About</a></li>
                  <li><a href="#contact">Contact</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
    
        <div class="container">
    
          <h1>Bootstrap starter template</h1>
          <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
    
        </div> 
    
        
        
        <script src="../assets/js/jquery.js"></script>
        <script src="../assets/js/bootstrap-transition.js"></script>
        <script src="../assets/js/bootstrap-alert.js"></script>
        <script src="../assets/js/bootstrap-modal.js"></script>
        <script src="../assets/js/bootstrap-dropdown.js"></script>
        <script src="../assets/js/bootstrap-scrollspy.js"></script>
        <script src="../assets/js/bootstrap-tab.js"></script>
        <script src="../assets/js/bootstrap-tooltip.js"></script>
        <script src="../assets/js/bootstrap-popover.js"></script>
        <script src="../assets/js/bootstrap-button.js"></script>
        <script src="../assets/js/bootstrap-collapse.js"></script>
        <script src="../assets/js/bootstrap-carousel.js"></script>
        <script src="../assets/js/bootstrap-typeahead.js"></script>
    
      </body>
    </html>

--------------------

> JackDan9 Thinking  
> [BootStrap4][]

[Link 1]: https://baike.baidu.com/item/Web%E5%BA%94%E7%94%A8%E6%A1%86%E6%9E%B6/4262233
[Link 2]: http://getbootstrap.com/2.3.2/assets/bootstrap.zip
[GithubBootstrap]: https://github.com/twbs/bootstrap/archive/v2.3.2.zip
[Jquery]: https://github.com/jquery/jquery
[BootStrap4]: http://getbootstrap.com/docs/4.0