怎么深入理解bootstrap

这篇文章给大家介绍怎么深入理解bootstrap，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。一、入门准备二、整体架构A.整体架构1.CSS12栅格系统：以规则的网格阵列来指导和规范网页中的版面布已有以及信息分布2.基础布局组件，如排版、代码、表格、按扭、表单等，可以随意应用在任何元素上，包括顶部 的CSS组件内部也可以任意使用这些基础组件3.jQuery4.响应式设计：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整，包括弹性网格和布局、图片、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、大型lg5.使用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.移动：，添加user-scalable=no可以禁用其缩放（zooming）功能2.响应式图片：.img-responsive样式3.Normalize.css，用于将不同浏览器的默认CSS特性设置为统一效果 的CSS库4.居中容器：.containerB.基础排版1.样式.h2-6没有有margin，h2有，h2 .small显示稍小一点的字体，灰色2.有额外的margin-bottom3.相让一个段落突出显示，可以使用.lead样式，增大字体大小、粗细、行间距和margin-bottom4.默认强调文本：small、strong、em、cite5.对齐方式：text-left、text-center、text-right、text-justify6.在abbr元素上实现了缩略词功能，initialism可以让字体小点7.address元素主要是行间距和底部margin8.blockquote定义了样式，并且可以定义.pull-right9.列表：去点列表.list-unstyled；内联列表.list-inline；水平定义列表.dl-horizontalC.代码1.code单选内联代码，kbd用户输入代码，pre多行代码块2.pre元素上应用.pre-scrollable可以控制最大高度为340px，并滚动D.表格1.基础样式：.table2.隔行加背景色样式：.table-striped3.带边框的单元格：.table-bordered4.鼠标悬停高亮的表格：.table-hover5.紧凑型表格：.table-condensed6.行级元素样式，可在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-feedback7.控件大小：.input-lg、.input-sm8.块级帮助提示：.help-blockF.按扭1.按扭样式：.btn、.btn-default、.btn-primary、.btn-success、.btn-info、.btn-warning、.btn-danger、.btn-link2.按扭大小：.btn-lg、.btn-sm、.btn-xs、.btn-block3.可支持：a、button、input元素4.活动状态：.active5.禁用状态：disabled属性或.disabled样式，样式不禁止按扭的默认行为G.图像1.3种风格效果：.img-rounded、.img-circle、img-thumbnailH.辅助样式1.文本样式：.text-muted、.text-primary、.text-success、.text-info、.text-warning、.text-danger2.文本背景样式：.bg-primary、.bg-success、.bg-info、.bg-warning、.bg-danger3.辅助图标：.close关闭图标、.caret向下箭头4.内容浮动：.pull-right、pull-left、center-block、clearfix5.隐藏与显示：.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-addon2.避免在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-right5.其他样式：.navbar-btn（button）、.navbar-text（文本）、.navbar-link（普通链接）6.底部和顶部固定：.navbar-fixed-top、.navbar-fixed-bottom7.样式.navbar-static-top，表示设置一个100%充满父元素窗口的导航条，主要是去掉导航条的圆角样式H.面包屑导航使用样式：.breadcrumb
I.分页导航1.使用样式：.pagination2.支持大小：.pagination-lg和.pagination-smJ.标签1.使用样式：.label2.支持多种颜色，与button类似K.徽章使用样式：.badge
L.大屏幕展播使用样式：.jumbotron
M.页面标题使用样式：.page-header
N.缩略图1.使用样式：.thumbnail2.样式：.caption，可配合图文展示，在此样式元素内部添加任意风格元素O.警告框1.使用样式：.alert2.属性值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.媒体对象使用样式包括：.media、.media-object、.media-body、.media-heading和用于控制左右浮动的pull-left或pull-right样式
R.列表组1.基本样式：.list-group、.list-group-item2.用a标签配合.active样式可以达到高亮选中的效果3.样式.list-group-item-xxx支持多种颜色4.自定义列表组：.list-group-item-heading、.list-group-item-textS.面板1.基础面板：.panel、.panel-default（.panel-xxx多彩）、panel-body2.头尾样式：.panel-heading、.panel-footer3.panel-body有内边距，要放置无边距的表格只需要将table和panel-body并列放置就行，不要放在body里面T.洼地1.样式.well与.jumbotron类似，多了边框2.也提供大小设置：.well-lg、.well-smU.主题五、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-footer2.声明式用法：data-toogle=和data-target=3.js用法：$(‘#id’).modal()4.支持四种事件订阅：show.bs.modal、shown.bs.modal、hide.bs.modal、hidden.bs.modalC.下拉菜单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.弹出框与提示框类似，data-toggle=”popover”
H.警告框插件1.关闭按扭需要dismiss=”alert”，配合data-target=”xxx”，可以在外部关闭2.JS用法：$(xxx).alert()或$(xxx).alert(‘close’);I.按扭普通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）组件关于怎么深入理解bootstrap就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

相关推荐: java线程池的状态有几种

这篇文章主要介绍“java线程池的状态有几种”，在日常操作中，相信很多人在java线程池的状态有几种问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”java线程池的状态有几种”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！RUN…