sevieryang

Bootstrap笔记

Bootstrap

一、 什么是Bootstrap：Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于快速开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 是由 Twitter 的 Mark Otto （马克奥托）和 Jacob Thornton （雅各布松顿）开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。
二、 环境的搭建： 
(一)	网站
1、	官方网站：getbootstrap.com
2、	中文网站：http://www.bootcss.com/
(二)	压缩包中的文件结构：可以看到已编译的 CSS 和 JS（bootstrap.*），以及已编译压缩的CSS和JS（bootstrap.min.*）。同时也包含了 Glyphicons 的字体，这是一个可选的Bootstrap主题。
 
(三)	源代码中的文件结构：
 
三、 Bootstrap页面的基本模板
 
(一)	解释说明：
1、	<meta http-equiv="X-UA-Compatible" content="IE=edge">：简单说就是让所有的IE浏览器以最高版本的IE渲染方式渲染页面，避免由于浏览器版本升级导致的不兼容问题
2、	<meta name="viewport" content="width=device-width,initial-scale=1">：作用是实现响应式布局
1)	name="viewport" 指的是移动端的浏览器，看到这段代码，马上就知道这是移动端浏览器
2)	width=device-width,指的是移动端页面的宽度等于设备的宽度
3)	initial-scale=1.0指的是页面将是原本尺寸展示，如果后面是2.0的话，就是是将页面放大两倍
3、	<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>：作用是让低版本IE浏览器支持H5标签
4、	<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>：作用是让低版本IE浏览器支持响应式布局
四、 全局CSS样式
(一)	布局容器：Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。
1、	.container 类用于固定宽度并支持响应式布局的容器。
2、	.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
(二)	排版
1、	标题
1)	支持所有的标题标签h1-h6，也支持<small></small>标签，用来创建副标题
2)	支持所有的.h1-.h6类，为的是给内联（inline）属性的文本赋予标题的样式。也支持.small类用来创建副标题
2、	页面主体：Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。通过添加 .lead 类可以让段落突出显示
3、	内联文本元素：
1)	<mark></mark>标签：标记文本（高亮显示文本），也具有mark类
2)	<del></del>标签：在文本上显示删除线，用来包含要删除的文本
3)	<s></s>标签：在文本上显示删除线，用来包含无用的文本
4)	<ins></ins>标签：在文本下面显示下划线，表示插入的文本
5)	<u></u>标签：在文本下面显示下划线
6)	<small></small>标签：显示小号文本，字体是包含容器的85%，也具有small类
7)	<strong></strong>标签：加粗效果，用加粗的方式强调文本
8)	<em></em>标签：倾斜效果，用倾斜的方式强调文本
4、	对齐
1)	text-left：左对齐
2)	text-center：居中对齐
3)	text-right：右对齐
4)	text-justify：两端对齐
5)	text-nowrap：不换行
5、	改变大小写
1)	text-lowercase：所有字母小写
2)	text-uppercase：所有字母大写
3)	text-capitalize：首字母大写
6、	缩略语
1)	基本缩略语：使用<abbr></abbr>标签定义缩略语，当鼠标悬停在缩写和缩写词上时就会显示完整内容，必须使用title属性，格式：<abbr  title=“全拼格式”>简写</abbr>，示例：<abbr  title=”property”>pro</abbr>
2)	首字母缩略语：为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。示例：<abbr title="HyperText Mark Language" class="initialism">HTML</abbr>
7、	地址：利用<address></address>标签，默认为 display:block;，需要使用标签来为封闭的地址文本添加换行。示例如下
 
8、	引用
1)	默认样式的引用：<blockquote></blockquote>标签，增加了左边线，设定了字体大小和内外边距
2)	反向：通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。示例：<blockquote  class=”blockquote-reverse”>引用内容</blockquote>
3)	多重引用样式：通过添加<footer>标签来标明引用来源。来源的名称可以包裹进 <cite>标签中。
 
9、	列表
1)	.list-styled类：默认样式
2)	.list-unstyled类：移出列表默认样式，不能继承，这是针对直接子元素的，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式
3)	.list-inline类：使li变为行内块元素
4)	.dl- horizontal：可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。
 
(三)	代码
1、	内联代码：<code></code>
 
2、	用户输入：<kbd></kbd>
 
3、	基本代码块：<pre></pre>标签，还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。
 
4、	变量：<var></var>标签
 
5、	程序输出：<samp></samp>标签，通过 <samp> 标签来标记程序输出的内容
(四)	表格
1、	基本实例（.table类）：为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。
2、	条纹状表格（table-striped类）：通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式，可以和上面的类结合使用，IE8及以下IE浏览器不支持
3、	带边框表格（table-bordered类）：添加 .table-bordered 类为表格和其中的每个单元格增加边框。
4、	鼠标悬停（table-hover类）：通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
5、	紧缩表格（table- condensed类）：通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
6、	状态类：通过这些状态类可以为行或单元格设置颜色
 
7、	sr-only类：隐藏内容
8、	响应式表格：将任何.table元素包裹在.table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。在手机上面会出现可滑动效果
 
(五)	栅格系统：
1、	什么是栅格系统：栅格系统是指，将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap的栅格系统采用了1-12列的模式，并且通过比例计算来设置你定义的列宽。例如你这一行想要采用两列的布局模式，那么每列的宽度都为外容器的50%，不管你用什么设备浏览，它都会采用这样的比例进行展示。不过如果当设备宽度小于你设定的最小宽度，那么这两列就会并排成为一列。
2、	如何使用栅格系统：在Bootstrap中使用栅格系统非常简单方便，只需要在你的div中引入它们已经定义好的类即可。我们先看看Bootstrap有几种栅格类可以使用：
1)	1. .col-xs-* 这是超小屏幕类（<768px），类似手机等设备。
2)	2. .col-ms-* 这是小屏幕设备类（≥768px且<992px），类似平板设备。
3)	3. .col-md-* 这是中型设备类（≥992px且<1200px）。
4)	4. .col-lg-* 这是大型设备类（≥1200px）。
 
3、	注意事项：
1)	栅格系统总每一行上最多为12列，如果超过12，则自动换行
2)	在使用col-md-*时，可以通过设置*号的值，调节每一个格子所在的宽度，如col-md-3表示该格子占3个格子的宽度
3)	如果格子中的内容过多，那么格子的高度会自动增高
4)	如果需要将格子进行偏移，那么可以设置col-md-offset-偏移量，如<div  class=”col-md-3   col-md-offset-5”></div>表示向右偏移5个格子的距离
5)	格子中可以嵌套其它的格式
6)	颠倒格子的位置，可以使用如下格式
 
7)	为了响应多种设备，可以给div设置多个类，如<div  class=”col-md-6  col-xs-3></div>
(六)	表单：单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。
1、	创建垂直或基本表单步骤
1)	向父 <form> 元素添加 role="form"。
2)	把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。
3)	向所有的文本元素 <input>、<textarea> 和 <select> 添加 class ="form-control" 。
2、	创建内联表单：如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加 class .form-inline。在使用时一定要加label标签，否则屏幕阅读器无法正确识别，如果不想让它显示，可以给它设置sr-only类
3、	创建水平表单步骤：通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。
1)	向父 <form> 元素添加 class .form-horizontal。
2)	把标签和控件放在一个带有 class .form-group 的 <div> 中。
3)	向标签添加 class .control-label。control-label类的作用是设置label中的内容为右对齐（宽度够大）。另外将复选框、单选框放到一个div中，并给这个div设置checkBox类或radio类
 
4、	被支持的控件：Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select
1)	复选框（Checkbox）和单选框（Radio）控件注意事项
a)	需要结合label标签使用，将文字描述和表单标签用label标签包含起来
b)	如果需要采用默认样式（垂直排列），那么可以将控件包含在div中，并给这个div添加checkbox或者radio类
c)	如果需要内联的样式，可以将单选框和复选框只用一个div包含，该div可以设置form-group类，在写label标签时，给该标签添加checkbox-inline类或者radio-inline类
5、	下拉菜单：也可以设置form-control
6、	文本域：也可以设置form-control
7、	静态控件：当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用 class .form-control-static。
8、	表单控件状态
1)	只读状态：设置readonly属性，可以提交数据
2)	禁用状态：给表单元素添加disabled属性，不可以提交数据
3)	禁用字段集fieldset：给fieldset添加disabled属性，那么该字段集下面的所有表单元素都会被禁用
4)	验证状态：Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。
5)	表单帮助文本：Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 <input> 后使用 .help-block 

6)	控件尺寸：可以通过栅格控制
a)	调整高度：可以给表单元素设置input-lg类（高）或者input-sm类（矮），也可以给表单元素所在的div（就是指设置了form-group类的div）设置form-group-lg类或者form-group-sm类，那么该容器下面的表单元素和label标签都会受到影响
b)	调整宽度：可以使用栅格
(七)	按钮：可以通过给button、input、a标签添加类来使其变为按钮效果，但是建议使用button标签实现按钮效果，避免跨浏览器的不一致性，如果是用a作为标签，那么建议给a添加role=“button”属性。表示它不是用来进行页面间的跳转的。常用类如下
 
(八)	图片
1、	常用类如下
1)	.img-rounded：添加 border-radius:6px 来获得图片圆角。
2)	.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
3)	.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
2、	响应式图片：通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。.img-responsive 类将 max-width: 100%; 和 height: auto;
3、	如果需要图片居中，可以给图片设置center-block类
(九)	辅助类
1、	文本：
 
2、	背景
 
3、	关闭按钮：就是给标签添加close类，如<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
4、	三角符号：给span添加caret类
5、	快速浮动
1)	pull-left类：左浮动
2)	pull-right类：有浮动
6、	让内容块居中：给元素设置center-block类
7、	clearfix类：清除浮动
8、	显示与隐藏：
1)	show类：显示
2)	hidden类：隐藏，不占位
9、	text-hide类：将页面元素所包含的文本内容替换为背景图
(十)	响应式工具：这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。
 





五、 	组件
(一)	Glyphicons 字体图标：包括250多个来自 Glyphicon Halflings 的字体图标
1、	使用方式：利用span标签制作图标，并为span添加类，出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。
1)	格式：<span  class=”基类   图标类”></span>
2)	示例：<span  class=” glyphicon glyphicon-signal”></span>
(二)	下拉菜单：用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。使用方式如下
1、	第一步：将下拉菜单触发器和下拉菜单都包裹在div中，其设置 .dropdown （放在btn-group中也是可以的）。也可以给div设置dropup类，此时菜单向上弹出
2、	第二步：给下拉菜单触发器添加data-toggle属性，属性值为dropdown。data-toggle="dropdown"就是向按钮之类元素添加切换下拉菜单的事件，使用data-xxx的自定义属性时先要加载bootstrap的js文件。（在使用JS文件前，先引入一个jQuery文件）
3、	第三步：给下拉菜单所在的容器（如果使用列表，就给ul或者ol设置）添加dropdown-menu类
 
4、	第四步：附加效果的设置
1)	对齐：默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。如果下拉菜单触发器也需要右对齐，那么可以给触发器和选项所在容器加pull-right类（即给dropdown类所在元素添加）
 
2)	标题：在任何下拉菜单中均可通过添加标题来标明一组动作，示例如下
 
3)	分割线：为下拉菜单添加一条分割线，用于将多个链接分组。如果需要使用分割线，给以加divider类，示例如下
 
4)	禁用的菜单项：为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。
(三)	按钮组：通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为。
1、	基本实例：btn-group类 
 
2、	按钮工具栏：把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件
 
3、	只要给 .btn-group 加上 .btn-group-* 类，就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。
 
4、	想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。
 
5、	垂直排列：让一组按钮垂直堆叠排列显示而不是水平排列（给容器设置btn-group-vertical类即可）。分列式按钮下拉菜单不支持这种方式。
1)	示例1
 
2)	示例2
 
6、	两端对齐排列的按钮组
1)	用a标签做按钮
 
2)	用button标签做按钮，必须将每个按钮包裹进一个按钮组中
 
(四)	按钮式下拉菜单：把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。
1、	单按钮下拉菜单（即上面的下拉菜单）
2、	分裂式下拉菜单
 
3、	尺寸：按钮式下拉菜单适用所有尺寸的按钮，就是给button添加类btn-尺寸，尺寸可以是lg、md、sm、xs，示例如下
 
4、	向上弹出式菜单
 
(五)	输入框组：通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。
1、	使用步骤
1)	把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中。
2)	接着，在相同的 <div> 内，在 class 为 .input-group-addon 的 <span> 内放置额外的内容。
3)	把该 <span> 放置在 <input> 元素的前面或者后面。
2、	基本实例
 
3、	输入框组的大小：可以给input-group类所在的div添加input-group-lg类和input-group-sm类进而调节尺寸
4、	作为额外元素的多选框和单选框：可以把复选框和单选插件作为输入框组的前缀或者后缀元素
 
5、	作为额外元素的按钮：可以把按钮作为输入框组的前缀或者后缀元素，这个时候您就不是添加 .input-group-addon class，您需要使用 class .input-group-btn 来包裹按钮。这是必需的，因为默认的浏览器样式不会被重写。
 
6、	作为额外元素的按钮式下拉菜单：给下拉菜单所在的div设置input-group-btn类
 
7、	作为额外元素的分裂式按钮下拉菜单
 
(六)	导航：Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
1、	步骤
1)	结构为一个无序列表，内容需要用a标签包含起来
2)	以一个带有 class .nav 的无序列表开始。给ul添加.nav的基类，并为该ul添加状态类
3)	结合jquery、js使用
 
2、	常用状态类
1)	.nav-tabs类：标签式导航菜单
2)	.nav-pills类：基本的胶囊式导航菜单，jquery事件采用点击事件
3)	.nav-stacked类：垂直的胶囊式导航菜单，在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠
4)	.nav-justified类：创建两端对齐的导航，即让标签式或胶囊式导航菜单与父元素等宽
5)	.disabled类：禁用链接，给li设置即可
6)	带有下拉菜单的标签：
a)	第一步：给li添加dropdown类
b)	第二步：给a标签添加dropdown-toggle类和data-toggle=“dropdown”属性
c)	第三步：在a标签的下面添加ul列表（注意：列表要有dropdown-menu类），即下拉菜单内容
 
(七)	导航条
1、	创建默认的导航条的步骤
1)	在文档中添加nav标签，给该标签添加navbar类、navbar-default或navbar-inverse类（这两个类的作用是设置颜色）。在nav中设置一个容器div，给它添加container或者container-fluid类
2)	设置导航条中的内容
a)	头部：用于写logo或者网站名称，方式为：在nav中插入一个div，给div设置navbar-header类，在该div中用超链接将文本包含起来，给这个超链接添加navbar-brand类，也可以放图片
b)	导航组件：使用方式同上面的导航组件相同，需要注意的是在ul中加nav类和navbar-nav类，不需要加nav-tabs或者nav-pills类
c)	表单：在nav中插入一个form标签，给这个标签添加navbar-form类，也可以添加navbar-left或者navbar-right进而调节位置，在form里面正常使用表单元素，可以参考全局CSS样式——表单模块
d)	按钮：如果按钮不在表单中，那么可以给按钮设置navbar –btn类，是按钮和其它的元素并排（注意其它的块元素要设置navbar-left或者navbar-right类，这两个类就是设置浮动效果）
e)	文本：导航栏中如果要设置文本，可以将文本用标签包含起来，然后给文本设置navbar-text类
f)	结合图标的导航链接：
 
3)	导航栏位置
a)	固定到顶部：给nav设置navbar-fixed-top类，需要给body添加至少50px的内边距，否则内容会被导航栏挡住
b)	固定到底部：给nav设置navbar-fixed-bottom类
c)	静态顶部：给nav添加navbar-static-top类
2、	路径导航：面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。面包屑导航的制作方式就是给ul或者ol添加breadcrumb类
 
(八)	分页：分页（Pagination），是一种无序列表
1、	使用步骤
1)	创建一个无序列表，给该列表添加pagination类
2)	在列表中定义li，如果需要向左和向右的箭头，可以使用&laquo;和&raquo;
2、	常用类
1)	disabled类：禁用
2)	active：激活
3)	示例
 
3、	添加尺寸
1)	pagination-lg类
2)	pagination-sm类
4、	翻页：如果您想要创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。默认情况下，链接是居中显示。在使用翻页时就是给无序列表添加pager类，而不是pagination类，常用类如下
1)	previous类：把链接向左对齐
2)	next类：把链接向右对齐
3)	disabled类：禁用，外观变淡
 
 
 
(九)	标签：标签可用于计数、提示或页面上其他的标记显示。使用 class .label 来显示标签，使用方式就是在HTML标签中添加label基类，另外也具有多个修饰类label-default、label-primary、label-success、label-info、label-warning、label-danger 
 
(十)	徽章：徽章与标签相似，主要的区别在于徽章的边角更加圆滑。徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 <span class="badge"> 添加到链接、Bootstrap 导航等这些元素上即可。
(十一)	巨幕：顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用方式：在一个容器中先添加一个div，并为其设置jumbotron类，然后在该div中添加内容，如添加h1 标签等
(十二)	页头：页面标题（Page Header）是个不错的功能，它会在网页标题四周添加适当的间距。当一个网页中有多个标题且每个标题之间需要添加一定的间距时，页面标题这个功能就显得特别有用。如需使用页面标题（Page Header），请把您的标题放置在带有 class .page-header 的 <div> 中
(十三)	缩略图：在使用缩略图时，可以将图像放在a标签或者div中，需要给他们添加thumbnail类。可以和栅格结合使用，可以结合caption类使用
(十四)	警告框：警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。使用警告框的步骤就是，在一个div中添加一个基类alert，也可以添加修饰类，如alert-info/alert-success/alert-warning/alert-danger，如需要参加一个可以关闭的警告框，那么可以在警告框中添加关闭按钮或者超链接，并为它添加close类和data-dismiss=”alert”属性
 
在警告框中如果需要超链接，可以给超链接添加alert-link类，示例如下
 
(十五)	进度条
1、	进度条的使用步骤为
1)	添加一个带有 class .progress 的 <div>。
2)	接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。
3)	添加一个带有百分比表示的宽度的 style 属性，例如 style="width: 60%"; 表示进度条在 60% 的位置。
2、	progress-bar所在的div中常用的属性
1)	aria-valuenow="60"：当前进度为60
2)	aria-valuemin="0"：最小值为0
3)	aria-valuemax=”100”：最大值为100
3、	可以为进度条添加修饰类：progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger
4、	带条纹的进度条：就是添加progress-striped
5、	带动画的进度条：就是添加active类
6、	堆叠的进度条：就是在一个progress下面添加多个progress-bar
(十六)	媒体对象：这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。
1、	使用div作为容器的使用步骤如下
1)	在文档中插入一个div，给div添加media类
2)	在div中插入一个超链接，给超链接设置media-left类（调节位置），也可以设置media-middle或者media-bottom类调节垂直位置。在超链接中包含图像，给通信设置media-object 类
3)	在div下面在插入一个div容器，给该日期设置media-body类，在该容器中插入标题标签，设置class-heading类，在head下面插入盛装文本的标签
4)	注意：可以实现相互嵌套
5)	示例
 
2、	使用列表作为容器的步骤
1)	在文档中插入一个ul或者ol列表，给该列表添加media-list类
2)	给li添加media类
3)	其它同上
4)	示例
 
(十七)	列表组：列表组件用于以列表形式呈现复杂的和自定义的内容
1、	使用步骤
1)	在ul或ol中添加类list-group
2)	在li中添加list-group-item类
2、	向列表中添加徽章：我们可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在 <li> 元素中添加 <span class="badge"> 即可
3、	向列表组添加链接：就是将ul用div替换，将li用a替换
4、	向列表组中添加自定义内容：就是在上面的基础上添加其它内容，可以添加标题标签，也可以添加盛装文本内容的p标签，标题可以用list-group-item-heading类修饰，文本内容可以用list-group-item-text修饰
(十八)	面板：面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可。每个面板都可以包含面板标题、面板主体和面板脚注
1、	面板标题，在div中设置panel-heading类，如果面板标题中包含h1-h6标签，那么也可以给这些标签添加panel-title类
2、	面板脚注：在容器中添加panel-footer类
3、	面板主体：给容器设置panel-body类
4、	使用时可以创建带语境色彩的面板，即给面板容器添加 panel-primary、panel-success、panel-info、panel-warning、panel-danger类，来设置带语境色彩的面板
5、	带表格的面板：在panel-body下面写一个表格
6、	带列表组的面板：在panel-body下面写一个列表组
(十九)	Well组件：Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well，只需要简单地把内容放在带有 class .well 的 <div> 中即可。可以通过设置well-lg和well-sm类调节尺寸
六、 JavaScript插件
(一)	过渡效果：对于简单的过渡效果，只需将 transition.js 和其它 JS 文件一起引入即可。如果你使用的是编译（或压缩）版的 bootstrap.js 文件，就无需再单独将其引入了。Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类。它被其他插件用来检查 CSS 过渡效果支持，并用来获取过渡效果。
 
(二)	模态框：模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集
1、	模态框的构成：模态框的弹窗组件需要三层 div 容器元素，分别为 modal(模态声明层)、 modal-dialog(窗口声明层)、modal-content(内容层)。在内容层里面，还有三层，分别为modal-header(头部)、modal-body(主体)、modal-footer(注脚)
2、	注意：
1)	在使用模态框时需要增加一个 id
2)	需要结合JS和jquery使用
3)	可以给modal类所在div加fade类，模态框会淡入
3、	动态模态框示例
 
4、	属性说明
1)	data-toggle=“modal”：表示触发类型为模态框，如果是data-toggle=“dropdown”则表示触发类型为下拉菜单
2)	data-target=“#myModal”：为了和JS结合，表示触发的节点
3)	data-dismiss=“modal”：使按钮具有关闭功能
4)	modal-title类：使模态框标题具有指定样式
5)	close类：具有关闭模态框的功能
6)	tabindex=-1：解决按ESC键无法关闭模态框的问题
5、	静态模态框：如果不需要结合按钮，可以采用如下方法
 
6、	模态框尺寸：模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现，尺寸为：modal-lg、modal-sm
7、	模态框的主体中可以是表单，如果在点击按钮时要向表单中传递参数，那么可以给按钮添加data-whatever属性，属性值为要传递的参数，如data-whatever=@张三，示例如下
 
8、	模态框常用方法：modal方法
1)	模态框.modal(“show”)：显示模态框
2)	模态框.modal(“hide”)：隐藏模态框
9、	模态框常用事件：show.bs.modal，show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
(三)	滚动监听：即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标
1、	两大部分：导航、主体内容
2、	常用属性：
1)	data-offset 默认值为 10，固定弄内容距滚动容器 10 像素以内， 就高亮显示所对应的菜单。推荐使用70
2)	data-spy 设置 scroll，将设置滚动容器监听
3)	data-target 设置#nav，绑定指定监听的菜单
4)	示例：
 
(四)	标签页
1、	使用步骤：
1)	创建导航，在导航里面的每个a标签中添加data-toggle=“tab”属性或者data-toggle=”pill”
2)	将所有的描述内容放到一个div中，给它设置tab-content类
3)	将每个导航对应的内容放到一个div中，给这个div设置tab-pane
4)	如果要设置动画效果，可以添加fade类
5)	默认情况下内容是不显示的，可以给它加active类
6)	可以通过如下方法，调节默认显示的项目
 
 
(五)	工具提示
1、	使用步骤
1)	在文档中插入一个标签，给该标签添加data-toggle=”tooltip”属性，并为之添加data-original-title属性，该属性的值为要显示的提示文字，也可以设置data-placement属性，该属性的作用是调节添加框出现的位置，属性值为left、right、top、bottom
2)	设置好上面内容后，需要添加js代码
3)	注意：
a)	如果既有data-original-title也有title，那么优先显示title的值
b)	显示内容时，默认是有动画效果的，如果不需要动画可以设置data-animation=“false”
4)	示例
 
(六)	弹出框：弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。可以使用a标签或者button作为触发元素
1、	常用属性
1)	data-toggle=“popover”
2)	title：设置标题
3)	data-content：设置内容
4)	data-animation：设置动画
5)	data-placement：设置位置，默认值 top，还有 bottom、left、right 和 auto。 如果auto会自行调整合适的位置，如果是auto left 则会尽量在左边显示，但左边不行就靠右边。
6)	如果使用a标签作为触发元素，那么需要给它添加role=”button”
7)	data-trigger=”focus”：设置点击旁边让弹出框消失效果
2、	JavaScript 初始化 $(触发元素).popover();
(七)	警告框：警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能
1、	使用方式：
1)	创建一个div，设置类为alert，也可以加修饰类，如alert-info
2)	在里面可以包含按钮等元素，可以给按钮设置close类和data-dismiss=”alert”属性，进而关闭警告框
(八)	按钮：
1、	加载状态：如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可
 
2、	单个切换：如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 作为其属性即可
3、	复选框：可以创建复选框组，并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换
 
 
4、	更改按钮中的内容
 
5、	常用方法
1)	button(‘reset’)：重置按钮状态，文本内容恢复为最初的内容
2)	button('loading')：当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。
3)	button(string)：该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。
(九)	Collapse：折叠（Collapse）插件可以很容易地让页面区域折叠起来
1、	使用步骤：
1)	在文档中创建一个a标签，添加属性data-toggle=”collapse”
2)	在a的下面插入一个div，设置collapse类，并设置id，让a标签的href的值为div的id
 
2、	手风琴：
 
(十)	Carousel：Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。
 
(十一)	Affix：附加导航（Affix）插件允许某个 <div> 固定在页面的某个位置。您也可以在打开或关闭使用该插件之间进行切换。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 <div> 会锁定在某个位置，不会随着页面其他部分一起滚动。
七、 编译CSS和JavaScript文件（如果对CSS样式或JS做了修改，需要重新编译）——使用Grunt作为编译系统
(一)	第一步：下载并安装node.js，因为要使用里面的npm，npm 是 node packaged modules 的简称，它的作用是基于 node.js 管理扩展包之间的依赖关系。
(二)	第二步：使用npm   install  -g  grunt-cli命令安装grunt-cli
(三)	第三步：通过DOS命令进入bootstrap的安装环境（源码文件夹），执行npm  install命令
(四)	第四步：当安装完毕后，可以使用grunt  dist里面编译css和JavaScript文件（会重新生成dist目录）
八、 LESS的使用
(一)	第一步：创建less文件
(二)	第二步：使用less文件
1、	引入less文件：<link rel="stylesheet/less" type="text/css" href="styles.less">
2、	引入less.js或者less.min.js文件：<script src="less.js" type="text/javascript"></script>
3、	注意：
1)	先引入less，后引入less.js
2)	在打开时需要从服务器打开，否则报错
九、 LESS文件的修改（修改下载下来的less文件），修改后需要使用修改后的文件，即用修改后的文件将原有文件覆盖
十、 Bootstrap的定制：在Bootstrap官网上做相应选择和修改，然后点击下面的下载，下载下来的就是自己定制的内容，不是默认的全部








十一、 JavaScript插件的引用
(一)	可以引用单个插件
(二)	可以引用全部插件
(三)	禁用JavaScript插件功能：
1、	禁用所有：$(document).off(‘.data-api’)
2、	禁用某个插件：$(document).off(‘被禁用的类.data-api’);如$(document).off(‘.dropdown.app-api’);表示禁用下拉菜单
十二、 JavaScript插件
(一)	过渡效果：对于简单的过渡效果，只需将 transition.js 和其它 JS 文件一起引入即可。如果你使用的是编译（或压缩）版的 bootstrap.js 文件，就无需再单独将其引入了。Transition.js 是 transitionEnd 事件和 CSS 过渡效果模拟器的基本帮助器类。它被其他插件用来检查 CSS 过渡效果支持，并用来获取过渡效果。
 
(二)	模态框：模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集
1、	模态框的构成：模态框的弹窗组件需要三层 div 容器元素，分别为 modal(模态声明层)、 modal-dialog(窗口声明层)、modal-content(内容层)。在内容层里面，还有三层，分别为modal-header(头部)、modal-body(主体)、modal-footer(注脚)
2、	注意：
1)	在使用模态框时需要增加一个 id
2)	需要结合JS和jquery使用
3)	可以给modal类所在div加fade类，模态框会淡入
3、	动态模态框示例
 
4、	属性说明
1)	data-toggle=“modal”：表示触发类型为模态框，如果是data-toggle=“dropdown”则表示触发类型为下拉菜单
2)	data-target=“#myModal”：为了和JS结合，表示触发的节点
3)	data-dismiss=“modal”：使按钮具有关闭功能
4)	modal-title类：使模态框标题具有指定样式
5)	close类：具有关闭模态框的功能
6)	tabindex=-1：解决按ESC键无法关闭模态框的问题
5、	静态模态框：如果不需要结合按钮，可以采用如下方法
 
6、	模态框尺寸：模态框提供了两个可选尺寸，通过为 .modal-dialog 增加一个样式调整类实现，尺寸为：modal-lg、modal-sm
7、	模态框常用方法：modal方法
1)	模态框.modal(“show”)：显示模态框
2)	模态框.modal(“hide”)：隐藏模态框
(三)	滚动监听：即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标
1、	两大部分：导航、主体内容
2、	常用属性：
1)	data-offset 默认值为 10，固定弄内容距滚动容器 10 像素以内， 就高亮显示所对应的菜单。推荐使用70
2)	data-spy 设置 scroll，将设置滚动容器监听
3)	data-target 设置#nav，绑定指定监听的菜单
4)	示例：
 
(四)	标签页
 
(五)	工具提示
1、	使用步骤
1)	在文档中插入一个标签，给该标签添加data-toggle=”tooltip”属性，并为之添加data-original-title属性，该属性的值为要显示的提示文字，也可以设置data-placement属性，该属性的作用是调节添加框出现的位置，属性值为left、right、top、bottom
2)	设置好上面内容后，需要添加js代码
3)	注意：如果既有data-original-title也有title，那么优先显示title的值
 
(六)	弹出框：弹出框（Popover）与工具提示（Tooltip）类似，提供了一个扩展的视图。如需激活弹出框，用户只需把鼠标悬停在元素上即可。可以使用a标签或者button作为触发元素
1、	点击按钮时弹出隐藏提示框
 
2、	点击按钮显示提示框，点击旁白隐藏提示框，只需要加data-trigger=”focus”属性
 
3、	默认显示提示框
 
(七)	警告框：警告框（Alert）消息大多是用来向终端用户显示诸如警告或确认消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能
1、	使用方式：
1)	创建一个div，设置类为alert，也可以加修饰类，如alert-info
2)	在里面可以包含按钮等元素，可以给按钮设置close类和data-dismiss=”alert”属性，进而关闭警告框
(八)	按钮：
1、	加载状态：如需向按钮添加加载状态，只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可
 
(九)	Collapse：折叠（Collapse）插件可以很容易地让页面区域折叠起来
1、	使用步骤：
1)	在文档中创建一个a标签，添加属性data-toggle=”collapse”
2)	在a的下面插入一个div，设置collapse类，并设置id，让a标签的href的值为div的id
 
(十)	Carousel：Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

你可能感兴趣的:(#,=,Web/JavaScript,=,Bootstrap笔记)

10月|愿你的青春不负梦想-读书笔记-01 Tracy的小书斋
本书的作者是俞敏洪，大家都很熟悉他了吧。俞敏洪老师是我行业的领头羊吧，也是我事业上的偶像。本日摘录他书中第一章中的金句：『一个人如果什么目标都没有，就会浑浑噩噩，感觉生命中缺少能量。能给我们能量的，是对未来的期待。第一件事，我始终为了进步而努力。与其追寻全世界的骏马，不如种植丰美的草原，到时骏马自然会来。第二件事，我始终有阶段性的目标。什么东西能给我能量？答案是对未来的期待。』读到这里的时候，我便
理解Gunicorn：Python WSGI服务器的基石范范0825 ipython linux 运维
理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
《投行人生》读书笔记小蘑菇的树洞
《投行人生》----作者詹姆斯-A-朗德摩根斯坦利副主席40年的职业洞见-很短小精悍的篇幅，比较适合初入职场的新人。第一部分成功的职业生涯需要规划1.情商归为适应能力分享与协作同理心适应能力，更多的是自我意识，你有能力识别自己的情并分辨这些情绪如何影响你的思想和行为。2.对于初入职场的人的建议，细节，截止日期和数据很重要截止日期，一种有效的方法是请老板为你所有的任务进行优先级排序。和老板喝咖啡的好
Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数广龙宇一起学Rust #Rust设计模式 rust 设计模式开发语言
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
git常用命令笔记咩酱-小羊 git 笔记
###用习惯了idea总是不记得git的一些常见命令，需要用到的时候总是担心旁边站了人~~~记个笔记@_@，告诉自己看笔记不丢人初始化初始化一个新的Git仓库gitinit配置配置用户信息gitconfig--globaluser.name"YourName"gitconfig--globaluser.email"[email protected]"基本操作克隆远程仓库gitclone查看
Google earth studio 简介陟彼高冈yu 旅游
GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
PHP环境搭建详细教程好看资源平台前端 php
PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
509. 斐波那契数(每日一题) lzyprime
lzyprime博客(github)创建时间：2021.01.04qq及邮箱：2383518170leetcode笔记题目描述斐波那契数，通常用F(n)表示，形成的序列称为斐波那契数列。该数列由0和1开始，后面的每一项数字都是前面两项数字的和。也就是：F(0)=0，F(1)=1F(n)=F(n-1)+F(n-2)，其中n>1给你n，请计算F(n)。示例1：输入：2输出：1解释：F(2)=F(1)+
拥有断舍离的心态，过精简生活--《断舍离》读书笔记爱吃丸子的小樱桃
不知不觉间房间里的东西越来越多，虽然摆放整齐，但也时常会觉得空间逼仄，令人心生烦闷。抱着断舍离的态度，我开始阅读《断舍离》这本书，希望从书中能找到一些有效的方法，帮助我实现空间、物品上的断舍离。《断舍离》是日本作家山下英子通过自己的经历、思考和实践总结而成的，整体内涵也从刚开始的私人生活哲学的“断舍离”升华成了“人生实践哲学”，接着又成为每个人都能实行的“改变人生的断舍离”，从“哲学”逐渐升华成“
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
高端密码学院笔记285 柚子_b4b4
高端幸福密码学院（高级班）幸福使者：李华第（598）期《幸福》之回归内在深层生命原动力基础篇——揭秘“激励”成长的喜悦心理案例分析主讲：刘莉一，知识扩充:成功=艰苦劳动+正确方法+少说空话。贪图省力的船夫，目标永远下游。智者的梦再美，也不如愚人实干的脚印。幸福早课堂2020.10.16星期五一笔记:1，重视和珍惜的前提是知道它的价值非常重要，当你珍惜了，你就真正定下来，真正的学到身上。2，大家需要
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
Day17笔记-高阶函数 ~在杰难逃~ Python 笔记 python 开发语言 pycharm 数据分析
高阶函数【重点掌握】函数的本质：函数是一个变量，函数名是一个变量名，一个函数可以作为另一个函数的参数或返回值使用如果A函数作为B函数的参数，B函数调用完成之后，会得到一个结果，则B函数被称为高阶函数常用的高阶函数：map(),reduce(),filter(),sorted()1.map()map(func,iterable)，返回值是一个iterator【容器，迭代器】func:函数iterab
Day1笔记-Python简介&标识符和关键字&输入输出 ~在杰难逃~ Python python 开发语言大数据数据分析数据挖掘
大家好，从今天开始呢，杰哥开展一个新的专栏，当然，数据分析部分也会不定时更新的，这个新的专栏主要是讲解一些Python的基础语法和知识，帮助0基础的小伙伴入门和学习Python，感兴趣的小伙伴可以开始认真学习啦！一、Python简介【了解】1.计算机工作原理编程语言就是用来定义计算机程序的形式语言。我们通过编程语言来编写程序代码，再通过语言处理程序执行向计算机发送指令，让计算机完成对应的工作，编程
git - Webhook让部署自动化大猪大猪
我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
webpack图片等资源的处理 dmengmeng
需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
数据仓库——维度表一致性墨染丶eye 背诵数据仓库
数据仓库基础笔记思维导图已经整理完毕，完整连接为：数据仓库基础知识笔记思维导图维度一致性问题从逻辑层面来看，当一系列星型模型共享一组公共维度时，所涉及的维度称为一致性维度。当维度表存在不一致时，短期的成功难以弥补长期的错误。维度时确保不同过程中信息集成起来实现横向钻取货活动的关键。造成横向钻取失败的原因维度结构的差别，因为维度的差别，分析工作涉及的领域从简单到复杂，但是都是通过复杂的报表来弥补设计
【Git】常见命令(仅笔记) 好想有猫猫 Git Linux学习笔记 git 笔记 elasticsearch linux c++
文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"[email protected]
「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验张风捷特烈 ide rust 开发语言后端
theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www
为什么你总是对下属不满意? ZhaoWu1050
【ZhaoWu的听课笔记】大多数公司，都存在两种问题。我创业四年，更是体会深切。这两种问题就是：老板经常不满意下属的表现；下属总是不知道老板想要什么；虽然这两种问题普遍存在，其实解决方法并不复杂。这节课，我们再聊聊第一个问题：为什么老板经常不满意下属表现?其实，这背后也是一条管理常识。管理学家德鲁克先生早就说过：管理者的任务，不是去改变人。*来自《卓有成效的管理者》只是大多数老板和我一样，都是一边
母亲节如何做小红书营销美橙传媒
小红书的一举一动引起了外界的高度关注。通过爆款笔记和流行话题，我们可以看到“干货”类型的内容在小红书中偏向实用的生活经验共享和生活指南非常受欢迎。根据运营社的分析，这种现象是由小红书用户心智和内容社区背后机制共同决定的。首先，小红书将使用“强搜索”逻辑为用户提供特定的“搜索场景”。在“我必须这样生活”中，大量使用了满足小红书站用户喜好和需求的内容。内容社区自制的高质量内容也吸引了寻找营销新途径的品
读书笔记|《遇见孩子，遇见更好的自己》5 抹茶社长
为人父母意味着放弃自己的过去，不要对以往没有实现的心愿耿耿于怀，只有这样，孩子们才能做回自己。985909803.jpg孩子在与父母保持亲密的同时更需要独立，唯有这样，孩子才会成为孩子，父母才会成其为父母。有耐心的人生往往更幸福，给孩子留点余地。认识到养儿育女是对耐心的考验。为失败做好心理准备，教会孩子控制情绪。了解自己的底线，说到底线，有一点很重要，父母之所以发脾气，真正的原因往往在于他们自己，
基于Python给出的PDF文档转Markdown文档的方法程序媛了了 python pdf 开发语言
注：网上有很多将Markdown文档转为PDF文档的方法，但是却很少有将PDF文档转为Markdown文档的方法。就算有，比如某些网站声称可以将PDF文档转为Markdown文档，尝试过，不太符合自己的要求，而且无法保证文档没有泄露风险。于是本人为了解决这个问题，借助GPT（能使用GPT镜像或者有条件直接使用GPT的，反正能调用GPT接口就行）生成Python代码来完成这个功能。笔记、代码难免存在
语文主题教学学习笔记之87 东哥杂谈
“语文主题教学”学习笔记之八十七（0125）今天继续学习小学语文主题教学的实践样态。板块三：教学中体现“书艺”味道。作为四大名著之一的《水浒传》，堪称我国文学宝库之经典。对从《水浒传》中摘选的单元，教师就要了解其原生态，即评书体特点。这也要求教师要了解一些常用的评书行话术语，然后在教学时适时地加入一些，让学生体味其文本中原有的特色。学生也要尽可能地通过朗读的方式，而不单是分析讲解的方式进行学习。细
Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python 开发语言
一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
Java爬虫框架（一）--架构设计狼图腾-狼之传说 java 框架 java 任务 html解析器存储电子商务
一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
Js函数返回值 _wy_ js return
一、返回控制与函数结果，语法为：return 表达式;作用: 结束函数执行，返回调用函数，而且把表达式的值作为函数的结果二、返回控制语法为：return;作用: 结束函数执行，返回调用函数，而且把undefined作为函数的结果在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性
MySQL 的 char 与 varchar bylijinnan mysql
今天发现，create table 时，MySQL 4.1有时会把 char 自动转换成 varchar 测试举例： CREATE TABLE `varcharLessThan4` ( `lastName` varchar(3) ) ; mysql> desc varcharLessThan4; +----------+---------+------+-
Quartz——TriggerListener和JobListener eksliang TriggerListener JobListener quartz
转载请出自出处：http://eksliang.iteye.com/blog/2208624 一.概述 listener是一个监听器对象，用于监听scheduler中发生的事件，然后执行相应的操作；你可能已经猜到了，TriggerListeners接受与trigger相关的事件，JobListeners接受与jobs相关的事件。二.JobListener监听器 j
oracle层次查询 18289753290 oracle；层次查询；树查询
.oracle层次查询(connect by) oracle的emp表中包含了一列mgr指出谁是雇员的经理，由于经理也是雇员，所以经理的信息也存储在emp表中。这样emp表就是一个自引用表，表中的mgr列是一个自引用列，它指向emp表中的empno列，mgr表示一个员工的管理者， select empno,mgr,ename,sal from e
通过反射把map中的属性赋值到实体类bean对象中酷的飞上天空 javaee 泛型类型转换
使用过struts2后感觉最方便的就是这个框架能自动把表单的参数赋值到action里面的对象中但现在主要使用Spring框架的MVC，虽然也有@ModelAttribute可以使用但是明显感觉不方便。好吧，那就自己再造一个轮子吧。原理都知道，就是利用反射进行字段的赋值，下面贴代码主要类如下： import java.lang.reflect.Field; imp
SAP HANA数据存储：传统硬盘的瓶颈问题蓝儿唯美 HANA
SAPHANA平台有各种各样的应用场景，这也意味着客户的实施方法有许多种选择，关键是如何挑选最适合他们需求的实施方案。在《Implementing SAP HANA》这本书中，介绍了SAP平台在现实场景中的运作原理，并给出了实施建议和成功案例供参考。本系列文章节选自《Implementing SAP HANA》，介绍了行存储和列存储的各自特点，以及SAP HANA的数据存储方式如何提升空间压
Java Socket 多线程实现文件传输随便小屋 java socket
高级操作系统作业，让用Socket实现文件传输，有些代码也是在网上找的，写的不好，如果大家能用就用上。客户端类： package edu.logic.client; import java.io.BufferedInputStream; import java.io.Buffered
java初学者路径 aijuans java
学习Java有没有什么捷径?要想学好Java，首先要知道Java的大致分类。自从Sun推出Java以来，就力图使之无所不包，所以Java发展到现在，按应用来分主要分为三大块：J2SE,J2ME和J2EE,这也就是Sun ONE(Open Net Environment)体系。J2SE就是Java2的标准版，主要用于桌面应用软件的编程；J2ME主要应用于嵌入是系统开发，如手机和PDA的编程；J2EE
APP推广 aoyouzi APP 推广
一，免费篇 1，APP推荐类网站自主推荐最美应用、酷安网、DEMO8、木蚂蚁发现频道等,如果产品独特新颖，还能获取最美应用的评测推荐。PS：推荐简单。只要产品有趣好玩，用户会自主分享传播。例如足迹APP在最美应用推荐一次，几天用户暴增将服务器击垮。 2，各大应用商店首发合作老实盯着排期，多给应用市场官方负责人献殷勤。 3，论坛贴吧推广百度知道，百度贴吧，猫扑论坛，天涯社区，豆瓣（
JSP转发与重定向百合不是茶 jsp servlet Java Web jsp转发
在servlet和jsp中我们经常需要请求,这时就需要用到转发和重定向; 转发包括;forward和include 例子;forwrad转发; 将请求装法给reg.html页面关键代码; req.getRequestDispatcher("reg.html
web.xml之jsp-config bijian1013 java web.xml servlet jsp-config
1.作用：主要用于设定JSP页面的相关配置。 2.常见定义： <jsp-config> <taglib> <taglib-uri>URI(定义TLD文件的URI,JSP页面的tablib命令可以经由此URI获取到TLD文件)</tablib-uri> <taglib-location> TLD文件所在的位置
JSF2.2 ViewScoped Using CDI sunjing CDI JSF 2.2 ViewScoped
JSF 2.0 introduced annotation @ViewScoped; A bean annotated with this scope maintained its state as long as the user stays on the same view(reloads or navigation - no intervening views). One problem w
【分布式数据一致性二】Zookeeper数据读写一致性 bit1129 zookeeper
很多文档说Zookeeper是强一致性保证，事实不然。关于一致性模型请参考http://bit1129.iteye.com/blog/2155336 Zookeeper的数据同步协议 Zookeeper采用称为Quorum Based Protocol的数据同步协议。假如Zookeeper集群有N台Zookeeper服务器(N通常取奇数，3台能够满足数据可靠性同时
Java开发笔记白糖_ java开发
1、Map<key,value>的remove方法只能识别相同类型的key值 Map<Integer,String> map = new HashMap<Integer,String>(); map.put(1,"a"); map.put(2,"b"); map.put(3,"c"
图片黑色阴影 bozch 图片
.event{ padding:0; width:460px; min-width: 460px; border:0px solid #e4e4e4; height: 350px; min-heig
编程之美-饮料供货-动态规划 bylijinnan 动态规划
import java.util.Arrays; import java.util.Random; public class BeverageSupply { /** * 编程之美饮料供货 * 设Opt（V’，i）表示从i到n-1种饮料中，总容量为V’的方案中，满意度之和的最大值。 * 那么递归式就应该是：Opt（V’，i）=max{ k * Hi+Op
ajax大参数（大数据）提交性能分析 chenbowen00 Web Ajax 框架浏览器 prototype
近期在项目中发现如下一个问题项目中有个提交现场事件的功能，该功能主要是在web客户端保存现场数据（主要有截屏，终端日志等信息）然后提交到服务器上方便我们分析定位问题。客户在使用该功能的过程中反应点击提交后反应很慢，大概要等10到20秒的时间浏览器才能操作，期间页面不响应事件。根据客户描述分析了下的代码流程，很简单，主要通过OCX控件截屏，在将前端的日志等文件使用OCX控件打包，在将之转换为
[宇宙与天文]在太空采矿,在太空建造 comsci
我们在太空进行工业活动...但是不太可能把太空工业产品又运回到地面上进行加工,而一般是在哪里开采,就在哪里加工,太空的微重力环境,可能会使我们的工业产品的制造尺度非常巨大.... 地球上制造的最大工业机器是超级油轮和航空母舰,再大些就会遇到困难了,但是在空间船坞中,制造的最大工业机器,可能就没
ORACLE中CONSTRAINT的四对属性 daizj oracle CONSTRAINT
ORACLE中CONSTRAINT的四对属性 summary:在data migrate时,某些表的约束总是困扰着我们,让我们的migratet举步维艰,如何利用约束本身的属性来处理这些问题呢?本文详细介绍了约束的四对属性: Deferrable/not deferrable, Deferred/immediate, enalbe/disable, validate/novalidate,以及如
Gradle入门教程 dengkane gradle
一、寻找gradle的历程一开始的时候，我们只有一个工程，所有要用到的jar包都放到工程目录下面，时间长了，工程越来越大，使用到的jar包也越来越多，难以理解jar之间的依赖关系。再后来我们把旧的工程拆分到不同的工程里，靠ide来管理工程之间的依赖关系，各工程下的jar包依赖是杂乱的。一段时间后，我们发现用ide来管理项程很不方便，比如不方便脱离ide自动构建，于是我们写自己的ant脚本。再后
C语言简单循环示例 dcj3sjt126com c
# include <stdio.h> int main(void) { int i; int count = 0; int sum = 0; float avg; for (i=1; i<=100; i++) { if (i%2==0) { count++; sum += i; } } avg
presentModalViewController 的动画效果 dcj3sjt126com controller
系统自带(四种效果)： presentModalViewController模态的动画效果设置： [cpp] view plain copy UIViewController *detailViewController = [[UIViewController al
java 二分查找 shuizhaosi888 二分查找 java二分查找
需求：在排好顺序的一串数字中，找到数字T 一般解法：从左到右扫描数据，其运行花费线性时间O(N)。然而这个算法并没有用到该表已经排序的事实。 /** * * @param array * 顺序数组 * @param t * 要查找对象 * @return */ public stati
Spring Security（07）——缓存UserDetails 234390216 ehcache 缓存 Spring Security
Spring Security提供了一个实现了可以缓存UserDetails的UserDetailsService实现类，CachingUserDetailsService。该类的构造接收一个用于真正加载UserDetails的UserDetailsService实现类。当需要加载UserDetails时，其首先会从缓存中获取，如果缓存中没
Dozer 深层次复制 jayluns VO maven po
最近在做项目上遇到了一些小问题，因为架构在做设计的时候web前段展示用到了vo层，而在后台进行与数据库层操作的时候用到的是Po层。这样在业务层返回vo到控制层，每一次都需要从po-->转化到vo层，用到BeanUtils.copyProperties(source, target)只能复制简单的属性，因为实体类都配置了hibernate那些关联关系，所以它满足不了现在的需求，但后发现还有个很
CSS规范整理（摘自懒人图库） a409435341 html UI css 浏览器
刚没事闲着在网上瞎逛，找了一篇CSS规范整理，粗略看了一下后还蛮有一定的道理，并自问是否有这样的规范，这也是初入前端开发的人一个很好的规范吧。一、文件规范 1、文件均归档至约定的目录中。具体要求通过豆瓣的CSS规范进行讲解：所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中：基本样式库 /css/core
C++动态链接库创建与使用你不认识的休道人 C++dll
一、创建动态链接库 1.新建工程test中选择”MFC [dll]”dll类型选择第二项"Regular DLL With MFC shared linked"，完成 2.在test.h中添加 extern “C” 返回类型 _declspec(dllexport)函数名(参数列表); 3.在test.cpp中最后写 extern “C” 返回类型 _decls
Android代码混淆之ProGuard rensanning ProGuard
Android应用的Java代码，通过反编译apk文件（dex2jar、apktool）很容易得到源代码，所以在release版本的apk中一定要混淆一下一些关键的Java源码。 ProGuard是一个开源的Java代码混淆器（obfuscation）。ADT r8开始它被默认集成到了Android SDK中。官网： http://proguard.sourceforge.net/
程序员在编程中遇到的奇葩弱智问题 tomcat_oracle jquery 编程 ide
　　现在收集一下：　　排名不分先后，按照发言顺序来的。 1、Jquery插件一个通用函数一直报错，尤其是很明显是存在的函数，很有可能就是你没有引入jquery。。。或者版本不对 2、调试半天没变化：不在同一个文件中调试。这个很可怕，我们很多时候会备份好几个项目，改完发现改错了。有个群友说的好：在汤匙
解决maven-dependency-plugin (goals "copy-dependencies","unpack") is not supported xp9802 dependency
解决办法：在plugins之前添加如下pluginManagement，二者前后顺序如下： [html] view plain copy <build> <pluginManagement