bootstrap 笔记用法

2023-11-07 19:16•Java教程•阅读 2634

container 实现内容居中对齐

jumbotron 超大屏幕可以增加标题的大小

responsive 响应式

center-block 图像居中

col-md-offset-X 向左移

lead 文本更大更粗、行高更高

表格

table 表格

table-striped 条纹隔行变色

table-bordered 表格边框线

table-hover 在 <tbody> 内的任一行启用鼠标悬停状态

table-condensed 让表格更加紧凑

success 表示成功的操作用在tr上

info 表示信息变化的操作用在tr上

warning 表示一个警告的操作用在tr上

danger 表示一个危险的操作用在tr上

文本

text-left 向左对齐文本

text-center 居中对齐文本

text-right 向右对齐文本

text-muted 本行内容是减弱的

text-primary 本行内容带有一个 primary class

text-success 本行内容带有一个 success class

text-info 本行内容带有一个 info class

text-warning 本行内容带有一个 warning class

text-danger 本行内容带有一个 danger class

text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行

text-nowrap 段落中超出屏幕部分不换行

text-lowercase 设定文本小写

text-uppercase 设定文本大写

text-muted 文本样式

背景颜色

bg-primary

bg-success

bg-info

bg-warning

bg-danger

pull-left 元素浮动到左边

pull-right 元素浮动到右边

clearfix 清除浮动

center-block 设置元素为 display:block 并居中显示

show 强制元素显示

hidden 强制元素隐藏

sr-only 除了屏幕阅读器外，其他设备上隐藏元素

sr-only-focusable 与 sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户)

text-hide 将页面元素所包含的文本内容替换为背景图

close 显示关闭按钮

caret 显示下拉式功能

title 属性 title="XXXX"

dl->td+dd

list-unstyled 未定义样式列表

list-inline 内联列表

pre-scrollable 使 <pre> 元素可滚动，代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条

pre 内嵌代码

code 内嵌代码

form 表单

form-group

form-control

placeholder="请输入名称"

form-inline 内联表单向左对齐的，标签是并排的

sr-only 隐藏内联表单的标签

form-horizontal 水平表单

form-group

control-label

form-control

</div>

</form>

checkbox-inline 内联复选框

radio-inline 内联单选框

radio

checkbox

disabled 禁用标签上加一个就可以

fieldset 禁用的字段集<fieldset disabled></fieldset>

has-success 表单成功验证状态

has-warning 表单警告验证状态

has-error 表单错误验证状态

help-block 一个较长的帮助文本块，超过一行，需要扩展到下一行

btn 按钮作用于 a button input 上

btn-default 默认/标准按钮

btn-primary 原始按钮样式

btn-success 表示成功的动作

btn-info 该样式可用于要弹出信息的按钮

btn-warning 表示需要谨慎操作的按钮

btn-danger 表示一个危险动作的按钮操作

btn-link 让按钮看起来像个链接 (仍然保留按钮行为)

btn-block 块级按钮(拉伸至父元素100%的宽度)

active 按钮被点击

disabled 禁用按钮

图片

img-circle 图片以椭圆型展示

img-rounded 图片圆角相当于border-radius:6px

img-thumbnail 添加一些内边距（padding）和一个灰色的边框

img-responsive 图片响应式 (将很好地扩展到父元素)

字体图标

格式 glyphicon glyphicon-sort-by-attributes

下拉菜单

dropdown 只需要在 class dropdown 内加上下拉菜单用在div上

格式例子

<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">主题

</button>

</li>

</ul>

</div>

dropdown-menu 创建下拉菜单用在ul上

dropdown-menu-right 下拉菜单右对齐用在ul上

dropdown-header 下拉菜单中添加标题用在ul上

dropup 指定向上弹出的下拉菜单

disabled 下拉菜单中的禁用项

divider 下拉菜单中的分割线

btn-group 按钮组用在div上

btn-toolbar 把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中获得更复杂的组件

.btn-group-lg, .btn-group-sm,.btn-group-xs 应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整应用在div上

btn-group-vertical 让一组按钮垂直堆叠显示(默认是水平) 应用在div上

在一个按钮组里面嵌套另一个按钮组（下拉菜单可以）

下列

</button>

</ul>

</div>

<span class="caret"></span> 指示按钮作为下拉菜单

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始

</button>

<li><a href="#">另一个功能</a></li>

<li><a href="#">分离的链接</a></li>

</ul>

</div>

分割的按钮下拉菜单就是将下拉框组合拼装在一起

<span class="sr-only">切换下拉菜单</span>

</button>

</div>

btn-lg，btn-sm，btn-xs 按钮大小大，中，小

输入框组

语法

</div>

input-group 应用在div中

在input-group 里面包含 input-group-addon 应在在<span> 内放置额外的内容

input-group-lg，input-group-sm 输入框组的大小

<span class="input-group-addon">XXX</span> 中可以放控件,btn、下拉菜单，文字等等

导航元素

nav nav-tabs 标签式导航菜单应用在ul上

语法

</ul>

active 表示选中点击

nav nav-pills 胶囊式的导航菜单应用在ul上

nav-stacked 垂直堆叠应用在ul上

nav-justified 两端对齐的导航与父元素等宽

tab-content 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改

tab-pane 与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容随标签的切换而更改

in active 选中点击状态

语法

</ul>

</div>

分页

pagination 是一种无序列表应用在ul上

语法

</ul>

« 表示 <<

» 表示 >>

← 表示 <——

→ 表示 ——>

× 表水 X

pagination-lg, .pagination-sm 获取不同大小的项

active 选中点击该页码用在li上

disabled 禁用该页码用在li上

翻页

pager 添加该 class 来获得翻页链接分页链接，链接居中对齐

previous 使用 .previous 把链接向左对齐

next 使用 .next 把链接向右对

disabled 禁用链接

<li class="previous"><a href="#">← Older</a></li>

<li class="next"><a href="#">Newer →</a></li>

</ul>

标签标签可用于计数、提示或页面上其他的标记显示

label 来显示标签

语法

<span class="label label-default">Label</span>

徽章徽章与标签相似，主要的区别在于徽章的边角更加圆滑

主要用于突出显示新的或未读的项

语法

页面标题 page-header

它会在网页标题四周添加适当的间距

<small>子标题</small> 小标签元素

警告 alert

警告（Alerts）向用户提供了一种定义消息样式的方式

<div class="alert alert-success">成功！很好地完成了提交。</div>

<div class="alert alert-info">信息！请注意这个信息。</div>

<div class="alert alert-warning">警告！请不要提交。</div>

<div class="alert alert-danger">错误！请进行一些更改。</div>

可取消的警告

1:通过创建一个 <div>，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告

2:同时向上面的 <div> class 添加可选的 .alert-dismissable

3:再添加一个关闭按钮 .close 再加上一个属性 data-dismiss="alert"

语法：

</button>

信息！请注意这个信息。

</div>

alert-link 警告链接

close.bs.alert 当调用 close 实例方法时立即触发该事件。

closed.bs.alert 当警告框被关闭时触发该事件（将等待 CSS 过渡效果完成）。

$(\'#myalert\').bind(\'closed.bs.alert\', function () {

// 执行一些动作...

})

进度条

progress

1：添加一个带有 class .progress 的 <div>。

2：接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

3：添加一个带有百分比表示的宽度的 style 属性，例如 ; 表示进度条在 60% 的位置。

语法

<div class="progress-bar" role="progressbar" aria-valuenow="60"

aria-valuemin="0" aria-valuemax="100" title="40% 完成" >

</div>

progress-striped 条纹的进度条

active 动画的进度条在条纹基础上

列表组列表组件用于以列表形式呈现复杂的和自定义的内容

1：向元素 <ul> 添加 class .list-group。

2：向 <li> 添加 class .list-group-item。

语法

<li class="list-group-item">免费域名注册</li>

<li class="list-group-item">免费 Window 空间托管</li>

</ul>

面板面板组件用于把 DOM 组件插入到一个盒子中

语法

带有 title 的面板标题

</h3>

</div>

面板内容

</div>

</div>

带语境色彩的面板

使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板

跟 panel 放同一级

模态框

1、html代码

语法：

<h2 class="modal-title pull-left">这是模态框标题</h2>

</div>

</div>

关闭

</button>

确定

</button>

</div>

2、js

//为了让弹出框居中

$(\'#modelwin\').on(\'shown.bs.modal\', function () {　　// 事件开始时被触发

$("#modelwin .modal-dialog").css({

"margin": "0px",

　　　"width":"55%",　　//设置弹出框的width

"top": function () { //设置高度

return (document.documentElement.clientHeight - $("#modelwin .modal-dialog").height()) / 2 + "px";

"left": function () { // 左边位置

return (document.documentElement.clientWidth - $("#modelwin .modal-dialog").width()) / 2 + "px";

}

});

$("#modelwin").modal({backdrop: \'static\', keyboard: false});

$("#modelwin").modal("show");

1：属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。

2：<div class="modal-header">，modal-header 是为模态窗口的头部定义样式的类。

3：class="close"，close 是一个 CSS class，用于为模态窗口的关闭按钮设置样式。

4：data-dismiss="modal"，是一个自定义的 HTML5 data 属性。在这里它被用于关闭模态窗口。

5：class="modal-body"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的主体设置样式。

6：class="modal-footer"，是 Bootstrap CSS 的一个 CSS class，用于为模态窗口的底部设置样式。

7：data-toggle="modal"，HTML5 自定义的 data 属性 data-toggle 用于打开模态窗口。

backdrop 指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。

取值：boolean 或者 \'static\' （默认 true）

keyboard 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。

取值： boolean （默认 true）

show 当初始化时显示模态框。

取值： boolean （默认 true）

模态框中的方法

modal(options) 把内容作为模态框激活。接受一个可选的选项对象。

$(\'#identifier\').modal({backdrop:\'static\',keyboard: false})

modal(\'toggle\') 手动切换模态框 $(\'#identifier\').modal(\'toggle\')

modal(\'show\') 手动打开模态框。 $(\'#identifier\').modal(\'show\')

modal(\'hide\') 手动隐藏模态框 $(\'#identifier\').modal(\'hide\')

模态框中的事件

show.bs.modal 在调用 show 方法后触发。

shown.bs.modal 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）

hide.bs.modal 当调用 hide 实例方法时触发。

hidden.bs.modal 当模态框完全对用户隐藏时触发。

$(\'#identifier\').on(\'hidden.bs.modal\', function () {

// 执行一些动作...

})

标签页（Tab）插件中要用到的事件

show.bs.tab 该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。

$(\'a[data-toggle="tab"]\').on(\'show.bs.tab\', function (e) {

e.target // 激活的标签页

e.relatedTarget // 前一个激活的标签页

})

shown.bs.tab 该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和 event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。

$(\'a[data-toggle="tab"]\').on(\'shown.bs.tab\', function (e) {

e.target // 激活的标签页

e.relatedTarget // 前一个激活的标签页

})

语法：

<hr>

<p class="active-tab"><strong>激活的标签页</strong>：<span></span></p>

<p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>

<hr>

菜鸟教程</a></li>

<a href="#" class="dropdown-toggle"

data-toggle="dropdown">

Java <b class="caret"></b></a>

<li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li>

</ul>

</li>

</ul>

<p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p>

</div>

<p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple

TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p>

</div>

<p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p>

</div>

<p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。

</p>

</div>

$(function(){

$(\'a[data-toggle="tab"]\').on(\'shown.bs.tab\', function (e) {

// 获取已激活的标签页的名称

var activeTab = $(e.target).text();

// 获取前一个激活的标签页的名称

var previousTab = $(e.relatedTarget).text();

$(".active-tab span").html(activeTab);

$(".previous-tab span").html(previousTab);

});

提示工具（Tooltip）插件

用法：

只需向一个锚标签添加 data-toggle="tooltip"

<a href="#" data-toggle="tooltip" data-placement="left" title="Example tooltip">请悬停在我的上面</a>

data-placement 属性设置tooltip方向 left/right/bottom/top (默认top)

Tooltip 选项

选项是通过 Bootstrap 数据 API（Bootstrap Data API）添加或通过 JavaScript 调用

animation boolean 默认值：true data-animation 提示工具使用 CSS 渐变滤镜效果

html boolean 默认值：false data-html 向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。

placement string|function 默认值：top data-placement

规定如何定位提示工具（即 top|bottom|left|right|auto）。当指定为 auto 时，会动态调整提示工具。例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。

selector string 默认值：false data-selector 如果提供了一个选择器，提示工具对象将被委派到指定的目标。

title string | function 默认值：\'\' data-title 如果未指定 title 属性，则 title 选项是默认的 title 值。

trigger string 默认值：\'hover focus\' data-trigger 定义如何触发提示工具： click| hover | focus | manual。您可以传递多个触发器，每个触发器之间用空格分隔。

content string | function 默认值：\'\' data-content 如果未指定 data-content 属性，则使用默认的 content 值。

delay number | object 默认值：0 data-delay 延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示：

delay: { show: 500, hide: 100 }

container string | false 默认值：false data-container 向指定元素追加提示工具。实例： container: \'body\'

Tooltip 方法

Options: .tooltip(options) 向元素集合附加提示工具句柄。 $().tooltip(options)

Toggle: .tooltip(\'toggle\') 切换显示/隐藏元素的提示工具。 $(\'#element\').tooltip(\'toggle\')

Show: .tooltip(\'show\') 显示元素的提示工具。 $(\'#element\').tooltip(\'show\')

Hide: .tooltip(\'hide\') 隐藏元素的提示工具。 $(\'#element\').tooltip(\'hide\')

Destroy: .tooltip(\'destroy\') 隐藏并销毁元素的提示工具。 $(\'#element\').tooltip(\'destroy\')

Tooltip 事件

下表列出了提示工具（Tooltip）插件中要用到的事件。这些事件可在函数中当钩子使用

show.bs.tooltip 当调用 show 实例方法时立即触发该事件。

shown.bs.tooltip 当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。

hide.bs.tooltip 当调用 hide 实例方法时立即触发该事件。

hidden.bs.tooltip 当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。

$(\'#myTooltip\').on(\'hidden.bs.tooltip\', function () {

// 执行一些动作...

})

弹出框（Popover）插件

警告框（Alert）插件

警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息

按钮（Button）插件

加载状态只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可

<button class="btn btn-primary" data-loading-text="Loading..."

type="button"> 加载状态

</button>

上一篇 »bootstrap使用笔记
下一篇 »Web前端学习笔记之BootStrap

bootstrap 笔记用法

相关推荐

Web前端学习笔记：Bootstrap框架

bootstrap学习笔记--bootstrap排版类的使用

《深入理解Bootstrap》读书笔记，一

Bootstrap 学习笔记

Bootstrap学习笔记--表单

BootStrap 用法

Bootstrap系列 -- 24. 下拉菜单基本用法 - 贺臣

Bootstrap之：下拉菜单，基本用法