...容。文章目录 1 BootStrap基础 1 什么是BootStrap 2 BootStrap的版本 3 BootStrap 下载 4 CDN服务 5 目录结构 6 基本模板 7 浏览器支持 8 浏览器兼容让 IE8 支持H5新标签 IE兼容模式国产浏览器切换webkit内核 2 BootStrap布局 1 概览 1.1 移动设备优先 1.2 Normalize.css 1.3 布局容器 2 栅格系统 2.1 栅格系统简介 2.2 栅格参数 2.3 栅格系统使用 2.4 不同屏幕设置不同宽度 2.5 列偏移 2.6 列位置移动 3 排版 3.1 标题 3.2 突出显示 3.3 对齐 3.4 改变大小写 3.5 引用 3.6 列表 4 代码 4.1 内联代码 4.2 用户输入 4.3 代码块 4.3 变量 4.4 程序输出 5 表格 5.1 基本 5.2 条纹状表格 5.3 带边框的表格 5.4 鼠标悬停 5.5 紧缩表格 5.6 状态类 5.7 响应式表格 6 表单 6.1 基本实例 6.2 内联表单 6.3 水平排列的表单 6.4 表单控件输入框文本域多选和单选框下拉列表静态内容帮助文字校验状态添加额外的图标控件尺寸 7 按钮 7.1 可作为按钮使用的标签或元素 7.2 预定义样式 7.3 尺寸 7.4 激活状态 7.5 禁用状态 8 图片 8.1 响应式图片 8.2 图片形状 9 辅助类 9.1 文本颜色 9.2 背景色 9.3 三角符号 9.4 浮动 9.5 让内容块居中 9.6 清除浮动 9.7 显示或隐藏内容 9.10 图片替换 10 响应式工具 10.1 不同视口下隐藏显示 10.2 打印类 1 BootStrap基础 1 什么是BootStrap 由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。 2 BootStrap的版本 BootStrap2 BootStrap3 BootStrap4 3 BootStrap 下载用于生产环境的Bootstrap Bootstrap Less 源码Bootstrap Sass 源码 4 CDN服务 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 5 目录结构生产环境版 bootstrap/├── css/│ ├── bootstrap.css│ ├── bootstrap.css.map│ ├── bootstrap.min.css│ ├── bootstrap-theme.css│ ├── bootstrap-theme.css.map│ └── bootstrap-theme.min.css├── js/│ ├── bootstrap.js│ └── bootstrap.min.js└── fonts/├── glyphicons-halflings-regular.eot├── glyphicons-halflings-regular.svg├── glyphicons-halflings-regular.ttf├── glyphicons-halflings-regular.woff└── glyphicons-halflings-regular.woff2 6 基本模板 <!DOCTYPE html><html lang="zh-CN"><head><title>Bootstrap 101 Template</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body><h1>你好，世界！</h1><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="js/bootstrap.min.js"></script></body></html> 7 浏览器支持手机浏览器 ——- Chrome Firefox Safari Android Supported Supported N/A iOS Supported Supported Supported 桌面浏览器 ——— Chrome Firefox Internet Explorer Opera Safari Mac Supported Supported N/A Supported Supported Windows Supported Supported Supported Supported Not supported 8 浏览器兼容让 IE8 支持H5新标签页面中引入respond.js <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> IE兼容模式页面中添加如下代码 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 国产浏览器切换webkit内核页面中添加如下代码 <meta name="renderer" content="webkit"> 2 BootStrap布局 1 概览 1.1 移动设备优先为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ 1.2 Normalize.css BootStrap内置了Normalize.css 1.3 布局容器 Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。 .container 类用于固定宽度并支持响应式布局的容器。 <div class="container">...</div> .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。 <div class="container-fluid">...</div> 2 栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列 2.1 栅格系统简介栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理： “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-不存在，也影响大屏幕设备。 2.2 栅格参数超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面显示器 (≥992px) 大屏幕大桌面显示器 (≥1200px) .container 最大宽度 None （自动） 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 最大列（column）宽自动 ~62px ~81px ~97px 2.3 栅格系统使用使用单一的一组 .col-md- 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。 <div class="row"><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div><div class="col-md-1">.col-md-1</div></div><div class="row"><div class="col-md-8">.col-md-8</div><div class="col-md-4">.col-md-4</div></div><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div><div class="col-md-4">.col-md-4</div></div><div class="row"><div class="col-md-6">.col-md-6</div><div class="col-md-6">.col-md-6</div></div> 2.4 不同屏幕设置不同宽度 <div class="row"><div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div><div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div><div class="row"><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div><div class="clearfix visible-xs-block"></div><div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div></div> 2.5 列偏移使用 .col-md-offset- 类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。 <div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div></div><div class="row"><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div><div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div></div><div class="row"><div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div></div> 2.6 列位置移动通过使用 .col-md-push- 和 .col-md-pull- 类就可以很容易的改变列（column）的顺序。 <div class="row"><div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div><div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div></div> 3 排版 3.1 标题 HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。 <h1>h1. Bootstrap heading</h1><h2>h2. Bootstrap heading</h2><h3>h3. Bootstrap heading</h3><h4>h4. Bootstrap heading</h4><h5>h5. Bootstrap heading</h5><h6>h6. Bootstrap heading</h6> 在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。 <h1>h1. Bootstrap heading <small>Secondary text</small></h1><h2>h2. Bootstrap heading <small>Secondary text</small></h2><h3>h3. Bootstrap heading <small>Secondary text</small></h3><h4>h4. Bootstrap heading <small>Secondary text</small></h4><h5>h5. Bootstrap heading <small>Secondary text</small></h5><h6>h6. Bootstrap heading <small>Secondary text</small></h6> 3.2 突出显示通过添加 .lead 类可以让段落突出显示。 <p class="lead">...</p> 3.3 对齐 <p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p><p class="text-justify">Justified text.</p><p class="text-nowrap">No wrap text.</p> 3.4 改变大小写 <p class="text-lowercase">Lowercased text.</p><p class="text-uppercase">Uppercased text.</p><p class="text-capitalize">Capitalized text.</p> 3.5 引用 <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p></blockquote><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p><footer>Someone famous in <cite title="Source Title">Source Title</cite></footer></blockquote><blockquote class="blockquote-reverse">...</blockquote> 3.6 列表无样式列表 <ul class="list-unstyled"><li>...</li></ul> 内联列表 <ul class="list-inline"><li>...</li></ul> 水平排列的内联列表 <dl class="dl-horizontal"><dt>...</dt><dd>...</dd></dl> 4 代码 4.1 内联代码通过 <code> 标签包裹内联样式的代码片段。 For example, <code><section></code> should be wrapped as inline. 4.2 用户输入通过 <kbd> 标签标记用户通过键盘输入的内容。 To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd> 4.3 代码块多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。 <pre><p>Sample text here...</p></pre> 还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。 4.3 变量通过 <var> 标签标记变量。 <var>y</var> = <var>m</var><var>x</var> + <var>b</var> 4.4 程序输出通过 <samp> 标签来标记程序输出的内容。 <samp>This text is meant to be treated as sample output from a computer program.</samp> 5 表格 5.1 基本为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 <table class="table">...</table> 5.2 条纹状表格 <table class="table table-striped">...</table> 5.3 带边框的表格 <table class="table table-bordered">...</table> 5.4 鼠标悬停 <table class="table table-hover">...</table> 5.5 紧缩表格 <table class="table table-condensed">...</table> 5.6 状态类通过这些状态类可以为行或单元格设置颜色。 Class 描述 .active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作 5.7 响应式表格将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。 6 表单 6.1 基本实例单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。 <form><div class="form-group"><label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"></div><div class="form-group"><label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"></div><div class="form-group"><label for="exampleInputFile">File input</label><input type="file" id="exampleInputFile"><p class="help-block">Example block-level help text here.</p></div><div class="checkbox"><label><input type="checkbox"> Check me out</label></div><button type="submit" class="btn btn-default">Submit</button></form> 6.2 内联表单为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠） 6.3 水平排列的表单通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了 <form class="form-horizontal"><div class="form-group"><label for="inputEmail3" class="col-sm-2 control-label">Email</label><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div></div><div class="form-group"><label for="inputPassword3" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><div class="checkbox"><label><input type="checkbox"> Remember me</label></div></div></div><div class="form-group"><div class="col-sm-offset-2 col-sm-10"><button type="submit" class="btn btn-default">Sign in</button></div></div></form> 6.4 表单控件输入框包括大部分表单控件、文本输入域控件，还支持所有 HTML5 类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。只有正确设置了 type 属性的输入控件才能被赋予正确的样式。文本域支持多行文本的表单控件。可根据需要改变 rows 属性。多选和单选框默认样式 <div class="checkbox"><label><input type="checkbox" value="">Option one is this and that—be sure to include why it's great</label></div><div class="checkbox disabled"><label><input type="checkbox" value="" disabled>Option two is disabled</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option one is this and that—be sure to include why it's great</label></div><div class="radio"><label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option two can be something else and selecting it will deselect option one</label></div><div class="radio disabled"><label><input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>Option three is disabled</label></div> 内联单选和多选框 <label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox1" value="option1"> 1</label><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox2" value="option2"> 2</label><label class="checkbox-inline"><input type="checkbox" id="inlineCheckbox3" value="option3"> 3</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2</label><label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3</label> 不带文本的Checkbox 和 radio <label><input type="checkbox" id="blankCheckbox" value="option1" aria-label="..."></label></div><div class="radio"><label><input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."></label></div> 下拉列表 <select class="form-control"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select> 静态内容如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可 <form class="form-horizontal"><div class="form-group"><label class="col-sm-2 control-label">Email</label><div class="col-sm-10"><p class="form-control-static">email@example.com</p></div></div><div class="form-group"><label for="inputPassword" class="col-sm-2 control-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword" placeholder="Password"></div></div></form> 帮助文字 <label class="sr-only" for="inputHelpBlock">Input with help text</label><input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">...<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> 校验状态 Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。使用时，添加 .has-warning、.has-error或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。 <div class="form-group has-success"><label class="control-label" for="inputSuccess1">Input with success</label><input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2"><span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span></div><div class="form-group has-warning"><label class="control-label" for="inputWarning1">Input with warning</label><input type="text" class="form-control" id="inputWarning1"></div><div class="form-group has-error"><label class="control-label" for="inputError1">Input with error</label><input type="text" class="form-control" id="inputError1"></div><div class="has-success"><div class="checkbox"><label><input type="checkbox" id="checkboxSuccess" value="option1">Checkbox with success</label></div></div><div class="has-warning"><div class="checkbox"><label><input type="checkbox" id="checkboxWarning" value="option1">Checkbox with warning</label></div></div><div class="has-error"><div class="checkbox"><label><input type="checkbox" id="checkboxError" value="option1">Checkbox with error</label></div></div> 添加额外的图标你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可 <div class="form-group has-success has-feedback"><label class="control-label" for="inputSuccess2">Input with success</label><input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status"><span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span><span id="inputSuccess2Status" class="sr-only">(success)</span></div> 控件尺寸通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg- 类似的类可以为控件设置宽度。高度尺寸创建大一些或小一些的表单控件以匹配按钮尺寸 <input class="form-control input-lg" type="text" placeholder=".input-lg"><input class="form-control" type="text" placeholder="Default input"><input class="form-control input-sm" type="text" placeholder=".input-sm"><select class="form-control input-lg">...</select><select class="form-control">...</select><select class="form-control input-sm">...</select> 水平排列的表单组的尺寸通过添加 .form-group-lg 或 .form-group-sm 类，为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。 <form class="form-horizontal"><div class="form-group form-group-lg"><label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label><div class="col-sm-10"><input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input"></div></div><div class="form-group form-group-sm"><label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label><div class="col-sm-10"><input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input"></div></div></form> 7 按钮 7.1 可作为按钮使用的标签或元素为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式 <a class="btn btn-default" href="" role="button">Link</a><button class="btn btn-default" type="submit">Button</button><input class="btn btn-default" type="button" value="Input"><input class="btn btn-default" type="submit" value="Submit"> 7.2 预定义样式 <button type="button" class="btn btn-default">（默认样式）Default</button><button type="button" class="btn btn-primary">（首选项）Primary</button><button type="button" class="btn btn-success">（成功）Success</button><button type="button" class="btn btn-info">（一般信息）Info</button><button type="button" class="btn btn-warning">（警告）Warning</button><button type="button" class="btn btn-danger">（危险）Danger</button><button type="button" class="btn btn-link">（链接）Link</button> 7.3 尺寸需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。 7.4 激活状态添加 .active 类 7.5 禁用状态为 <button> 元素添加 disabled 属性，使其表现出禁用状态。为基于 <a> 元素创建的按钮添加 .disabled 类。 8 图片 8.1 响应式图片在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，从而让图片在其父元素中更好的缩放。如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center <img src="..." class="img-responsive" alt="Responsive image"> 8.2 图片形状 <img src="..." alt="..." class="img-rounded"><img src="..." alt="..." class="img-circle"><img src="..." alt="..." class="img-thumbnail"> 9 辅助类 9.1 文本颜色 <p class="text-muted">...</p><p class="text-primary">...</p><p class="text-success">...</p><p class="text-info">...</p><p class="text-warning">...</p><p class="text-danger">...</p> 9.2 背景色 <p class="bg-primary">...</p><p class="bg-success">...</p><p class="bg-info">...</p><p class="bg-warning">...</p><p class="bg-danger">...</p> 9.3 三角符号 <span class="caret"></span> 9.4 浮动 <div class="pull-left">...</div><div class="pull-right">...</div> 9.5 让内容块居中 <div class="center-block">...</div> 9.6 清除浮动通过为父元素添加 .clearfix 类可以很容易地清除浮动（float） <div class="clearfix">...</div> 9.7 显示或隐藏内容 <div class="show">...</div><div class="hidden">...</div> 9.10 图片替换使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。 <h1 class="text-hide">Custom heading</h1> 10 响应式工具 10.1 不同视口下隐藏显示 .visible-xs- .visible-sm- .visible-md- .visible-lg- .hidden-xs .hidden-sm .hidden-md .hidden-lg.visible--block .visible--inline .visible--inline-block 10.2 打印类 .visible-print-block.visible-print-inline.visible-print-inline-block.hidden-print 打印机下隐藏本篇文章为转载内容。原文链接：https://blog.csdn.net/m0_67155975/article/details/123351126。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-10-18 14:41:25

150

转载

Netty

Netty框架中CannotFindServerSelection异常：服务器地址配置错误与通道类型匹配详解

...pGroup(); Bootstrap bootstrap = new Bootstrap(); bootstrap.group(group) .channel(NioSocketChannel.class) // 指定通道类型 .handler(new ChannelInitializer() { @Override protected void initChannel(SocketChannel ch) throws Exception { ch.pipeline().addLast(new StringDecoder(), new StringEncoder(), new SimpleClientHandler()); } }); // 错误的服务器地址配置方式（未指定服务器地址） bootstrap.connect(); // 这里没有提供服务器地址和端口，将会导致"CannotFindServerSelection"异常 // 正确的服务器地址配置方式 bootstrap.connect(new InetSocketAddress("localhost", 8080)); // 提供具体的服务器地址和端口上述代码中，错误的bootstrap.connect()调用并未传入任何服务器地址信息，因此会触发异常。而正确的做法是提供一个InetSocketAddress对象，包含目标服务器的IP地址和端口号。 3. 地址类型的影响此外，除了确保服务器地址已正确设置外，还需注意的是地址类型的选择。例如，在上述代码中，我们使用了NioSocketChannel作为通信通道，对应的服务器地址类型应为InetSocketAddress。如果你的应用恰好需要用到Unix Domain Socket或者其他一些特别的地址类型，那你就得相应地“变通”一下，调整你的地址类型和通道实现方式，就像是在玩拼图游戏一样，不同的场景要选用不同的拼图块儿。 java // 使用Unix Domain Socket的场景 bootstrap.channel(UnixSocketChannel.class); bootstrap.connect(new DomainSocketAddress("/path/to/socket")); 4. 思考与探讨面对“CannotFindServerSelection”这样的问题，我们不仅要学会从错误信息中找出关键线索，更要深刻理解Netty框架的工作原理，以确保在配置环节做到万无一失。这就像是平时计划出门旅行一样，不仅得清楚自己要奔向哪个具体的地方（服务器地址），还必须挑对最合适的座驾或交通工具（通道类型），才能一路顺风、顺利到达目的地。总结来说，当你在使用Netty时遇到“CannotFindServerSelection找不到服务器选择策略”的问题时，别忘了检查两点：一是是否设置了确切的服务器地址；二是所使用的通道类型与地址类型是否匹配。只要把这两个关键点搞定了，咱们就能轻轻松松解决这个麻烦，确保咱们的网络编程之路一路绿灯，畅通无阻地向前冲。

2023-06-18 15:58:19

172

初心未变

Bootstrap

Bootstrap 5 下拉菜单无法自动收回的解决方案：正确引入JavaScript库与初始化交互功能

使用 Bootstrap 5 创建下拉菜单后无法收回？问题解析与解决之道引言 Bootstrap，这个广受欢迎的前端框架以其强大的响应式设计和丰富的组件库深受开发者喜爱。不过，在实际用起来的时候，咱们可能会碰到一些小状况，就像这样：当用户点击创建的那个下拉菜单，菜单是会顺利打开，但是呢，它却不太听话，不会自己乖乖地收回去。这无疑影响了用户体验，让人略感困扰。本文将深入探讨这一现象，并通过实例代码一步步带你找到解决方案。问题描述与重现 1. 下拉菜单的基本实现首先，我们先来看看如何用 Bootstrap 5 创建一个基础的下拉菜单： html 下拉菜单选项一选项二选项三这段代码会生成一个按钮，点击后会展开下拉菜单，但如果没有正确的 JavaScript 配置，菜单可能无法在点击外部区域或选择菜单项后自动收回。 2. 无法收回的问题重现当你尝试以上代码并发现下拉菜单在打开后无法自动关闭时，那很可能是因为你尚未引入或者正确配置 Bootstrap 的 JavaScript 插件。Bootstrap 的很多交互功能都需要依赖 jQuery 和 Popper.js 来实现动态效果。解决方案 3. 引入必要的 JavaScript 库确保你的项目已经正确引入了 jQuery、Popper.js 以及 Bootstrap 的 JavaScript 文件。例如： html 4. 初始化下拉菜单插件 Bootstrap 5 中的下拉菜单需要手动初始化其 JavaScript 功能。你可以在文档加载完毕后通过调用 bootstrap.Dropdown.getInstance 或 bootstrap.Dropdown.getOrCreateInstance 方法来初始化下拉菜单： javascript document.addEventListener('DOMContentLoaded', function () { var dropdowns = document.querySelectorAll('.dropdown-toggle') Array.from(dropdowns).forEach(function (dropdown) { bootstrap.Dropdown.getOrCreateInstance(dropdown) }) }) 上述代码会在页面加载完成后对所有带有 .dropdown-toggle 类名的元素进行下拉菜单初始化操作，这样一来，下拉菜单就可以正常地展开和收回了。总结通过上面的示例代码和解析，我们可以看到，使用 Bootstrap 创建下拉菜单时，不仅需要注意 HTML 结构，还需正确引入并初始化相关的 JavaScript 插件。当碰到“下拉菜单顽固不肯收回去”的状况时，咱们得淡定地、一步步地审查脚本的引用情况和初始化步骤，这样才能准确无误地找到问题的藏身之处。在编程这个领域里，每一个小细节都像一块积木一样重要，你可别小瞧了那些看似不起眼的小问题，它们就像隐藏在机器王国里的捣蛋鬼，随时可能给你惹出大乱子来。因此，让我们在探索与实践中，不断积累经验，提升技能，享受解决问题的乐趣吧！

2023-11-22 18:24:59

481

寂静森林_

转载文章

[转载]RPC调用超时中断机制的实现

...xception {Bootstrap bootstrap = new Bootstrap();bootstrap.group(new NioEventLoopGroup()).channel(NioSocketChannel.class).option(ChannelOption.SO_KEEPALIVE, true).handler(new ChannelInitializer<SocketChannel>() {@Overrideprotected void initChannel(SocketChannel socketChannel) throws Exception {// 处理来自服务端的返回结果socketChannel.pipeline().addLast(new ReceiveHandle());} });ChannelFuture cf = bootstrap.connect("127.0.0.1", 3344).sync();channel = cf.channel();}//请求服务端public Object call(Request request) {//此类是保证调用超时中断的核心类RequestTask requestTask = new RequestTask();//将请求放入请求工厂，使用请求唯一标识seq,用于辨识服务端返回的对应的响应结果RequestFactory.put(request.getSeq(), requestTask);channel.writeAndFlush("hello");//此步是返回response，超时即中断return requestTask.getResponse(request.getTimeOut());} } 其中Request是请求参数，里面有timeout超时时间，以及向服务端请求的参数 public class Request {private static final UUID uuid = UUID.randomUUID();private String seq = uuid.toString();private Object object;private long timeOut;public Object getObject() {return object;}public Request setObject(Object object) {this.object = object;return this;}public String getSeq() {return seq;}public long getTimeOut() {return timeOut;}public Request setTimeOut(long timeOut) {this.timeOut = timeOut;return this;} } 核心的RequestTask类，用于接受服务端的返回结果，超时中断 public class RequestTask {private boolean isDone = Boolean.FALSE;private ReentrantLock lock = new ReentrantLock();private Condition condition = lock.newCondition();Object response;//客户端请求服务端后，立即调用此方法获取返回结果，timeout为超时时间public Object getResponse(long timeOut) {if (!isDone) {try {lock.lock();//此步等待timeout时间，阻塞，时间达到后，自动执行，此步是超时中断的关键步骤if (condition.await(timeOut, TimeUnit.MILLISECONDS)) {if (!isDone) {return new TimeoutException();}return response;} } catch (InterruptedException e) {e.printStackTrace();} finally {lock.unlock();} }return response;}public RequestTask setResponse(Object response) {lock.lock();try{//此步是客户端收到服务端的响应结果后，写入responsethis.response = response;//并唤起上面方法的阻塞状态，此时阻塞结束，结果正常返回condition.signal();isDone = true;}finally{lock.unlock();}return this;}public boolean isDone() {return isDone;}public RequestTask setDone(boolean done) {isDone = done;return this;} } ReceiveHandle客户端接收到服务端的响应结果处理handle public class ReceiveHandle extends SimpleChannelInboundHandler {protected void channelRead0(ChannelHandlerContext channelHandlerContext, Object o) throws Exception {Response response = (Response) o;//通过seq从请求工厂找到请求的RequestTaskRequestTask requestTask = RequestFactory.get(response.getSeq());//将响应结果写入RequestTaskrequestTask.setResponse(response);} } RequestFactory请求工厂 public class RequestFactory {private static final Map<String, RequestTask> map = new ConcurrentHashMap<String, RequestTask>();public static void put(String uuid, RequestTask requestTask) {map.put(uuid, requestTask);}public static RequestTask get(String uuid) {return map.get(uuid);} } 注：本人利用业余时间手写了一套轻量级的rpc框架，里面有用到 https://github.com/zhangta0/bigxiang 本篇文章为转载内容。原文链接：https://blog.csdn.net/CSDNzhangtao5/article/details/103075755。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-10-05 16:28:16

转载

转载文章

[转载]jstree插件对树操作增删改查的使用

...stree.com bootstrap官方地址：https://v3.bootcss.com font-awesome官方地址：http://www.fontawesome.com.cn/faicons/ github项目地址：https://github.com/chengchuanqiang/jstreeDemo 2、jstreedemo主要文件 2.1、html页面代码 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jstree demo</title><link rel="stylesheet" href="jstree/dist/themes/default/style.min.css" /><link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" /> </head><body><div class="container"> <div class="row" style="height: 100px;"></div><div class="row"><div > <button class="btn btn-info" onclick="node_create()"> 新增 </button><button class="btn btn-info" onclick="node_rename()"> 编辑</button><button class="btn btn-info" onclick="node_delete()"> 删除</button></div></div><div class="row" style="height: 5px;"></div><div class="row"> <div class="col-md-3">  <div class="input-group row"> <span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-screenshot"></i></span> <input type="text" class="form-control" placeholder="请输入功能名称..." id="search_ay" aria-describedby="basic-addon1"> </div>  <div id="jstree_demo_div" class="row"> </div> </div> <div lass="col-md-9"> <button class="btn btn-tab" var='json/data.json'>data.json</button>  <button class="btn btn-tab" var='json/data2.json'>data2.json</button>  <button class="btn refresh "><i class="glyphicon glyphicon-refresh"></i></button>  </div> </div> </div> <script src="jquery/jquery.min.js"></script><script src="jstree/dist/jstree.min.js"></script><script src="jstreeDemo.js?20180125"></script></body></html> 2.2、jstreeDemo.js代码 function jstree_fun(url){var $tree = $("jstree_demo_div").jstree({"core":{//'multiple': false, // 是否可以选择多个节点//"check_callback": true, // 允许拖动菜单唯一右键菜单"check_callback" : true,//设置为true,当用户修改数时,允许所有的交互和更好的控制(例如增删改)"themes" : { "stripes" : true },//主题配置对象,表示树背景是否有条带"data" : {//'url' : url,//'data' : function(node){//return { 'id' : node.id };//}"url" : url,"dataType" : "json"},"check_callback" : function(operation, node, node_parent, node_position, more){if(operation === "move_node"){var node = this.get_node(node_parent);if(node.id === ""){alert("根结点不可以删除");return false;}if(node.state.disabled){alert("禁用的不可以删除");return false;} }else if(operation === "delete_node"){var node = this.get_node(node_parent);if(node.id === ""){alert("根结点不可以删除");return false;} }return true;} },"plugins": [ //插件 "search", //允许插件搜索 // "sort", //排序插件 "state", //状态插件 "types", //类型插件 "unique", //唯一插件 "wholerow", //整行插件"contextmenu"],types:{ "default": { //设置默认的icon 图 "icon": "glyphicon glyphicon-folder-close", } } });$tree.on("open_node.jstree", function(e,data){ //监听打开事件var currentNode = data.node; data.instance.set_icon(currentNode, "glyphicon glyphicon-folder-open"); });$tree.on("close_node.jstree", function(e,data){ //监听关闭事件 var currentNode = data.node; data.instance.set_icon(currentNode, "glyphicon glyphicon-folder-close"); });$tree.on("activate_node.jstree", function(e, data){var currentNode = data.node; //获取当前节点的json .node //alert(currentNode.a_attr.id) //alert(currentNode.a_attr.href) //获取超链接的 .a_attr.href "链接" .a_attr.id ID //alert(currentNode.li_attr.href) //获取属性的 .li_attr.href "链接" .li_attr.id ID });// 创建$tree.on("create_node.jstree", function(e, data){alert("创建node节点");});// 修改$tree.on("rename_node.jstree", function(e, data){alert("修改node节点");});// 删除$tree.on("delete_node.jstree", function(e, data){alert("删除node节点");});// 查询节点名称var to = false;$("search_ay").keyup(function(){if(to){clearTimeout(to);}to = setTimeout(function(){$tree.jstree(true).search($('search_ay').val()); //开启插件查询后使用这个方法可模糊查询节点 },250);});$('.btn-tab').click(function(){ //选项事件 //alert($(this).attr("var")) $tree.jstree(true).destroy(); //可做联级 $tree = jstree_fun($(this).attr("var"));//可做联级 //alert($(this).attr("var")) }); $('.refresh').click(function(){ //刷新事件 $tree.jstree(true).refresh () }); return $tree; }function node_create(){var ref = $("jstree_demo_div").jstree(true);var sel = ref.get_selected();if(!sel.length){alert("请先选择一个节点");return;}sel = sel[0];sel = ref.create_node(sel);if(sel){ref.edit(sel); } }function node_rename(){var ref = $("jstree_demo_div").jstree(true);var sel = ref.get_selected();if(!sel.length){alert("请先选择一个节点");return;}sel = sel[0];ref.edit(sel);}function node_delete(){var ref = $("jstree_demo_div").jstree(true);var sel = ref.get_selected();if(!sel.length){alert("请先选择一个节点");return;}sel = sel[0];if(ref.get_node(sel).parent==''){alert("根节点不允许删除");return;}ref.delete_node(sel);}// 初始化操作function init(){var $tree = jstree_fun("json/data.json");}init(); 3、图片效果展示本篇文章为转载内容。原文链接：https://blog.csdn.net/qq_27717967/article/details/79167605。该文由互联网用户投稿提供，文中观点代表作者本人意见，并不代表本站的立场。作为信息平台，本站仅提供文章转载服务，并不拥有其所有权，也不对文章内容的真实性、准确性和合法性承担责任。如发现本文存在侵权、违法、违规或事实不符的情况，请及时联系我们，我们将第一时间进行核实并删除相应内容。

2023-09-08 13:23:58

转载

Spark

Spark与Kafka集成：实时处理海量数据流

...t-topic --bootstrap-server localhost:9092 --replication-factor 1 --partitions 1 4.2 发送数据到Kafka 接下来，我们可以编写一个简单的脚本来向Kafka的主题中发送一些数据。这里我们使用Python的kafka-python库来实现。 python from kafka import KafkaProducer producer = KafkaProducer(bootstrap_servers='localhost:9092') for _ in range(10): message = "Hello, Kafka!".encode('utf-8') producer.send('test-topic', value=message) print("Message sent:", message.decode('utf-8')) producer.flush() producer.close() 4.3 使用Spark读取Kafka数据现在，我们来编写一个Spark程序，用于读取刚才发送到Kafka中的数据。这里我们使用Spark的Structured Streaming API。 scala import org.apache.spark.sql.SparkSession val spark = SparkSession.builder.appName("SparkKafkaIntegration").getOrCreate() val df = spark.readStream .format("kafka") .option("kafka.bootstrap.servers", "localhost:9092") .option("subscribe", "test-topic") .load() val query = df.selectExpr("CAST(value AS STRING)") .writeStream .outputMode("append") .format("console") .start() query.awaitTermination() 这段代码会启动一个Spark应用程序，从Kafka的主题中读取数据，并将其打印到控制台。 4.4 实时处理接下来，我们可以在Spark中对数据进行实时处理。例如，我们可以统计每秒钟接收到的消息数量。 scala import org.apache.spark.sql.functions._ val countDF = df.selectExpr("CAST(value AS STRING)") .withWatermark("timestamp", "1 minute") .groupBy( window($"timestamp", "1 minute"), $"value" ).count() val query = countDF.writeStream .outputMode("complete") .format("console") .start() query.awaitTermination() 这段代码会在每分钟的时间窗口内统计消息的数量，并将其输出到控制台。 5. 总结与反思通过这次实战，我们成功地将Spark与Kafka进行了集成，并实现了数据的实时处理。虽然过程中遇到了一些挑战，但最终还是顺利完成了任务。这个经历让我明白，书本上的知识和实际动手做真是两码事。不一次次去试，根本没法真正搞懂怎么用这门技术。希望这次分享对你有所帮助，也期待你在实践中也能有所收获！如果你有任何问题或想法，欢迎随时交流讨论。

2025-03-08 16:21:01

笑傲江湖

Kafka

Kafka命名规范与组织结构剖析及实战演练

...umer.sh --bootstrap-server localhost:9092 --topic user_events --group my_consumer_group 消费者组的设计理念是为了实现负载均衡和故障恢复。比如说，如果有两个小伙伴在一个小组里，系统就会帮他们自动分配任务（也就是主题的分区），这样大家就不会抢来抢去，重复干同样的活儿啦！而且呢，要是有个消费者挂掉了或者出问题了，其他的消费者就会顶上来，接手它负责的那些分区，接着干活儿，完全不受影响。 --- 3. 组织结构 Kafka的大脑与四肢 3.1 集群（Cluster）：Kafka的心脏 Kafka集群是由多个Broker组成的，Broker是Kafka的核心组件，负责存储和转发消息。一个Broker就是一个节点，多个Broker协同工作，形成一个分布式的系统。 java // 启动Kafka Broker nohup kafka-server-start.sh config/server.properties & Broker的数量决定了系统的容错能力和性能。其实啊，通常咱们都会建议弄三个Broker，为啥呢？就怕万一有个家伙“罢工”了，比如突然挂掉或者出问题，别的还能顶上，整个系统就不耽误干活啦！不过，Broker的数量也不能太多，否则会增加管理和维护的成本。 3.2 Zookeeper：Kafka的大脑 Zookeeper是Kafka的协调器，它负责管理集群的状态和配置。没有Zookeeper，Kafka就无法正常运作。比如说啊，新添了个Broker（也就是那个消息中转站），Zookeeper就会赶紧告诉其他Broker：“嘿，快看看这位新伙伴，更新一下你们的状态吧！”还有呢，要是某个分区的老大换了（Leader切换了），Zookeeper也会在一旁默默记好这笔账，生怕漏掉啥重要信息似的。 java // 启动Zookeeper nohup zookeeper-server-start.sh config/zookeeper.properties & 虽然Zookeeper很重要，但它也有一定的局限性。比如，它可能会成为单点故障，影响整个系统的稳定性。因此，近年来Kafka也在尝试去掉对Zookeeper的依赖，开发了自己的内部协调机制。 3.3 日志（Log）：Kafka的四肢日志是Kafka存储消息的地方，每个分区对应一个日志文件。嘿，这个日志设计可太聪明了！它用的是顺序写入的方法，就像一条直线往前跑，根本不用左顾右盼，写起来那叫一个快，效率直接拉满！ java // 查看日志路径 cat config/server.properties | grep log.dirs 日志的大小可以通过参数log.segment.bytes来控制。默认值是1GB，你可以根据实际情况调整。要是日志文件太大了，查个东西就像在大海捞针一样慢吞吞的；但要是弄得太小吧，又老得换新的日志文件，麻烦得很，还费劲。 --- 4. 实战演练从零搭建一个Kafka环境说了这么多理论，咱们来实际操作一下吧！假设我们要搭建一个简单的Kafka环境，用来收集用户的登录日志。 4.1 安装Kafka和Zookeeper 首先，我们需要安装Kafka和Zookeeper。可以从官网下载最新的二进制包，解压后按照文档配置即可。 bash 下载Kafka wget https://downloads.apache.org/kafka/3.4.0/kafka_2.13-3.4.0.tgz 解压 tar -xzf kafka_2.13-3.4.0.tgz 4.2 创建主题和消费者接下来，我们创建一个名为login_logs的主题，并启动一个消费者来监听消息。 bash 创建主题 bin/kafka-topics.sh --create --zookeeper localhost:2181 --replication-factor 1 --partitions 3 --topic login_logs 启动消费者 bin/kafka-console-consumer.sh --bootstrap-server localhost:9092 --topic login_logs --from-beginning 4.3 生产消息最后，我们可以编写一个简单的Java程序来生产消息。 java import org.apache.kafka.clients.producer.KafkaProducer; import org.apache.kafka.clients.producer.ProducerRecord; import java.util.Properties; public class KafkaProducerExample { public static void main(String[] args) { Properties props = new Properties(); props.put("bootstrap.servers", "localhost:9092"); props.put("key.serializer", "org.apache.kafka.common.serialization.StringSerializer"); props.put("value.serializer", "org.apache.kafka.common.serialization.StringSerializer"); KafkaProducer producer = new KafkaProducer<>(props); for (int i = 0; i < 10; i++) { producer.send(new ProducerRecord<>("login_logs", "key" + i, "value" + i)); } producer.close(); } } 这段代码会向login_logs主题发送10条消息，每条消息都有一个唯一的键和值。 --- 5. 总结 Kafka的魅力在于细节好了，到这里咱们的Kafka之旅就告一段落了。通过这篇文章，我希望大家能更好地理解Kafka的命名规范和组织结构。Kafka为啥这么牛？因为它在设计的时候真是把每个小细节都琢磨得特别透。就像给主题起名字吧，分个区啦，还有消费者组怎么配合干活儿，这些地方都能看出人家确实是下了一番功夫的，真不是随便凑合出来的！当然，Kafka的学习之路还有很多内容需要探索，比如监控、调优、安全等等。其实我觉得啊，只要你把命名的规矩弄明白了，东西该怎么放也心里有数了，那你就算是走上正轨啦，成功嘛，它就已经在向你招手啦！加油吧，朋友们！ --- 希望这篇文章对你有所帮助，如果有任何疑问，欢迎随时交流哦！

2025-04-05 15:38:52

彩虹之上

JQuery插件下载

实现Bootstrap下拉列表框鼠标滑过时打开的jQuery插件

...uery插件介绍 "bootstrap-dropdown-hover"是一款针对Bootstrap框架下拉列表功能扩展的jQuery插件，旨在增强用户交互体验。原生Bootstrap的下拉菜单默认仅在用户点击时展开，而这款插件则赋予了下拉列表框新的行为特性——当鼠标光标滑过指定的下拉触发元素时，下拉菜单能够自动展开，为用户提供更为直观和便捷的操作方式。开发者无需对原始Bootstrap代码进行深度定制，只需简单地引入该插件，并遵循其使用说明配置，即可实现这一效果。通过“bootstrap-dropdown-hover”，网页设计者能够轻松提升网站导航或功能菜单的可用性，使用户在浏览过程中享受到更为流畅、响应灵敏的交互过程。点我下载文件大小：227.26 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-03-28 13:56:19

本站

JQuery插件下载

带预览模式的Bootstrap所见即所得文本编辑器

...Query插件介绍 Bootstrap-markdown-editor是一款基于jQuery开发的高效文本编辑器插件，专为Bootstrap框架设计，提供直观的所见即所得（WYSIWYG）编辑体验。它集成了Markdown语言支持，允许用户在编辑界面输入简洁的Markdown语法，并通过内置的预览模式实时查看富文本效果，极大地简化了内容创作流程。此插件的一大亮点是其图片上传功能，用户可以直接在编辑器中插入和上传图片，增强了内容编辑的便捷性。此外，还具备全屏模式切换功能，使得在编辑长文或需要更多工作空间时能够充分利用屏幕面积，提升工作效率。总之，bootstrap-markdown-editor是一个实用且功能丰富的文本编辑解决方案，不仅适用于各类网站后台的内容管理，也适合于博客、论坛等用户生成内容场景，让不具备HTML知识的用户也能轻松创建出格式丰富、排版美观的在线文档。点我下载文件大小：142.58 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-04-19 18:29:35

277

本站

JQuery插件下载

基于Bootstrap网格系统的可折叠侧边栏特效

...uery插件介绍 _bootstrap-collapsible-sidebar是一款利用Bootstrap网格系统打造的高效且灵活的可折叠侧边栏特效插件。这款插件巧妙地融合了Bootstrap框架的强大功能，通过简洁的CSS和jQuery脚本，实现了用户界面中常见的侧边栏折叠效果。无论是在桌面还是移动设备上，它都能提供流畅而直观的用户体验。用户只需简单的配置，即可轻松实现侧边栏的展开与收起，极大提升了网页的交互性和视觉吸引力。此外，由于其基于Bootstrap网格系统构建，因此能够无缝集成到现有的Bootstrap项目中，无需担心响应式设计的问题。无论是用于创建复杂的管理后台，还是简单的个人博客，_bootstrap-collapsible-sidebar都是提升网站功能性和美观性的理想选择。开发者可以快速地将这一特效应用到自己的项目中，不仅节省了开发时间，还保证了最终产品的高质量呈现。点我下载文件大小：43.45 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2025-02-08 10:32:21

本站

JQuery插件下载

基于Bootstrap3的带记事功能的全年日历插件

...uery插件介绍 _bootstrap-year-calendar是一款基于Bootstrap3开发的多功能全年日历插件。它不仅具备美观且响应式的界面设计，还融入了强大的记事功能，使用户能够轻松管理自己的日程安排。这款插件的使用方式非常简便，只需几行代码即可将其嵌入到网页中。更重要的是，你可以在特定的日期上添加备忘录，记录重要的事件或提醒事项，方便查看和管理。此外，插件提供了高度可定制化的选项，你可以自由设定高亮日期的样式，以满足不同场景下的视觉需求。同时，通过设置最大和最小日期范围，可以有效限制用户的日期选择范围，确保日历的实用性与易用性。无论你是个人用户还是企业开发者，bootstrap-year-calendar都能为你提供便捷的日历解决方案，帮助你更好地规划时间，提高工作效率。它适用于各种需要日期管理和事件记录的场景，如个人日程管理、项目进度跟踪、活动安排等。总之，这是一款集美观与实用于一体的日历插件，值得你在项目中尝试使用。_ 点我下载文件大小：333.03 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2025-02-16 20:32:00

本站

JQuery插件下载

基于bootstrap功能齐全的jQuery进度条插件

...ery插件介绍基于Bootstrap功能齐全的jQuery进度条插件——bootstrap-progressbar，是一款专为Bootstrap设计的强大工具，可无缝集成到所有版本的Bootstrap项目中。该插件利用jQuery和CSS3transition技术，实现流畅且动态的加载动画效果，以直观展示任务或进程的完成进度。它不仅能够实时更新进度条的长度来反映当前进度百分比，而且具有高度定制性，方便开发者根据实际需求调整样式和行为。通过bootstrap-progressbar，开发者可以轻松创建出美观且用户友好的进度指示器，无论是用于页面加载等待、文件上传过程还是复杂数据处理的状态反馈，都能提供出色的用户体验。只需简单配置，即可将静态进度条转化为生动活泼的交互元素，极大地提升了Bootstrap组件在表现加载状态时的视觉表现力与功能性。点我下载文件大小：550.40 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2023-10-20 09:29:14

本站

JQuery插件下载

基于bootstrap的jQuery多级列表树插件

...uery插件介绍 "bootstrap-treeview"是一款专为Bootstrap环境设计的高性能jQuery插件，主要用于构建和展示多级列表树结构。该插件充分利用了Bootstrap框架的美观与响应式特性，提供了一种直观且用户友好的方式来组织和导航层次数据。它能够优雅地呈现复杂的继承或嵌套关系，如文件目录结构、组织架构、菜单层级视图等。开发者可以通过JSON格式的数据源轻松配置和动态加载树形结构，实现对列表项的折叠、展开以及节点选择等功能。其简洁而灵活的设计风格使得bootstrap-treeview易于集成到各种Web项目中，尤其适合那些需要清晰展示层级关联信息的后台管理系统或前端交互界面。总之，bootstrap-treeview是一个功能强大且高度定制化的jQuery插件，它极大地简化了在Bootstrap基础上创建和操作多级列表树的过程，提升了用户体验和页面交互效率。点我下载文件大小：116.88 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-01-15 20:12:45

329

本站

JQuery插件下载

基于Bootstrap 3的jQuery日期时间选择器

...Query插件介绍 bootstrap-datetimepicker是一款基于Bootstrap3的jQuery插件，专为开发者提供简便的方式来集成日期和时间选择功能到他们的项目中。这款插件完美融合了Bootstrap框架的强大布局能力和jQuery的交互性，使创建美观且用户友好的日期时间选择器变得简单而高效。使用bootstrap-datetimepicker，你可以轻松地在网页上添加一个日期选择器或时间选择器，或者将两者结合起来，以满足不同的需求。它提供了丰富的配置选项，允许你自定义显示格式、初始日期、最小/最大日期等，确保日期时间选择器能够完全符合你的设计和功能要求。此外，bootstrap-datetimepicker拥有直观的用户界面，支持触摸设备，使得移动端用户体验也十分流畅。它还兼容各种现代浏览器，包括Chrome、Firefox、Safari以及IE9及以上版本，确保广泛的适用性和良好的兼容性。无论你是需要为网站添加一个日程管理功能，还是希望提升表单填写的用户体验，bootstrap-datetimepicker都是一个理想的选择。它的易用性和灵活性使其成为众多开发者首选的日期时间选择解决方案。点我下载文件大小：1.15 MB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2025-02-04 20:38:54

本站

JQuery插件下载

Bootstrap响应式tabs选项卡转下拉列表框jQuery插件

...Query插件介绍 Bootstrap响应式tabs选项卡转下拉列表框jQuery插件——bootstrap-tabdrop.js，是一款专为提高网站响应性和用户体验设计的实用工具。这款插件能够智能地将Bootstrap框架下的tabs选项卡转换为下拉菜单，以适应不同屏幕尺寸和布局需求。当你的页面在较小的屏幕上展示时，如果tabs选项卡无法在一屏内完整显示，此插件会自动将多余选项卡内容折叠至下拉菜单中，确保用户界面整洁且易于导航。通过使用bootstrap-tabdrop.js，开发者可以轻松实现响应式设计，无需繁琐的手动调整。它不仅简化了前端开发流程，还增强了网站或应用的美观度与功能性，特别是在移动设备上提供了更加流畅的用户体验。无论是个人项目还是企业级应用，这款插件都是提升网页交互性和可访问性的理想选择。安装和配置简便，只需引入相应的JavaScript和CSS文件，并根据需要进行少量的HTML结构调整即可。此外，插件兼容最新版本的Bootstrap框架，确保其功能强大且稳定可靠。对于追求高品质用户体验的开发者而言，bootstrap-tabdrop.js无疑是一个值得信赖的选择。点我下载文件大小：88.72 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-11-11 20:42:26

本站

JQuery插件下载

基于Bootstrap仿Pinterest的网格瀑布流插件

...Query插件介绍 Bootstrap-waterfall是一款专为Bootstrap框架设计的jQuery插件，其核心功能是实现类似Pinterest网站的网格瀑布流布局效果。此插件以网格形式呈现内容，尤其适用于图片或其他多尺寸元素的展示，能够智能地根据浏览器窗口大小和元素的高度动态调整布局，确保在不同屏幕尺寸下都能达到最佳视觉体验，即响应式布局。使用Bootstrap-waterfall插件非常便捷，开发者无需深入掌握复杂的布局算法，只需简单集成到项目中并进行基本配置，即可将原本单调的垂直列表转化为美观且高效的瀑布流样式。插件的核心价值在于充分利用页面空间，通过从上至下、左右排列的方式，无缝拼接高度不一的内容块，从而提高用户浏览效率与内容曝光度，增强网页整体互动性和吸引力。总之，Bootstrap-waterfall是一个实用性强、易用性高的前端工具，它让Bootstrap项目的开发人员能轻松实现具有Pinterest风格的瀑布流网格布局，大大提升了Web应用或网站的现代化界面设计水平。点我下载文件大小：609.65 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-05-30 11:09:00

282

本站

JQuery插件下载

Bootstrap谷歌Material Design风格日期时间选择器

...Query插件介绍 BootstrapMaterialDesign风格日期时间选择器是一款专门针对Bootstrap框架设计的插件，它融合了谷歌MaterialDesign的设计理念与交互规范，为用户提供了一种直观且富有现代感的日期和时间选取界面。该插件名为"bootstrap-material-datetimepicker"，旨在增强基于Bootstrap构建的Web应用的用户体验，尤其是对于扁平化设计风格有需求的项目。通过集成此插件，开发者可以轻松地在网页中添加符合MaterialDesign视觉规范的日期时间选择组件。其核心特性包括：清晰的平面化UI设计、动态过渡动画以及独特的浮动标签效果，这些元素共同营造出一种既实用又时尚的操作感受。用户不仅可以便捷地选取日期和时间，还能享受到与原生Android或iOSMaterialDesign应用类似的流畅触控体验。此外，bootstrap-material-datetimepicker插件高度灵活，支持多种自定义选项以满足不同的业务场景需求，如设置默认日期、限制可选日期范围等。无论是创建现代化的表单控件还是实现复杂的日程安排功能，这款插件都能作为有力工具，助力开发人员高效构建高质量的Web界面。点我下载文件大小：340.66 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-05-22 11:34:11

133

本站

JQuery插件下载

基于Bootstrap的炫酷jQuery slider插件

...ry插件介绍 "基于Bootstrap的炫酷jQueryslider插件是一款高度定制化的UI组件，专为增强Bootstrap框架中的滑块控件而设计。这款插件在保留Bootstrap原生slider功能的基础上，提供了丰富的视觉效果和样式自定义选项。用户可以轻松调整滑块的颜色、形状以及透明度，以适应不同网站或应用的设计风格需求。此外，它还支持tooltip功能，能够在滑动操作时展示清晰的提示信息，提升用户体验。开发者通过npm或bower包管理工具即可便捷安装该插件，并且在项目中只需引入相应的CSS和JS文件后即可开始调用。值得注意的是，尽管名为jQuery插件，但它同时支持纯JavaScript方式的操作，确保了更广泛的兼容性和灵活性。此bootstrap-slider插件专注于现代浏览器的优化体验，不支持IE9及以下版本，确保在最新及主流浏览器上能够展现出流畅且美观的交互效果。无论是在产品配置界面、数据过滤模块还是多媒体播放器中，这款插件都能为用户提供直观且具有吸引力的滑动交互体验。"总结起来，这款BootstrapjQuery滑块插件是一个功能强大且极具视觉吸引力的选择，旨在帮助开发者快速构建出既实用又符合现代审美的滑动选择器组件。点我下载文件大小：67.11 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2023-08-17 09:31:34

113

本站

JQuery插件下载

简单实用的Bootstrap3表单验证插件

...uery插件介绍 _bootstrap-validator是一款简单且实用的Bootstrap3表单验证jQuery插件。这款插件巧妙地利用了HTML5的data属性来设定验证规则，使得开发者无需编写复杂的JavaScript代码即可实现强大的表单验证功能。它支持各种常见的验证需求，包括但不限于非空检查、邮箱格式验证、URL格式验证、数字范围限制以及自定义正则表达式验证等。通过使用bootstrap-validator，开发者能够轻松地对输入字段进行即时反馈，从而提升用户体验。当用户填写表单时，插件会实时检查输入内容是否符合预设的规则，并通过视觉提示（如颜色变化或图标）来告知用户哪些字段需要修正。这种即时反馈机制有助于减少提交无效数据的情况，确保数据的一致性和准确性。此外，bootstrap-validator还提供了丰富的定制选项，允许开发者根据项目需求调整验证行为和样式。无论是改变错误消息的颜色、位置，还是添加额外的验证条件，都可以通过简单的配置来实现。这使得插件不仅易于上手，而且高度灵活，能够适应不同场景下的开发需求。总之，bootstrap-validator凭借其简洁的API、强大的功能以及良好的兼容性，成为Bootstrap框架下处理表单验证的理想选择。对于希望快速构建高效、美观表单的应用来说，它无疑是一个值得尝试的优秀工具。_ 点我下载文件大小：43.62 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2025-02-05 10:46:18

本站

JQuery插件下载

可用于触摸屏的响应式jQuery lightbox插件

...高首屏加载速度。6.Bootstrap兼容：与流行的前端框架Bootstrap无缝集成，简化了集成过程，提高了开发效率。7.多语言与定制：提供了多语言选项，方便全球用户，同时允许用户根据个人喜好定制外观和行为。8.丰富的主题：包含多种预设主题，可以轻松切换以匹配网站整体风格，满足不同设计需求。总之，这款jQuerylightbox插件不仅能满足基本的图片放大功能，还通过其全面的特性，为现代网站提供了出色的用户体验和性能，是构建现代响应式网站的理想选择。点我下载文件大小：512.50 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-05-19 15:43:58

100

本站

JQuery插件下载

基于Bootstrap仿Github样式下拉列表框插件

...Query插件介绍 Bootstrap-Dropselect是一款专为开发者打造的下拉列表框插件，其设计灵感源自于广受欢迎的Github平台，旨在提供一种既实用又美观的用户交互体验。此插件基于Bootstrap框架进行开发，完美融合了Bootstrap的简洁风格与响应式设计原则，使得下拉列表不仅在视觉上与Github风格高度一致，而且在功能上更加丰富和灵活。Bootstrap-Dropselect的核心优势在于它对原生Bootstrapdropdown进行了深度定制与优化，使得用户能够轻松集成到现有的项目中，无需担心兼容性问题。通过简单的HTML结构即可快速添加下拉菜单，用户只需调用几个关键的JavaScript函数，即可实现个性化配置，如调整样式、添加动画效果、控制列表项的显示逻辑等。插件支持多种操作模式，包括单选和多选，以及自定义选项的分组和排序，满足不同场景下的需求。此外，Bootstrap-Dropselect还考虑到了无障碍设计的需求，确保了对屏幕阅读器等辅助技术的支持，使得所有用户都能方便地使用。在性能方面，Bootstrap-Dropselect采用了轻量级的设计理念，确保即使在资源受限的设备上也能流畅运行，同时保持高效的数据处理能力。插件的代码结构清晰，易于维护和扩展，方便开发者根据项目需求进行定制化开发。总之，Bootstrap-Dropselect是一个功能强大且易于集成的下拉列表框解决方案，它不仅能够提升用户体验，还能增强网站或应用的专业形象，是现代前端开发中不可或缺的工具之一。点我下载文件大小：166.32 KB 您将下载一个JQuery插件资源包，该资源包内部文件的目录结构如下：本网站提供JQuery插件下载功能，旨在帮助广大用户在工作学习中提升效率、节约时间。本网站的下载内容来自于互联网。如您发现任何侵犯您权益的内容，请立即告知我们，我们将迅速响应并删除相关内容。免责声明：站内所有资源仅供个人学习研究及参考之用，严禁将这些资源应用于商业场景。若擅自商用导致的一切后果，由使用者承担责任。

2024-08-08 11:14:19

本站

AngularJS

AngularJS中'$rootScope'报错：'noctrl Controller '0' not found'问题的控制器注册与模块排查及解决方案

...; angular.bootstrap(document, ['myApp']); 在这个例子中，我们定义了一个名为 MyCtrl 的控制器，并将其添加到了名为 myApp 的模块中。接下来，咱们就用 angular.bootstrap 这个神奇的小玩意儿启动咱们的应用程序，同时告诉它我们要用哪个模块来开启这场奇妙的旅程。如果我们的控制器名称拼写错误或者大小写错误，那么 AngularJS 就无法找到这个控制器，从而抛出上述错误。五、结论总的来说，当我们遇到 AngularJS $rootScope 报错：“noctrl Controller '0' not found”的问题时，我们应该仔细检查我们的代码，确保我们的控制器名称正确，以及我们的控制器已经被正确地注册到相应的模块中。另外，咱们还可以琢磨一下用 $controllerProvider 这个家伙来注册咱们的控制器，或者灵活调整路由规则，确保它们能指向正确的控制器。这样理解就更接地气啦！六、小结以上就是我对 “AngularJS $rootScope 报错：“noctrl Controller '0' not found”的处理方式和思路的介绍。大家伙儿，我真心希望大家读完这篇文章后，以后在用 AngularJS 进行开发的时候，能绕过那些坑坑洼洼的小路，一路顺风顺水地把项目搞定，顺利完成任务。

2024-01-18 15:53:01

430

春暖花开-t

知识学习

实践的时候请根据实际情况谨慎操作。

随机学习一条linux命令：

tar -xvzf archive.tar.gz - 解压gzip压缩的tar归档包。