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