Bootstrapbootstrap学习记录(慕课网教程)

1、当主标题下需要符合标题时只是每当h中嵌套small
<h1>nihao<small>a</samll></h1>

2、当有一样段得到需要突出展示时只是添加lead类,其用意就是增大文本字号,加多少文本,而且本着行高和margin也举行相应的处理
class=”lead”

3、在平凡的因素被我们一般通过font-weight设置也bold关键词为文本加粗。在Bootstrap中,可以利用<b>和<strong>标签为文本直接加粗。

4、斜体类似于加多少一样,除了可以叫元素设置样式font-style值为italic实现之外,在Bootstrap中还可以通过动用标签<em>或<i>来贯彻。

5、强调相关的类名
.text-muted: 提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info: 通知消息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger: 危险,使用褐色(#a94442)

6、Bootstrap通过定义四个类名来决定文件的对准伙同风格:
.text-left: 左对齐
.text-center: 居中针对同
.text-right: 右对齐
.text-justify:两端对旅

7、去点无序列表
bootstrap为众多开发者考虑的充分周道,通过叫无序列表添加一个类名“.list-unstyled”,这样虽可去默认的列表样式的风格。

8、内联列表 用于打导航久
透过丰富类名“.list-inline”来促成内联列表,简单点说哪怕是将垂直列表换成水平列表,而且去丢项目标志(编号),保持水平显得。也可以说内联列表就是也打造水准导航而格外。

9、代码风格
于Bootstrap主要提供了三种代码风格:
1、使用<code></code>来显示单行内联代码
而只有需要在pre标签及上加类名“.pre-scrollable”,就好控制代码块区域最深高度也340px,一旦过这惊人,就见面在Y轴出现滚动条
2、使用<pre></pre>来显示多行块代码
3、使用<kbd></kbd>来显示用户输入代码

10、Bootstrap为表不同的体风格提供了不同之类名,主要概括:
.table:基础表格
给表格设置了margin-bottom:20px跟安装单元内距
在thead底部装了一个2px底浅灰实线
每个单元格顶部设置了一个1px之浅灰实线
.table-striped:斑马线表格
<table class=”table table-striped”>
.table-bordered:带边框的报表
<table class=”table table-bordered”>
.table-hover:鼠标悬停高亮的表
<table class=”table table-hover”>
.table-condensed:紧凑型表格
<table class=”table table-condensed”>
.table-responsive:响应式表格
<table class=”table table-bordered”>

11、<tr>提供了五种植不同之类名,每路名控制了实践的例外背景颜色
.active 代表目前动之信息
.success 表示成功或对的行事
.info 代表中立之音信或者行为
.warning 表示警告 要特别注意
.danger 代表危险要可能的错误行为

第三章 表单
3.1基础表单
当Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果立刻几乎独因素用了类名“form-control”,将会晤促成有统筹及的定制效果。
1、宽度变成了100%
2、设置了一个浅灰色(#ccc)的边框
3、具有4px的圆角
4、设置阴影效果,并且元素得到问题的常,阴影和边框效果会有着变动
5、设置了placeholder的颜料吗#999

3.2品位表单
在Bootstrap框架中一经兑现程度表单效果,必须满足以下简单独标准化:
1、在<form>元素是用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。

3.3外联表单
公不过需要在<form>元素被上加类名“form-inline”即可。

3.4表单控件(输入框input)
于Bootstrap中利用input时为得上加type类型,如果无点名type类型,将无法取不错的体,因为Bootstrap框架还是通过input[type=“?”](其中?号代表type类型
为让控件在各种表单风格被样式不出错,需要上加类名“form-control”

3.5表单控件(下拉选择框select)
Bootstrap框架中的下拉摘取框使用与原之一律,多尽选安装multiple属性的值也multiple。

3.6表明只控件(复选框checkbox和单选择以钮radio)
.checkbox .radio

3.7表就控件(复选框和单选按钮水平排列)
1、如果checkbox需要程度排列,只需要在label标签上补偿加类名“checkbox-inline”
2、如果radio需要程度排列,只待以label标签及加加类名“radio-inline”

3.8阐明只控件(按钮)
以Bootstrap框架中的按钮都是下<button>来实现。

3.9申明止控件大小
1、input-sm:让控件比常规尺寸更有些
2、input-lg:让控件比正规尺寸更不行

3.10说明就控件状态(焦点状态)
症结状态是经伪类“:focus”来贯彻
假定受控件在关键状态下发生体效果,需要被控件添加类名“form-control”

3.11表单控件状态(禁用状态)
光待以待禁用的表单控件上加上“disabled”即可:
万一fieldset设置了disabled属性,整个域都拿远在被剥夺状态。

3.12表单控件状态(验证状态)
以打造表单时,不免要开表单验证。同样也要提供验证状态样式,在Bootstrap框架中一律提供及时几种力量。
1、.has-warning:警告状态(黄色)
2、.has-error:错误状态(红色)
3、.has-success:成功状态(绿色)
运用的时刻只需要在form-group容器上相应添加状态类名
设若您想吃表单在相应的状态下显得 icon
出来,只待以对应的状态下补充加类名“has-feedback”。请小心,此类名要与“has-error”、“has-warning”和“has-success”在一块儿:
注意:只有在远距离引用css文件时icon图标才会生因此

3.13表单提示信息
每当Bootstrap框架中行使了一个”help-block”样式,将提示信息以块状显示,并且出示在控件底部。

3.14基本按钮
Bootstrap框架V3.x版本的为主按钮和V2.x版本的中心按钮一样,都是经过类名“btn”来兑现。
好经input a span 等标签实现

3.15默认按钮
Bootstrap框架首先通过基础类名“.btn”定义了一个基础的按钮风格,然后经过“.btn-default”定义了一个默认的按钮风格。

3.20按钮大小
按钮可通过.btn-lg .btn-sm .btn-xs来改按钮的轻重缓急

3.21块状按钮
Bootstrap框架中提供了一个类名“btn-block”。按钮使用这类名就可叫按钮充满整个容器,并且这个按钮无会见生另的padding和margin值。

3.22按钮状态——活动状态
Bootstrap按钮的活动状态主要概括按钮的上浮状态(:hover),点击状态(:active)和关键状态(:focus)几种植。

3.23按钮状态——禁用状态
以Bootstrap框架中,要禁用按钮有个别种植实现方式:
方1:在标签中补充加disabled属性
术2:在要素标签中补充加类名“disabled”
使通过类名“.disable”来剥夺按钮,其链接行是力不从心禁止。而以要素标签中长“disabled”属性之点子是好禁止元素的默认行为的。

3.24图像
1、img-responsive:响应式图片,主要对被响应式设计
2、img-rounded:圆角图形
3、img-circle:圆形图片
4、img-thumbnail:缩略图片

3.25 200个icon:
Bootstrap框架中之图标都是书图标,其落实原理就是经@font-face属性加载了字。

季节 网格系统
1、数据行(.row)必须含有在容器(.container)中,以便为那个给予合适的对准齐方式和内距(padding)。
2、在行(.row)中好补加列(.column),但列数之与非克超越平分的总列数,比如12
3、具体内容应当放置在列容器(column)之内,而且只有出列(column)才足以当做行容器(.row)的直白子元素

4.4列偏移
只是待以列元素上加加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么富有这个类名的排列就见面向右侧偏移。例如,你于列元素上长“col-md-offset-4”,表示该列向右侧走4个列的升幅
唯独有一个细节要留意,使用”col-md-offset-*”对列进行向右侧偏移时,要力保列与偏移列的总数不跳12,不然会致列断行显示

4.5列排序
排排序其实就算是移列的取向,就是改左右生成,并且安装浮动的离开。在Bootstrap框架的网格系统中凡是通过丰富类名“col-md-push-*”和“col-md-pull-*”
(其中星号代表走的列组合数)。

4.6排列的嵌套
Bootstrap框架的网格系统还支持排的嵌套。你得当一个列中添加一个还是多个实施(row)容器,然后以斯行容器中插列(像前介绍的平等使用列)。

第5章 菜单、按钮及导航
5.1下拉菜单
1、使用一个叫吧“dropdown”的容器包裹了整下拉菜单元素,示例中为:
<div class=”dropdown”></div>
2、使用了一个<button>按钮做啊父菜单,并且定义类名“dropdown-toggle”和于定义“data-toggle”属性,且值必须跟极其外容器类名一致,此示例为:
data-toggle=”dropdown”
3、下拉菜单项用一个ul列表,并且定义一个类名为“dropdown-menu”,此示例为:
<ul class=”dropdown-menu”>

5.3下拉菜单(下拉分隔线)
于Bootstrap框架中之下拉菜单还提供了下拉分隔线,假要下拉菜单来少独组,那么组以及组中可以经丰富一个缺损的<li>,并且被这个<li>添加类名“divider”来兑现增长下拉分隔线的效应。

5.4下拉菜单(菜单标题)
通过添加dropdown-header类可以让每个组添加一个脑袋(标题)

5.5下拉菜单(对齐方式)
Bootstrap框架中下拉菜单默认是左对联合,如果您想吃下拉菜单相对于父容器右对合时,可以在“dropdown-menu”上上加一个“pull-right”或者“dropdown-menu-right”类名,

5.6下拉菜单(菜单项状态)
下拉菜单项之默认的状态(不用安装)有浮动状态(:hover)和焦点状态(:focus)还有当前状态(.active)和剥夺状态(.disabled)。这简单种状态下方式只有待在相应的菜系项上助长对应的类名:

5.7按钮(按钮组)
对此组织方面,非常的简单。使用一个称为也“btn-group”的器皿,把多个按钮放到这个容器被。

5.8按钮(按钮工具栏)
而一味需要以按钮组“btn-group”按组放在一个百般的器皿“btn-toolbar”中

5.9按钮(嵌套分组)
动的时刻,只需要拿当年打下拉菜单的“dropdown”的器皿换成“btn-group”,并且与日常的按钮放在同一级

5.10按钮(垂直分组)
我们只待将水平分组的“btn-group”类名换成“btn-group-vertical”

5.11按钮(等分按钮)
自打适应分组按钮,其促成方式也生之简,只需要以按钮组“btn-group”上多一个“btn-group-justified”类名

5.12按钮下拉菜单
按钮下拉菜单其实就算是惯常的下拉菜单,只不过把“<a>”标签元素换成了“<button>”标签元素。唯一不同之是外表容器“div.dropdown”换成了“div.btn-group”

5.13按钮的朝向下发展三角形
按钮的通向下三角形,我们是经过以<button>标签中上加一个“<span>”标签元素,并且命名也“caret”:
得在“.btn-group”类及平添“dropup”类名(这也是举行向上弹起下拉菜单要用的类名)。

5.15导航
Bootstrap框架中打导航长主要通过“.nav”样式。默认的“.nav”样式不提供默认的领航样式,必须附加另外一个体制才会立竿见影,比如“nav-tabs”、“nav-pills”之类
假如我们怀念被“Home”项为当前选中项,只待以该标签及补偿加类名“class=”active””
部分选择项卡还含禁用状态,实现如此的功能,只待在标签项达到加上“class=”disabled””
胶囊形(pills)导航只需要拿类名“nav-tabs”换成“nav-pills”
打造垂直堆叠导航只需要以“nav-pills”的功底及上加一个“nav-stacked”

5.16从适应导航(使用)
只不过当制造于适应导航时易了别样一个类名“nav-justified”。当然他要以及“nav-tabs”或者“nav-pills”配合在一起使用。

5.17导航加下拉菜单(二级导航)
偏偏需要拿li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul

5.18迎包屑式导航
应用方式就十分简单,为ol加入breadcrumb类

第六章 导航条
6.1基础导航条
首先步:首先以打导航的列表(<ul
class=”nav”>)基础及添加类名“navbar-nav”
第二步:在列表外部添加一个容器(div),并且采用类名“navbar”和“navbar-default”

6.2拉动表单的导航修
于navbar容器中放置一个分包navbar-form类名的表单

6.3定点导航条
Bootstrap框架提供了有限种永恒导航条之主意:

? .navbar-fixed-top:导航长条稳定于浏览器窗口顶部

? .navbar-fixed-bottom:导航漫长稳定在浏览器窗口底部
单单需要在炮制导航修最外部容器navbar上添对应之类名
有bug及解决办法:
body {
padding-top: 70px;/*来顶部固定导航条时设置*/
padding-bottom: 70px;/*出根固定导航条时设置*/
}
咱俩尚发生其他的解决方法,把稳定导航条都放在页面内容前面:

6.4响应式导航条
使用方法:

1、保证在窄屏时欲折叠的内容必须包裹在带动一个div内,并且也这div加入collapse、navbar-collapse两独类名。最后也是div添加一个class类名或者id名。

2、保证在窄屏时假如显的图标样式(固定写法):

<button class=”navbar-toggle” type=”button”
data-toggle=”collapse”>
<span class=”sr-only”>Toggle Navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
3、并为button添加data-target=”.类名/#id名”

6.5反色导航条
动办法并凭分,只是将navbar-deafult类名换成navbar-inverse。

6.6分页导航(带页码的分页导航)
于ul标签上加入pagination方法

6.7分页导航(翻页分页导航)
为ul标签进入pager类:
默认情况之下,翻页分页导航是置身中显得,但片时候我们需要一个居左,一个居右。Bootstrap框架提供了片只样式:

? previous:让“上一样步”按钮居左

? next:让“下一致步”按钮居右

6.8标签
比如说在导航及加加了一个新导航项,可能就是见面加一个“new”标签,来报告用户。这是初加上的领航项
那当Bootstrap框架中特意用这么的效益提取出来改成一个签组件,并且因为“.label”样式来贯彻高亮显示。
同按钮元素button类似,label样式也提供了多种颜色:

? label-deafult:默认标签,深灰色

? label-primary:主要标签,深蓝色

? label-success:成功标签,绿色

? label-info:信息标签,浅蓝色

? label-warning:警告标签,橙色

? label-danger:错误标签,红色

6.9徽章
徽章效果与前介绍的标签效应是绝的貌似。也是用来开片提示信息使用
在Bootstrap框架中,把这种效应称当徽章效果,使用“badge”样式来贯彻

第七段:其它内置组件
7.1缩略图(一)
Bootstrap框架将即刻同样总统独立化一个模块组件。并经过“thumbnail”样式配合bootstrap的网格系统来贯彻。
每当单独来缩略图的根底及,添加了一个div名为“caption“的容器,在此容器被放置任何内容,比如说标题,文本描述,按钮等:

7.2默认警示框
Bootstrap框架通过“alert“样式来兑现警示框效果。在默认情况之下,提供了季栽不同的告诫框效果:

1、成功警示框:告诉用用户操作成,在“alert”样式基础及长“alert-success”样式,具体见的是背景、边框和文件都是绿色;

2、信息警示框:给用户提供提示信息,在“alert”样式基础及增加“alert-info”样式,具体表现的是背景、边框以及文书都是浮光掠影蓝色;

3、警告警示框:提示用户小心操作(提供警告信息),在“alert”样式基础及搭“alert-warning”样式,具体见的是背景、边框、文本都是浅黄色;

4、错误警示框:提示用户操作不当,在“alert”样式基础及多“alert-danger”样式,具体表现的凡背景、边框以及文书都是浅红色。

7.3不过关闭的警示框
单独待在默认的警示框里面上加一个关闭按钮。然后开展三独步骤:

1、需要以核心警示框“alert”的基本功及加上“alert-dismissable”样式。

2、在button标签中入class=”close”类,实现警示框关闭按钮的体制。

3、要包关闭以钮元素上安了打定义属性:“data-dismiss=”alert””(因为可关闭警示框需要靠Javascript来检测该属性,从而控制警示框的关门)。

7.4警示框的链接
Bootstrap框架是通过让警示框加的链接添加一个称呼也“alert-link”的类名,通过“alert-link”样式给链接提供高亮显示。

7.5进度久–基本样式
Bootstrap框架中为是比照这样的艺术贯彻之,他供了点滴单容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。其中progress用来安进度修的器皿样式,而progress-bar用于限制进度条的快。

7.6速度长达–彩色进度条
? progress-bar-info:表示信息速长长的,进度长条颜色也蓝色

? progress-bar-success:表示成功进度漫长,进度漫长颜色为绿色

? progress-bar-warning:表示警告进度修,进度修颜色吗香艳

? progress-bar-danger:表示错误进度条,进度久颜色吗革命
具体用就非常简单了,只需要在基础的进度上加码对应之类名。

7.7快漫长–条纹进度漫长
以Bootstrap框架中的条纹进度修就待以速条之容器“progress”基础及搭类名“progress-striped”

7.8进度长达–动态条纹进度长长的
以速长条“progress progress-striped”两只八九不离十的根底及再参加“active”类名。

7.9进度漫长–层叠进度漫漫
无非需以“progress”容器中长对应的快慢条

7.10进度久–带Label的进度久
只需要在速长长的吃上加而要之值

7.11媒体对象–默认媒体对象
? 媒体对如的器皿:常使“media”类名表示,用来包容媒体对象的有内容

?
媒体对像的靶子:常利用“media-object”表示,就是传媒对象被的目标,常常是图片

?
媒体对象的基本点:常使“media-body”表示,就是媒体对像中的重头戏内容,可以是任何因素,常常是图侧边内容

?
媒体对象的标题:常采用“media-heading”表示,就是之所以来讲述对象的一个标题,此部分可选
而外上面四独片以外,在Bootstrap框架中尚常常使“pull-left”或者“pull-right”来支配媒体对象被之目标浮动方式。

7.11媒体对象–媒体对象的嵌套
止需要以另外一个媒体对象组织放置于传媒对象的核心内“media-body”

7.12传媒对象–媒体对象列表
Bootstrap框架提供了一个列表展示的力量,在写结构的时光可采取ul,并且以ul上补偿加类名“media-list”,而在li上应用“media”

7.13排表组–基础列表组
? list-group:列表组容器,常用之凡ul元素,当然为堪是ol或者div元素
? list-group-item:列表项,常用的凡li元素,当然为得以是div元素

7.14排表组–带徽章的列表组
具体做法很简单,只待以“list-group-item”中补充加徽章组件“badge”:

7.15列表组–自定义列表组
? list-group-item-heading:用来定义列表项头部样式
? list-group-item-text:用来定义列表项重大内容

7.16排列表组–列表项的状态设置
? active:表示手上状态
? disabled:表示禁用状态

7.17排列表组–多彩列表组
? list-group-item-success:成功,背景色绿色

? list-group-item-info:信息,背景色蓝色

? list-group-item-warning:警告,背景色为黄色

? list-group-item-danger:错误,背景色为红

倘若你想被列表项上加什么背景色,只待在“list-group-item”基础及搭对应之类名:

7.18面板–基础面板
基础面板非常简单,就是一个div容器运用了“panel”样式,产生一个享边框的文书显示块。由于“panel”不控制主题颜色,所以于“panel”的根底及平添一个控制颜色之主题“panel-default”,另外在内部上加了一个“div.panel-body”来放面板主体内容

7.19面板–带有头和尾的面板
? panel-heading:用来安装面板头部样式
? panel-footer:用来设置面板尾部样式

7.20面板–彩色面板
? panel-primary:重点蓝

? panel-success:成功绿

? panel-info:信息蓝

? panel-warning:警告黄

? panel-danger:危险红
运用方式就是生粗略了,只待以panel的类名基础及长和谐索要的类名

7.21面板–面板中嵌套表格
每当利用面板的时光,都见面于panel-body放置需要的情,可能是图表、表格或者列表等

第八章JavaScript插件
8.1导入JavaScript插件
? 动画过渡(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”

上述单独插件的下载可到github去下载(https://github.com/twbs/bootstrap)。

8.2卡通过渡(Transitions)
transition.js文件呢Bootstrap具有通动画效果的零部件提供了动画片过渡效果。不过用注意的是,这些连动画都是动CSS3来落实的,所以IE6-8浏览器是匪抱有这些连动画效果。

8.3模态弹出框(Modals)
? 弹出框头部,一般以“modal-header”表示,主要包括标题和倒闭按钮

? 弹出框主体,一般采用“modal-body”表示,弹出框的机要内容

? 弹出框脚部,一般以“modal-footer”表示,主要放置操作按钮

8.3模态弹出框–触发模态弹出窗2种植办法
办法一致:模态弹出窗声明,只需要从定义两单必要之习性:data-toggle和data-target(bootstrap中声明式触发方法一般仰仗让这些由定义之data-xxx
属性。比如data-toggle=”” 或者 data-dismiss=””)
计二:触发模态弹出窗也可以是一个链接<a>元素,那么可用链接元素自带的href属性替代data-target属性

8.4模态弹出框–为弹出框增加过度动画效果
只是经吃“.modal”增加类名“fade”为模态弹出框增加一个属动画效果。

相关文章