@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Induction</title>
</head>
<body>
<div>
@*1. 自适应网页设计
首先，在网页代码的头部，加入一行 viewport元标签。viewport是网页默认的宽度和高度，
<meta name="viewport" content="width=device-width, initial-scale=1">
上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例
(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个
设置，包括IE9。对于那些老式浏览器(主要是IE6、7、8)，需要使用 css3-mediaqueries.js。*@
@*2. 轮播组件 carousel
通过 javascript 初始化轮播组件，接受一个可选的object类型的options参数，并开始幻灯片循环。
$('.carousel').carousel({
interval: 2000 , //图片轮换的等待时间
//还有其他两种： pause 类型String 默认值是"hover" 鼠标放上去暂停轮播，离开开始轮播
//wrap 类型boolean 默认值是true 是否持续轮播
});
直接放入参数值
.carousel(‘cycle’) 从左到右循环各帧。
.carousel(‘pause’) 停止轮播。
.carousel(number) 将轮播定位到指定的帧上（帧下标以0开始，类似数组）。
.carousel(‘prev’) 返回到上一帧。
.carousel(‘next’) 转到下一帧。*@
@*3. 响应式图片
<img src="..." class="img-responsive" alt="Responsive image">
通过添加.img-responsive class可以让Bootstrap 3中的图片对响应式布局的支持更友好。其实质是
为图片赋予了max-width: 100%;和height: auto;属性，可以让图片按比例缩放，不超过其父元素的尺
寸。*@
@*1. 标题样式
除了有标签 h1~h6 之外，bootstrap还提供了对应的六个类名：.h1~.h6
重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。
2.副标题 small标签
行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）
内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%
3.段落P强调内容 lead类样式
如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
用法：<p>我是普通文本，我的样子长成这样我是普通文本，我的样子长成这样我是普通文本，</p>
<p class="lead">我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。</p>
4.粗体
在Bootstrap中，可以使用<b>和<strong>标签让文本直接加粗。
5. 斜体
斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签<em>或<i>来实现。
6.强调相关的类
在Bootstrap中除了使用标签<strong>、<em>等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）
.text-danger：危险，使用褐色（#a94442）
7.文本对齐风格
.text-left：左对齐
.text-center：居中对齐
.text-right：右对齐
.text-justify：两端对齐
8.列表
去点列表：通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
内联列表：通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。
水平定义列表：Bootstrap可以给
添加类名“.dl-horizontal”给定义列表实现水平显示效果。
9.代码相关
使用<code></code>来显示单行内联代码
使用<pre></pre>来显示多行块代码
使用<kbd></kbd>来显示用户输入代码
Y轴出现滚动条：在pre标签上添加类名“.pre-scrollable”
10.表格
.table：基础表格
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格
10-1.表格行的类
.active 表示当前活动的信息
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告，需要特别注意
.danger er 表示危险或者可能是错误的行为
10-2.基础表格 注意
在Bootstrap中，对于基础表格是通过类名“.table”来控制。如果在元素中不添加任何类名，
表格是无任何样式效果的。
10-3.响应式表格
在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。
Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式
效果，然后将置于这个容器当中，这样表格也就具有响应式效果。
Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平
滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。
11. 基础表单
类名form-control
1、宽度变成了100%
2、设置了一个浅灰色（#ccc）的边框
3、具有4px的圆角
4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
类名 form-horizontal
水平表单风格（标签居左，表单控件居右）
类名form-inline
将表单的控件都在一行内显示
表单控件(输入框input)
单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中
使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，
因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，
对应的是input[type=“text”])的形式来定义样式的。为了让控件在各种表单风格中样式
不出错，需要添加类名“form-control”
表单控件(下拉选择框select)
多行选择设置multiple属性的值为multiple<select multiple class="form-control">
表单控件(文本域textarea)
文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果
textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap
框架中的“form-control”样式的表单控件宽度为100%或auto。
表单控件(复选框checkbox和单选择按钮radio)
1、不管是checkbox还是radio都使用label包起来了
2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
3、radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中，主要借助“.checkbox”和“.radio”样式，来处理复选框、单选按
钮与标签的对齐方式。
表单控件(复选框和单选按钮水平排列)
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”
表单控件大小
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大
这两个类适用于表单中的input，textarea和select控件，具体使用如下：
<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件变大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件变小">
表单控件状态(焦点状态)
焦点状态是通过伪类“:focus”来实现
表单控件状态(禁用状态)
只需要在需要禁用的表单控件上加上“disabled”即可
<input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>
在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态。
如果legend中有输入框的话，这个输入框是无法被禁用的。
表单控件状态(验证状态)
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名。
很多时候，在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起：
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">email地址</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
表单提示信息
平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。
使用了一个help-block样式，将提示信息以块状显示，并且显示在控件底部。help-inline让提
示信息显示在控件的后面，也就是同一水平显示
12.按钮
<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>
块状按钮
Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满
整个容器，并且这个按钮不会有任何的padding和margin值。在实际当中，常把这种按钮
称为块状按钮。
按钮状态——禁用状态
方法1：在标签中添加disabled属性
方法2：在元素标签中添加类名“disabled”
<button class="btnbtn-primary btn-lgbtn-block" type="button" disabled="disabled">通过disabled属性禁用按钮</button>
<button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
<button class="btnbtn-primary btn-smbtn-block" type="button">未禁用的按钮</button>
*@
@*图像*@
@*img-responsive:响应式图片,主要针对响应式设计
img-rounded:圆角图片
img-circle:圆角图片
img-thumbnail:缩略图片
(注意:由于样式没有对图片做大小上的样式限制,所以在实际使用的时候,需要通过其他的方式来处理图片大小。
比如控制图片容器大小(不能通过css样式直接修改图片的大小,这样就不相应了)。*@
@*网格系统*@
@*1.数据行(.row)必须包含在容器(.Container)中,以便为其赋予合适的对齐方式和内距(padding).
2.在行(.row)中可以添加列(.column),但列数之和不能超过评分的总行数,比如12.
3.具体内容应当放置在列容器(column)之内,而且只有列(column)才可以做为行容器(.row)的直接子元素。
4.通过设置内距(padding)从而参加列与列之间的间距。然后通过为第一列和最后一列设置负值的外句(margin)来抵消内距(padding)的影响*@
@*下拉菜单(基本用法)*@
@*1.使用一个名为"dropdown"的容器包裹了整个下拉菜单元素
2.使用了一个按钮做为父菜单,并且定义类名"dropdown-toggle"和定义"data-toggle"属性,且值必须和最外容器类名一致
3.下拉菜单项使用一个ul列表,并且定义一个类名为"dropdown-menu"(下拉菜单对齐方式)：Bootrapt框架中下拉菜单默认是
左对齐如果你想相对于父容器右对齐时,可以在"dropdown-menu"上添加一个"pull-right"或者"dropdown-menu-right"类名*@
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenul">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
.....
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#"></a>下拉菜单项</li>
</ul>
</div>
@*按钮(等分按钮)*@
@*等分按钮也常被称为是自适应分组按钮,其现实方法也非常的简单,只需要在按钮组"btn-group"上追加一个
"btn-group-justified"类名(在制作等分按钮组是,请尽量使用<a>标签来制作按钮)*@
<div class="btn-wrap">
<div class="btn-group btn-group-justified">
<a class="btnbtn-default" href="#">首页</a>
<a class="btnbtn-default" href="#">产品展示</a>
<a class="btnbtn-default" href="#">案例分析</a>
<a class="btnbtn-default" href="#">联系我们</a>
</div>
</div>
@*基础导航条*@
@*".navbar"样式的主要功能就是设置左右padding和圆角等效果,但他和颜色相关的样式没有
进行如何的设置,而导航条的颜色都是通过".navbar-default"来进行控制(1.加入导航条标题
2.常常在菜单前面都会有一个标题(文字字号比其他文字稍大一些),其实在bootstrap框架也为
大家做了这方面考虑,其通过"navbar-header"和"navbar-brand")来实现*@
@*警示框-默认警示框*@
@*1.成功警示框:告诉用户操作成功,在"alert"样式基础上追加"alert-success"样式,具体呈现
的是背景、边框和文本都是绿色;
2.信息警示框:给用户提供提示信息,在"alert"样式基础上追加"alert-info"样式,具体呈现的是
背景、边框和文本都是浅蓝色;
3.警告提示框:提示用户小心操作(提供警告小心),在"alert"样式基础上追加"alert-warning"样式
,具体呈现的是背景、边框、文本都是浅黄色
4.错误警示框:提示用户操作错误,在"alert"样式基础上追加"alert-danger"样式,具体呈现的是背景、
边框和文本都是浅红色
(警示框-可关闭的警示框)
1.需要在基本警示框"alert"的基础上添加"alert-dismissable"样式。
2.在button标签中加入class="close"类,实现警示框关闭按钮的样式。
3.要确保关闭按钮元素上设置了自定义属性:"data-dismiss="alert"(因为可关闭警示框需要借助
JavaScript来检测该属性,从而控制警示框的关闭)"
(警示框-警示框的链接)
bootstrap框架是通过给警示框加的链接添加一个名为"alert-link"的类名,通过"alert-link"样式给链接提供高亮显示*@
@*18.媒体对象–默认媒体对象
☑ 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容
☑ 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片
☑ 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容
☑ 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选
除了上面四个部分之外，在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。
19.js插件引入
一次性引入
Bootstrap提供了一个单一的文件，这个文件包含了Bootstrap的所有JavaScript插件，即bootstrap.js（压缩版本：bootstrap.min.js）。
单独导入：
☑ 动画过渡（Transitions）:对应的插件文件“transition.js”
☑ 模态弹窗（Modal）:对应的插件文件“modal.js”
☑ 下拉菜单（Dropdown）：对应的插件文件“dropdown.js”
☑ 滚动侦测（Scrollspy）：对应的插件文件“scrollspy.js”
☑ 选项卡（Tab）：对应的插件文件“tab.js”
☑ 提示框（Tooltips）：对应的插件文件“tooltop.js”
☑ 弹出框（Popover）：对应的插件文件“popover.js”
☑ 警告框（Alert）：对应的插件文件“alert.js”
☑ 按钮（Buttons）：对应的插件文件“button.js”
☑ 折叠/手风琴（Collapse）：对应的插件文件“collapse.js”
☑ 图片轮播Carousel：对应的插件文件“carousel.js”
☑ 自动定位浮标Affix：对应的插件文件“affix.js”*@
@*模态弹出框
data-toggle:字符(modal)用来控制模态弹出框的显示(必须要在触发元素上定义
一个属性,而且值只能是modal)
data-target:字符(用户自定义)data-target用来定义要触发的模态弹出窗是哪一个.
其值可以是"div.modal"元素独有的类名,或者ID名。(必须要在触发元素上定义一个属性,
而且需要与div.modal中的独有类名或ID匹配)
data-backdrop:布尔值(true)是否包含一个背景div元素,如果为真,则单击该背景时
关闭弹出窗,如果取值为static,则单击背景div元素时不会关闭弹出窗。
data-keyboard:布尔值(true)按键盘的ESC键就可以关闭弹出窗,如果值为false,则无
法通过ESC键来关闭弹出窗。
data-show:布尔值(true)初始化时,弹出窗是否显示。
href(URL路径)空值 如果通过a元素来触发模态弹出窗,其href值不是一个以#开头的值,
则表示是一个url地址,模态弹出窗会先加载其内容,然后体会原有的modal-content中的内容。
那么data-target则必须填写制定id.*@
@*模态弹出框-JavaScript触发时的参数设置*@
@*1.backdrop布尔值(true)描述:是否包括一个背景div元素,如果设置为true,则单击该背景,模态弹出
框会关闭,如果取值为static,单击该背景时不关闭模态弹出窗(等同于自定义认属性中的data-backdrop)
2.keyboard布尔值(true)描述:按ESC键关闭模态弹出窗;如果取值为false,按ESC键无法关闭模态弹出窗
(等同于自定义属性中的data-keyboard属性)
3.show布尔值(true)描述:初始化模态弹出窗是否显示(等同于自定义属性中的data-show)属性
4.remote URL(空值)描述:远程获取remote指定的url的内容来填充模态弹出窗的内容(等同于a链接元素
中的href属性)
5.toggle(使用:$("#mymodal").modal("toggle"):触发时,反转模态弹出窗的状态。如果模态弹出窗是显示的,
则关闭;反之,如果模态弹出窗是关闭的,则显示。)
6.show(使用:$("#mymodal").modal("show"):触发时,显示模态弹出窗)
7.hide(使用:$("#mymodal).modal("hide"):触发时,关闭模态弹出窗)*@
@*模态弹出窗事件设置:(弹出前、弹出后、关闭前、关闭后)
1.show.bs.modal:在show方法调整用时立即触发(尚未显示之前);如果单击了一个元素,那么该元素将作为事件
的relatedTarget属性
2.shown.bs.modal:该事件在模态弹出窗完全显示给用户之后(并且等CSS动画完成之后)触发:如果单击了一个元素
,那么该元素将作为事件的relatedTarget事件
3.hide.bs.modal:在hide方法调用时(但还未关闭隐藏)立即触发
4.hidden.bs.modal:在事件在模态弹出窗完全隐藏之后(并且css动画漂完成之后)触发*@
</div>
</body>
</html>
扫一扫
714
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
