Big-man的Bootstrap篇(一)

来源：互联网发布：守望先锋英雄数据库编辑：程序博客网时间：2024/06/17 02:57

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给出一个应用框架的定义介绍，更加详细的内容参考应用框架百度百科。

快速安装:

快速安装:
- 立即下载编译后的版本，里面已经包含了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。
  - 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">        <!-- Bootstrap -->        <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="">    <!-- Le styles -->    <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">    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->    <!--[if lt IE 9]>      <script src="../js/html5shiv.js"></script>    <![endif]-->    <!-- Fav and touch icons -->    <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><!--/.nav-collapse -->        </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> <!-- /container -->    <!-- Le javascript    ================================================== -->    <!-- Placed at the end of the document so the pages load faster -->    <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

阅读全文

1 0

Big-man的Bootstrap篇(一)

Big-man的Bootstrap篇(一)

前言:

Bootstrap故事:

Bootstrap的环境安装:

什么是应用框架:

快速安装:

下载完之后的目录结构:

引入源文件:

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

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