首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >深入理解bootstrap

深入理解bootstrap

作者头像
硬核项目经理
发布2019-08-07 10:37:54
3.2K0
发布2019-08-07 10:37:54
举报

一、入门准备

二、整体架构

A.整体架构

1.CSS12栅格系统:以规则的网格阵列来指导和规范网页中的版面布已有以及信息分布

2.基础布局组件,如排版、代码、表格、按扭、表单等,可以随意应用在任何元素上,包括顶部 的CSS组件内部也可以任意使用这些基础组件

3.jQuery

4.响应式设计:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整,包括弹性网格和布局、图片、CSS媒体查询(media query)的使用等

5.CSS组件

6.JavaScript插件

B.栅格系统

1.列偏移:使用.col-md-offset-*形式的样式就可以将列偏移到右侧

2.列嵌套:在一个列里再声明一个或者多个行(row),内部所嵌套的row的宽度为100%时就是当前外部列的宽度

3.列排序:通过.col-md-push-*和.col-md-pull-*一实现

4.响应式栅格:中型屏幕md,超小型xs、小型sm、大型lg

5.使用clearfix清除浮动

C.CSS组件架构的设计思想

1.CSS组件AO模式:A表示Append,即“附加”的意思;O表示Overwrite,即“重写”的意思

2.CSS组件包括:基础样式、颜色样式、尺寸样式、状态样式、特殊元素样式、并列元素样式、嵌套子元素样式、动画样式

D.JavaScript插件架构

1.HTML布局规则:基于元素自定义属性的布局规则,比如使用类似于data-target的自定义属性等

2.JavaScrtip实现步骤:所有的插件都遵循jQuery插件开发的标准步骤,所有的事件都保持了统一标准

3.插件调用方法:所有插件的使用方式都非常类似,可以是HTML声明式,也可以是调用式(JavaScript代码),并且支持多种回调和可选参数

三、CSS布局

A.概述

1.移动:<meta name="viewport" content="width=device-width,initial-scale=1.0"/>,添加user-scalable=no可以禁用其缩放(zooming)功能

2.响应式图片:.img-responsive样式

3.Normalize.css,用于将不同浏览器的默认CSS特性设置为统一效果 的CSS库

4.居中容器:.container

B.基础排版

1.样式.h1-6没有有margin,h1有,h1 .small显示稍小一点的字体,灰色

2.<p>有额外的margin-bottom

3.相让一个段落突出显示,可以使用.lead样式,增大字体大小、粗细、行间距和margin-bottom

4.默认强调文本:small、strong、em、cite

5.对齐方式:text-left、text-center、text-right、text-justify

6.在abbr元素上实现了缩略词功能,initialism可以让字体小点

7.address元素主要是行间距和底部margin

8.blockquote定义了样式,并且可以定义.pull-right

9.列表:去点列表.list-unstyled;内联列表.list-inline;水平定义列表.dl-horizontal

C.代码

1.code单选内联代码,kbd用户输入代码,pre多行代码块

2.pre元素上应用.pre-scrollable可以控制最大高度为340px,并滚动

D.表格

1.基础样式:.table

2.隔行加背景色样式:.table-striped

3.带边框的单元格:.table-bordered

4.鼠标悬停高亮的表格:.table-hover

5.紧凑型表格:.table-condensed

6.行级元素样式,可在tr、td上使用:

  • .active表示当前活动的信息
  • .warning表示警告
  • .success表示成功或者正确的行为
  • .danger表示危险或者可能是错误的行为
  • .info表示中立的信息或行为

7.响应式表格,在.table外部包装.table-responsive样式的div即可创建,在小于768px时水平滚动

E.表单

1.基础表单:只对表单内的fieldset、legend、label标签进行了设定,对margin、padding、border进行了细化设置,如果在select、input、textarea元素上应用了.form-control样式,显示的宽度会变成100%,并且placeholder的颜色变灰

2.内联表单:在form元素上应用.form-inline样式,此样式只能在大于768px以上

3.label包住radio或checkbox,外部再用.checkbox或.radio样式,label可使用.checkbox-inline或.radio-inline内联样式

4.fieldset上应用disabled属性,则内部控件都会禁用,除了第一个legend内的控件

5.验证提示状态:.has-warning、.has-error、.has-success,在form-group平缓的div元素上应用

6.对应小图标:has-feedback

7.控件大小:.input-lg、.input-sm

8.块级帮助提示:.help-block

F.按扭

1.按扭样式:.btn、.btn-default、.btn-primary、.btn-success、.btn-info、.btn-warning、.btn-danger、.btn-link

2.按扭大小:.btn-lg、.btn-sm、.btn-xs、.btn-block

3.可支持:a、button、input元素

4.活动状态:.active

5.禁用状态:disabled属性或.disabled样式,样式不禁止按扭的默认行为

G.图像

1.3种风格效果:.img-rounded、.img-circle、img-thumbnail

H.辅助样式

1.文本样式:.text-muted、.text-primary、.text-success、.text-info、.text-warning、.text-danger

2.文本背景样式:.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger

3.辅助图标:.close关闭图标、.caret向下箭头

4.内容浮动:.pull-right、pull-left、center-block、clearfix

5.隐藏与显示:.show、.hidden(不占文档流)、.invisible

四、CSS组件

A.小图标

1.所有的icon样式都以glyphicon-开头,由http://glyphicons.com/提供,使用时必须同时使用两个样式,.glyphicon和.glyphicon-*

2.新版本使用了CSS3中的@font-face特性

B.下拉菜单

C.按钮组

1.只需要在多个按扭外部使用一个窗口元素(比如div),然后在容器元素上应用 .btn-group样式即可

2.按扭工具栏,在多个分组外再放一个大的容器元素,然后在容器元素上应用 .btn-toolbar样式

3.按扭组上可以应用.btn-group-lg、.btn-group-sm、.btn-group-xs样式

4.垂直分组使用.btn-group-vertical样式

5.在一个.btn-group容器上,如果使用了.btn-group-justified样式,则所有的按扭会100%充满容器元素,自适应的功能

D.按扭下拉菜单

1.利用data-toggle=""来实现下拉菜单

2.样式.dropup向上的下拉菜单

E.输入框组

1.输入框组,.input-group样式,输入框前后显示的个性元素上可以使用.input-group-addon

2.避免在select元素上使用addon功能,不要将.form-group和.input-group混用

F.导航

1.使用.nav:

  • .nav-tabs表示选项卡导航
  • .nav-pills胶囊式选项卡导航
  • .nav-pills .nav-stacked堆叠式导航

2.使用.nav-justified自适应导航

G.导航条

1.使用样式:.navbar

  • .navbar-default基础导航条
  • .navbar-inverse反色导航条

2.使用.navbar-brand样式给内部元素,表示该元素是导航条的名称

3.要增强可访问性,要给每个导航条加上role="navigation"

4.样式.navbar-form导航条中的表彰样式,指定浮动:.navbar-left和.navbar-right

5.其他样式:.navbar-btn(button)、.navbar-text(文本)、.navbar-link(普通链接)

6.底部和顶部固定:.navbar-fixed-top、.navbar-fixed-bottom

7.样式.navbar-static-top,表示设置一个100%充满父元素窗口的导航条,主要是去掉导航条的圆角样式

H.面包屑导航

  1. 使用样式:.breadcrumb

I.分页导航

1.使用样式:.pagination

2.支持大小:.pagination-lg和.pagination-sm

J.标签

1.使用样式:.label

2.支持多种颜色,与button类似

K.徽章

  1. 使用样式:.badge

L.大屏幕展播

  1. 使用样式:.jumbotron

M.页面标题

  1. 使用样式:.page-header

N.缩略图

1.使用样式:.thumbnail

2.样式:.caption,可配合图文展示,在此样式元素内部添加任意风格元素

O.警告框

1.使用样式:.alert

2.属性值data-dismiss="alert",警告框的关闭,需要配合js使用

3.在.alert样式上应用一个.alert-dismissable样式即可实现一个可关闭的警告框

4.警告框也有多种颜色样式

5.使用.alert-link样式高亮警告框中的链接

P.进度条

1.样式.progress用于设置进度条的容器样式

2.样式.progress-bar用于限制进度条的进度

3.样式.progress-bar-xxx,提供鑫种颜色

4.样式.progress-striped条纹样式,同时应用.active可出现动画样式

5.多个.progress-bar-xxx可以堆叠

Q.媒体对象

  1. 使用样式包括:.media、.media-object、.media-body、.media-heading和用于控制左右浮动的pull-left或pull-right样式

R.列表组

1.基本样式:.list-group、.list-group-item

2.用a标签配合.active样式可以达到高亮选中的效果

3.样式.list-group-item-xxx支持多种颜色

4.自定义列表组:.list-group-item-heading、.list-group-item-text

S.面板

1.基础面板:.panel、.panel-default(.panel-xxx多彩)、panel-body

2.头尾样式:.panel-heading、.panel-footer

3.panel-body有内边距,要放置无边距的表格只需要将table和panel-body并列放置就行,不要放在body里面

T.洼地

1.样式.well与.jumbotron类似,多了边框

2.也提供大小设置:.well-lg、.well-sm

U.主题

五、JavaScript插件

A.动画过度效果

1.默认情况下,以下组件使用了动画过渡效果:

  • 模态弹窗(Modal)的滑动和渐变效果
  • 选项卡(Tab)的渐变效果
  • 警告框(Alert)的渐变效果
  • 旋转轮播(Carousel)的滑动效果

B.模态弹窗

1.弹窗组件使用了3层div容器元素,分别应用了modal、modal-dialog、modal-content样式,在modal-content内包括了弹窗的头(header)、内容(body)、尾(footer),分别对应3个样式:modal-header、modal-body、modal-footer

2.声明式用法:data-toogle=和data-target=

3.js用法:$('#id').modal()

4.支持四种事件订阅:show.bs.modal、shown.bs.modal、hide.bs.modal、hidden.bs.modal

C.下拉菜单

1.一般在导航条(navbar)和选项卡(tab)上实现

2.首先navbar的父容器上要应用.navbar样式,其次顶级ul块上要应用.nav和.navbar-nav样式

3.使用规则:

  • 菜单样式和菜单项保持一致
  • 被单击的链接或者按扭上需要应用data-toggle="dropdown"

4.js用法:$('#id').dropdown();,也包含事件订阅等功能,与modal类似

D.滚动侦测

1.滚动侦测(ScrollSpy)插件是根据滚动的位置自动更新导航条中相应的导航项

2.用法:

  • 设置滚动容器,即在所要侦测的元素上设置data-target="@selector" data-spy="scroll"属性
  • 设置菜单链接容器,设置id或样式怀data-target一致
  • 在菜单容器内,必须有.nav样式的元素,并且在其内部有li元素,li内鈊的a元素才是可以侦测高亮的菜单链接,即符合.nav li > a这种选择符条件

3.js用法:$('滚动侦测容器选择符').scrollspy({target:'#某单容器的选择器'});

E.选项卡

1.满足要求:

  • 选项卡导航和选项卡面板要同时有
  • 导航链接里要设置data-toggle="tab",并且还要设置data-target="选择符"或href="选择符"
  • tab-pane要放在tab-content里面,要有id或样式并与data-target或href一致

F.提示框

1.默认没有声明式的用法

2.data-toggle="tooltip"

G.弹出框

  1. 与提示框类似,data-toggle="popover"

H.警告框插件

1.关闭按扭需要dismiss="alert",配合data-target="xxx",可以在外部关闭

2.JS用法:$(xxx).alert()或$(xxx).alert('close');

I.按扭

  1. 普通button使用data-toggle="button",input需要使用data-toggle="buttons"

J.折叠

1.data-toggle="collapse"配合data-target=""使用,折叠区域使用collapse和in样式

2.默认隐藏折叠区域,触发元素上添加一个.collapsed样式,去掉折叠区域的in样式

3.JS用法:$(xxx).collapse();

K.旋转轮播

L.自动定位浮标

1.Affix的效果就是浮动的左右菜单

2.使用data-spy="affix",包括affix-top、affix-bottom,配合data-offset使用

六、实战:扩展现有组件

七、实战:Win8磁贴组件开发

九、第三方扩展

1.Font Awesome,.icon-xxx相关样式

2.BSIE扩展,支持IE8以下浏览器

3.Buttons扩展,基于Sass和Compass构建的CSS按扭样式库

4.DateTime Picker插件

5.Cikonss,纯CSS实现的响应式Icon插件,兼容IE8+

6.Flat UI,基于Bootstrap进行了扁平化风格改造

7.Bootstrap Switch,用于模拟iPhone开关效果

8.Messager,弹框(alert)组件

https://github.com/zhangyue0503/html5js/tree/master/shenrulijiebootstrap

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-02-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 码农老张 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档