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>



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

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

ruby学习笔记----待完善,边学边记

官网 http://www.ruby-lang.org 入门手册 http://www.rubyist.net/~slagell/ruby/examples.html 1. irb ...

MySql边学边记--1

mysql数据类型 MySQL支持多种类型,大致可以分为三类:数值、日期/时间和字符串(字符)类型。 标准sql**数据类型**包括:严格数值数据类型(INTEGER、SM...
  • wu_0916
  • wu_0916
  • 2016年10月05日 11:05
  • 114

边学边记:在Debian Linux上安装Tomcat

边学边记:在Debian Linux上安装Tomcat6 (新手总结 欢迎zheng) 1. 安装        apt-get install tomcat6 apt-get install to...
  • xyz0330
  • xyz0330
  • 2014年09月30日 10:52
  • 467

Vuex2.0边学边记+两个小例子

最近在研究Vuex2.0,搞了好几天终于有点头绪了。 首先vuex概念比较多,一定要搞懂里面的概念,可以参考官网Vuex2.0概念,我写此文的目的是希望能对前端爱好者提供个参考,加深对vuex2...

linux边学边记--变量键盘读取、数组与声明:read 、array、declare、变量修改及设置方式

1、read [root@localhost zhangyf]# read [-pt] 变量名 参数:       p后直接接提示符       t后面接等待的秒数 例一: [root@l...

Ruby边学边记

Ruby边学边记该篇主要描述类Ruby定义一个类#!/usr/bin/ruby -w class Customer @@no_of_customer = 0 def hello(id ...

bjective-C边学边记-7:Foundation Kit快速教程之 范围

Cocoa是由两个不同的框架组成:Foundation Kit 和 Application Kit(AppKit)。AppKit包含了所有的用户接口对象和高级类。1.范围NSRange:用来表示相关事...

linux边学边记---vi文字处理器

6. vi文字处理器 a.创建、保存退出文件 创建文件并编辑:vi 文件名  eg:vi  test.txt 保存文件并退出  :wq 无法写入时,强制写入::wq! /word :从光标开...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Bootstrap边学边记
举报原因:
原因补充:

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