Bootstrap边学边记

原创 2015年11月16日 21:33:16

一、响应式布局页面

1.响应式网页(Responsive  Web Page)

  概念:一个网页,可以在各种不同的浏览终端下加以显示,并能够根据浏览终端的不同而呈现出不同的样式。

  响应式网页需要注意下面三个部分:

(1)采用流式布局(Fluid  流式、流动式、液态)

(2)可伸缩的图片、文字

(3)CSS MediaQuery技术,根据浏览设备的宽和高调用不同的css

 

2.如何编写响应式网页

 (1)在HEAD标签中声明 viewport元标签

  <meta        name="viewport"

content="width=device-width,initial-scale=1,user-scalable=0">

 (2)元素的宽使用%,而不要用px

width:50%

 (3)字体大小使用相对值,如%、em,而不要用px

font-size:  100%;   font-size:  .75em ;

 (4)流式布局,使用浮动定位

float:left;      float: right;

 (5)图片的自动缩放

max-width:xx%;           自适应父容器的空间,但有一个最大值(图片的原始大小)

此外,还可以使用js修改<base>的href属性值,针对不同的浏览器,指定不同的图片加载路径

 (6)CSS MediaQuery,使用媒体查询加载不同的CSS文件

 (7)CSS MediaQuery,使用媒体查询执行不同的CSS属性

Viewport:由Apple在iOS中最新引入该元标签,视口,手机中浏览器的显示窗口的大小,一般要远大于手机屏幕大小,HTML中可以指定此视口的大小。可以指定如下属性:

width:  视口的宽度,可以取值为数值,或device-width

height:视口的高度,一般不指定

initial-scale:初始时的缩放倍率

minimum-scale: 允许的最小缩放倍率

maximum-scale:  允许的最大缩放倍率

user-scalable: 是否允许用户手动缩放,可取值1/0/yes/no

3.CSS MediaQuery

  CSS媒体查询技术,除了IE8-不支持,其它浏览器都支持。


CSS Media Query技术有两个功能:

   (1)根据浏览设备的不同,加载不同的外部CSS文件

<linkrel="" media="" href="">

  (2)根据浏览设备的不同,执行不同的CSS块

如base.css:

@mediascreen and (min-width: 1000px){

.container{

}

.footer{

}

}

4.为阅读障碍用户编写网页——WAI-ARIA

WAI行动:  Web Accessibility  Initiative  网页无障碍访问倡议 

 为了响应W3C组织的WAI倡议,H5委员会为标签添加了两组新的属性:

role:指定当前标签的“实际角色”,用于纠正/强调语义;

aria-*:指定当前标签的ARIA特性

 

<inputtype="text" name="uname" aria-label="用户名">

      <textarea name="signiture"aria-labeledby="signiture-hint">

<divid="signiture-hint">请在此处输入您的个人签名,可以包含....不能不含....</div>


二、Bootstrap概述

1.BootstrapCSS样式 —— Grid Layout System

(1)所有的布局用的块元素必须处于“容器”中

  (2)容器中,必须包含 .row 块

  (3).row块中包含中.col块

  (4).col块中放置页面要显示的内容

  (5).col块中可以继续嵌套.row,又分为12个小.col


2.Bootstrap全局CSS样式——与表单相关

 .sr-only      页面上不再显示,屏幕阅读器可以读出

 .form-group   用于包含label/input的容器上,声明一个表单组

 .control-label      用于label元素

 .form-control   用于表单输入项


3.Bootstrap组件 —— well

  让组件呈现内陷(inset)效果

  <divclass="well">

  <divclass="well-lg">

  <div class="well-sm">   

 

4.Bootstrap组件 —— 列表组

  <ulclass="list-group">

<liclass="list-group-item"></li>

<liclass="list-group-item  active"></li>

  </ul>

5.Bootstrap组件 —— 图标字体

 Glyphicon:是一套图形字体库,总共有200+图标,是第三方开发的收费字体库。免费提供了Bootstrap框架。

 提示:这些图形不是图片!而是文字!可以随意指定大小、颜色!

6.Bootstrap组件——按钮组

  <divclass="btn-group">

<buttonclass="btn ...">

  </div>

 提示:(1)改变按钮中按钮的大小,与.btn-group组合应用下列之一:  btn-group-lg  btn-group-sm btn-group-xs

(2)可以使用.btn-justify使按钮组成为一个区块元素,所有按钮加在一起占满一整行——此时使用a代替button方便。

(3)按钮组中的某一个按钮可以声明 .active 呈现出激活的状态


7.Bootstrap组件——下拉菜单

  <divclass="dropdown">

<button data-toggle=”dropdown”>触发元素</button>

<ulclass="dropdown-menu">

</ul>

  </div>

  注意:下拉菜单必需是三级结构:

容器(.dropdown)+触发元素+隐藏元素(.dropdown-menu)

 在Bootstrap中,调用几乎所有的JS插件提供的函数有两种方式:

  (1)纯js代码:    $('目标元素').xxxx( );

  (2)为控制元素指定data-toggle 属性:

<button data-toggle="xxxx">

8.折叠效果

  目标元素:

  <divclass="collapse">初始隐藏</div>

  <divclass="collapse in">初始显示</div>

  触发元素:

      使用a做触发元素:

<a href="#目标元素ID" data-toggle="collapse">

     使用button做触发元素:

<buttondata-toggle="collapse" data-target="目标元素选择器">

  使用折叠效果实现面板组:

<div class="panel-group" id="pg1">
<div class="panel">
<div class="panel-heading">
<a href="#pn1" data-parent="pg1"data-toggle="collapse"></a>
</div>
<div class="panel-body collapse" id="pn1">
</div>
</div>
</div>

9.导航栏

  导航栏的分类:

    默认样式: 灰底黑字

<divclass="navbar navbar-default">

    翻转样式: 黑底白字

<divclass="navbar navbar-inverse">

    固定在顶部/底部导航栏:

<divclass="navbar navbar-default navbar-fixed-top">

<divclass="navbar navbar-default navbar-fixed-bottom">

    提示:固定在顶部/底部的导航栏会压住页面内容,需要加

body{padding-top: 50px; }



9.Bootstrap提供的jQuery插件——工具提示


<xx  data-toggle="tooltip"  title="提示信息"  data-placement=" left / right / top /bottom">

     同时还必须执行:

     $('[data-toggle=tooltip]').tooltip( );

10.Bootstrap提供的jQuery插件——弹出框

<xx data-toggle="popover"title="弹出框标题data-content="弹出的内容"data-placement="left / right / top / bottom"  data-trigger="click/ hover / focus">

同时需要再添加:

$('[data-toggle=popover]').popover();

提示:弹出框默认只允许出现文字,不允许出现HTML元素,因为前端的xxs攻击问题,参见http://baike.sogou.com/v66173755.htm

但可以修改popover的html属性为true:

   <xx  data-html="true"></xx>   或者

   $(...).popover( { html: true,   trigger: 'hover'  } );     


11.Bootstrap提供的jQuery插件——模态对话框(Modal Dialog)



模态对话框的完整结构——直接作为body的最后的子元素即可

  <divclass="modal">   <!--提供半透明的遮罩层-->

<divclass="modal-dialog"> <!--为模态框进行定位-->

<divclass="modal-content"> <!--包裹所有的内容,定义对话框的边框、背景色等-->

<divclass="modal-header"></div>

<divclass="modal-body"></div>

<divclass="modal-footer"></div>

</div>

</div>

  </div>

 提示:模态对话框在.modal-body中可以使用 .container-fluid > .row> col-*-* 进行布局。

 

12.轮播广告(Carousel)

  必需的基本结构:

  <divclass="carousel" data-ride="carousel">

<divclass="carousel-inner">

<divclass="item active"></div>

<divclass="item"></div>

</div>

  </div>

 

此外,还可以在.carousel中添加引导器:

<ulclass="carousel-indicators">

<lidata-target="#myad1"data-slide-to="0"></li>

</ul>

此外,还可以在.carousel中添加下一个/上一个控件:

<ahref="#myad1" data-slide="prev|next"class="carousel-control">

<spanclass="glyphicon glyphicon-chervron-left|right"></span>

</a>



13.附加导航(Affix)

 提示:.affix 没有为导航中的项提供任何特殊样式!需要开发者自定义导航项样式!


14.Bootstrap 提供的jQuery插件 —— 滚动监听

  滚动监听插件:将body的滚动事件与一个.nav关联起来,实现当页面内容滚动时(判断滚动距离与页面中的某个元素的offsetTop相等),指定的.nav中的某一项会处于.active状态

<body    data-spy="scroll"  data-target="#mynav-parent ">
...
<div id="  mynav-parent">
<ulclass="nav">
             <li ><a href="#a1">Home</a></li>
             <li><a href="#a2">Contact</a></li>
</u>
</div>
...
 <xx id="a1"> 
...
 <xx id="a2">

Bootstrap定制

  定制Bootstrap的两种方法:

(1)直接修改bootstrap.less,重新编译得到bootstrap.css

(2)在官网上有一个“定制工具”,修改需要选项,下载即可


三、CSS动态样式语言

动态样式语言:为CSS提供扩展功能的语言,如变量、函数、参数、判断等。

常见动态样式语言: Sass/Scss、less、Stylus等

less:可以看做Sass的继任者,语法更趋向于传统的CSS。可以让CSS的编写工作量极大的减少,尤其适用于大型项目大量CSS样式的编写。


1.LESS动态样式语言的语法:

(1)变量(variable)   @mycolor: #f00;

(2)混合(mixin)    .class1{ ... }    .class2{  .class1;  ... }

(3)规则嵌套——必须会用!

(4)运算

(5)函数

(6)命名空间

(7)变量的作用域

(8)注释 比CSS多了单行注释

(9)导入(import)

注意:less中的@import是真的把目标文件的内容聚合到当前文件!与CSS中的@import完全不同!



2.如何让一个容器的背景透明,而上方的文字不透明
  不能使用:
<divstyle="opacity: .5"> 文字 </div>
  使用:
<divstyle="background-color: rgba(0,0,0,  .5)"> 文字</div>



版权声明:本文为博主原创文章,未经博主允许不得转载。

借记/贷记交易处理流程

功能概述  以下功能在借记/贷记交易处理中得到使用。尽管在必备(M)的功能中有些步骤也许是可选择的,但标记为必备的功能还是应该在所有交易中得到执行。标记为可选(O)的功能是可选择的并根据卡或终端的参...
  • qq8864
  • qq8864
  • 2016年08月17日 22:47
  • 1113

《小强升职记》读书笔记(附PDF下载地址)

这本书的主题是时间管理。如果你还没有听过这个词语,不要被这个似乎只是空洞而不切实际理论的成功学的词语欺骗,实际上真的非常有益。真希望我能够早点了解到时间管理的理论。这本书是我在这个方面的启蒙。真心推荐...
  • vincent_hbl
  • vincent_hbl
  • 2016年11月16日 08:24
  • 974

android-bootstrap

bootstrap在android上的风格还是挺不错的。 详解button的属性: bootstrapbutton:bb_icon_left="fa-heart" b...
  • a11101171
  • a11101171
  • 2014年03月30日 16:15
  • 5772

bootstrap源码分析系列:一,文件结构和开发环境

本文基于bootstrap2.3.2。 一,文件结构: ▾ docs/   ▸ assets/   ▸ build/   ▸ examples/   ▸ templates/    ...
  • lihongxun945
  • lihongxun945
  • 2014年01月02日 17:23
  • 12983

Android实习周记:第一周,井底之蛙上岸

本周一,5月4日,我终于开始了Android实习的工作。1.实习生活流水账由于公司距离学校较远,每天七点就要起床,洗漱、早点后,大概一个半小时刚好到公司。我每次都是九点前到,那时候公司人还没来5分之一...
  • u011240877
  • u011240877
  • 2015年05月06日 21:47
  • 6866

如何选择合适的地图注记手段

SuperMap软件提供了通过文本/CAD数据集、标签专题图两种手段制作地图注记,虽然,这些手段都能满足最终的注记要求,但是,在实际应用中您需要根据数据量等具体情况来选择最合适的手段,那么如何选择?...
  • supermapping
  • supermapping
  • 2015年11月03日 15:57
  • 1450

oracle_hint

  • 2014年02月14日 10:54
  • 66KB
  • 下载

使用hint强制基于规则的查询优化

  • 2008年11月24日 13:54
  • 51KB
  • 下载

实习一个月记

今天下班很早,没有像往常一样的加班,回到宿舍之后早早的就洗洗睡下了,但是却久久不能入眠,思绪烦乱,所以干脆起来做点事情。 首先自我介绍一下,我是一名大四在读实习生,现在实习刚满一个月,接下来想要谈谈我...
  • u011063151
  • u011063151
  • 2015年04月02日 01:02
  • 1072

【转】JAVA记账本程序源码

刚开始学java的时候,做了个swing小程序,一晚上做出来后感觉挺不错的,对swing了解深了些,也可以自己用这个小程序来记账省钱。手敲的界面代码;个人感觉JAVA swing的界面代码挺容易理解的...
  • yatyou
  • yatyou
  • 2013年12月11日 10:58
  • 3624
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap边学边记
举报原因:
原因补充:

(最多只允许输入30个字)