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

Big-man的Bootstrap篇(一)相关推荐

Big-man的Bootstrap篇(二)
Big-man的Bootstrap篇(二) 前言: Big-man突然想要去深入地了解一下Bootstrap这个应用框架,毕竟很强大的技术需要更加仔细地推敲,才能发现其中蕴含的更强大的能量. Boot ...
前端那些事之Bootstrap篇
2019独角兽企业重金招聘Python工程师标准>>> Bootstrap是什么? * Twitter 官方推出一套 css 的框架* 它能快速帮我们快速开发出一套风格绚丽的网站* ...
【重大更新】DevExpress v17.2新版亮点—Bootstrap篇（二）
用户界面套包DevExpress v17.2日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了Bootstrap Controls v17.2 的CardView.Charts ...
DevExpress v18.1新版亮点——ASP.NET Bootstrap篇（二）
2019独角兽企业重金招聘Python工程师标准>>> 用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevE ...
给力的Bootstrap篇一
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
php使用popover,php中bootstrap框架.popover弹出框，鼠标移动到上面自动显示，离开自动消失...
$(function(){//显示弹出框 $("[rel=name]").popover({ trigger:'manual', placement : 'bottom', //p ...
零基础Java全栈教程--全文目录
文章目录 1. 教程结构 2. 教程目录 2.1 HTML篇 2.2 CSS篇 2.3 JS篇 2.4 Java 语言基础篇 2.5 Java Web基础篇 2.6 JS+Java项目实战篇 2.7 ...
UI设计实战篇——利用Bootstrap框架制作查询页面的界面
Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太大).尤其是现在的响应时布局(我的理解是页面根据不同的分辨率,采用不 ...
Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...

Big-man的Bootstrap篇(一)

Big-man的Bootstrap篇(一)

前言:

Bootstrap故事:

Bootstrap的环境安装:

什么是应用框架:

快速安装:

下载完之后的目录结构:

引入源文件:

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

Big-man的Bootstrap篇(一)相关推荐

最新文章

热门文章

Big-man的Bootstrap篇(一)

Big-man的Bootstrap篇(一)

前言:

Bootstrap故事:

Bootstrap的环境安装:

什么是应用框架:

快速安装:

下载完之后的目录结构:

引入源文件:

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

Big-man的Bootstrap篇(一)相关推荐

最新文章

热门文章

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