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>



版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_30975247/article/details/49872125

Bootstrap开发框架

-
  • 1970年01月01日 08:00

Bootstrap的基本使用方法,5分钟帮你搞懂怎么用

作为Web开发的Coder,是不是很对浏览器兼容性,各种移动设备适配都很头大,所以我们有必要学习一下当下主流的一个Html5框架,即Bootstrap!...
  • CodeByCoder
  • CodeByCoder
  • 2016-03-28 21:13:04
  • 38417

bootStrap学习心得

一、BootStrap介绍:   1. BootStrap特点:   1)跨设备、跨浏览器   可以兼容所有现代浏览器,包括比较诟病的IE7、IE8.   2)响应式布局   不但可以支持...
  • hellowuxia
  • hellowuxia
  • 2016-08-04 17:50:40
  • 1113

Bootstrap模板Metronic设置默认选中侧边栏

一开始我们拿到的模板页面如下图所示,但是在给出的模板中,每个页面都包含了左侧的侧边栏代码,这在我们开发系统的时候,显然不能这么做,不利于变更,重复性也很大,但是如果是放在一个文件中统一包含进来的话,就...
  • huwei0518
  • huwei0518
  • 2015-08-05 13:27:44
  • 4176

bootstrap实现响应式导航栏,折叠隐藏效果

bootstrap实现响应式导航栏 PC机显示正常的长条导航,手机端实现折叠隐藏的按钮效果 向 标签添加 class .navbar、.navbar-default(导航条背景白)nav...
  • tammy1151
  • tammy1151
  • 2016-08-22 10:57:18
  • 20256

去除Bootstrap输入框聚焦时的边框轮廓线

使用Bootstrap3的时候,好处是有很多现有的控件可以使用,坏处是个性化起来会遇到不少麻烦,单独的静态页面显示正常的, 引入Bootstrap后,有些类/通用界面组件的样式会被覆盖。想去除默认风格...
  • iefreer
  • iefreer
  • 2015-10-18 15:32:35
  • 16817

点击左边列表在右边显示选项 多选 单选

为了你能下载就能运行,所以我就弄了一个简单的列子 可以给你一些重要提示。希望...SpringMVC中整合<em>bootstrap</em>实现分栏,iframe实现点击左侧菜单改变右侧内容或点击上面菜单...
  • 2018年04月08日 00:00

疯狂的程序员(绝影著)

BOSS Liu<em>一边</em>点头<em>一边</em>说:“是啊,是啊。也许我错了...招啊,对付Bug Yang他们还有用,在我面前,班门弄斧...spring mvc+mybatis+mysql+maven+<em>bootstrap</em> 整合实现...
  • 2018年04月09日 00:00

Bootstrap,Bagging,Boosting

Bootstrap(自助法)引入Bootstrap,即“自助法”,是用小样本来估计大样本的统计方法。核心思想子样本之于样本,可以类比样本之于总体思想解析举个栗子 你要统计你们小区里男女比例,可是你...
  • shibing624
  • shibing624
  • 2016-12-21 22:45:33
  • 548

CSS 实现 系统登录界面 (一)

设置页面背景被全部覆盖实现过程中出现,图片周边存在边框,白边。这个边是 body 标签的 边框,去除边框实现代码详细如下: 可除去页面的边界。 设置登录界面中提交表单的文本框位置,可以通过...
  • u013630349
  • u013630349
  • 2016-08-11 18:31:57
  • 1779
收藏助手
不良信息举报
您举报文章:Bootstrap边学边记
举报原因:
原因补充:

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