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

1、当主标题下供给副标题时可在h中嵌套small
<h1>nihao<small>a</samll></h1>

二、当某一段落需求杰出呈现时可增多lead类,其效果就是增大文本字号,加粗文本,而且对行高和margin也做相应的拍卖
class=”lead”

三、在常常的因素中大家1般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中,能够选拔<b>和<strong>标签让文本直接加粗。

肆、斜体类似于加粗同样,除了能够给成分设置样式font-style值为italic达成之外,在Bootstrap中还足以通过使用标签<em>或<i>来兑现。

伍、强调相关的类名
.text-muted: 提醒,使用浅黄褐(#999)
.text-primary:重要,使用青色(#428bca)
.text-success:成功,使用土日光黄(#3c763d)
.text-info: 文告新闻,使用中性(neutrality)天蓝(#31708f)
.text-warning:警告,使用丁香紫(#8a6d3b)
.text-danger: 惊险,使用铜锈绿(#a94442)

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

7、去点冬辰列表
bootstrap为无数开辟者考虑的可怜周道,通过给冬日列表增添2个类名“.list-unstyled”,那样就足以去除私下认可的列表样式的风格。

捌、内联列表 用于创造导航条
经过加多类名“.list-inline”来兑现内联列表,轻易点说正是把垂直列表换来水平列表,而且去掉项目的识(编号),保持水平显得。也足以说内联列表就是为创设水平导航而生。

9、代码风格
在Bootstrap首要提供了二种代码风格:
一、使用<code></code>来显示单行内联代码
您只须要在pre标签上增添类名“.pre-scrollable”,就足以调节代码块区域最大惊人为340px,一旦超越那其中度,就会在Y轴出现滚动条
贰、使用<pre></pre>来突显多行块代码
三、使用<kbd></kbd>来呈现用户输入代码

十、Bootstrap为表格不相同的样式风格提供了区别的类名,重要不外乎:
.table:基础表格
给表格设置了margin-bottom:20px以及安装单元内距
在thead后面部分设置了一个二px的深深青莲实线
各种单元格顶部设置了1个一px的黄褐实线
.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”>

1壹、<tr>提供了二种不相同的类名,每种类名调控了行的两样背景颜色
.active 表示近来活动的新闻
.success 代表成功依然正确的作为
.info 表示中立的新闻或行为
.warning 代表警告 要特别注意
.danger 代表危急也许只怕的错误行为

第三章 表单
三.一基础表单
在Bootstrap框架中,通过定制了二个类名`form-control`,约等于说,即便那多少个要素运用了类名“form-control”,将会促成部分规划上的定制效果。
一、宽度形成了百分百
2、设置了3个浅海蓝(#ccc)的边框
3、具有4px的圆角
4、设置阴影效果,并且成分获得难题之时,阴影和边框效果聚会场全数转变
5、设置了placeholder的颜料为#999

三.二水准表单
在Bootstrap框架中要促成程度表单效果,必须满意以下三个规格:
1、在<form>成分是利用类名“form-horizontal”。
2、同盟Bootstrap框架的网格系统。

三.三内联表单
您只要求在<form>成分中增多类名“form-inline”就能够。

叁.四表单控件(输入框input)
在Bootstrap中运用input时也非得增添type类型,如若未有点名type类型,将无法赢得不错的体裁,因为Bootstrap框架都是透过input[type=“?”](其中?号代表type类型
为了让控件在各类表单风格中样式不不可信赖,供给加多类名“form-control”

三.伍表单控件(下拉采纳框select)
Bootstrap框架中的下拉精选框使用和原有的如出一辙,多行选取设置multiple属性的值为multiple。

叁.6表单控件(复选框checkbox和单选拔按键radio)
.checkbox .radio

三.7表单控件(复选框和单选按键水平排列)
一、假使checkbox必要程度排列,只要求在label标签上增多类名“checkbox-inline”
二、假诺radio须求程度排列,只须要在label标签上增添类名“radio-inline”

三.捌表单控件(按钮)
在Bootstrap框架中的开关都是利用<button>来贯彻。

三.九表单控件大小
壹、input-sm:让控件比正规尺寸更加小
二、input-lg:让控件比正规尺寸越来越大

三.十表单控件状态(核心状态)
要点状态是经过伪类“:focus”来落到实处
要让控件在热门状态下有样式效果,供给给控件增加类名“form-control”

三.11表单控件状态(禁止使用状态)
只供给在要求禁止使用的表单控件上足够“disabled”就可以:
倘若田野同志set设置了disabled属性,整个域都将远在被剥夺状态。

3.1二表单控件状态(验证状态)
在创造表单时,不免要做表单验证。相同也亟需提供验证状态样式,在Bootstrap框架中同样提供那三种意义。
1、.has-warning:警告状态(影青)
2、.has-error:错误状态(灰绿)
3、.has-success:成功景色(暗青)
利用的时候只要求在form-group容器上相应增添状态类名
设若您想让表单在相应的景观下显得 icon
出来,只要求在对应的情形下增添类名“has-feedback”。请留心,此类名要与“has-error”、“has-warning”和“has-success”在一起:
只顾:唯有在长途引用css文件时iconLogo才会有用

3.13表单提醒消息
在Bootstrap框架中央银行使了叁个”help-block”样式,将提示消息以块状展现,并且展现在控件尾部。

三.第11四中学央开关
Bootstrap框架V三.x版本的中坚开关和V2.x版本的中坚按键同样,都以经过类名“btn”来贯彻。
能够透过input a span 等标签完成

三.壹5暗中认可按键
Bootstrap框架首先通过基础类名“.btn”定义了多少个基础的开关风格,然后经过“.btn-default”定义了贰个暗中认可的开关风格。

3.20按键大小
开关可通过.btn-lg .btn-sm .btn-xs来改动开关的大大小小

3.21块状开关
Bootstrap框架中提供了多少个类名“btn-block”。开关使用这些类名就足以让按钮充满整个容器,并且这么些按键不会有任何的padding和margin值。

叁.2二按键状态——活动状态
Bootstrap按键的活动状态首要归纳开关的飘浮状态(:hover),点击状态(:active)和纽带状态(:focus)三种。

三.二3开关状态——禁止使用状态
在Bootstrap框架中,要禁止使用按键有两种完结格局:
主意1:在标签中增添disabled属性
格局二:在要素标签中增多类名“disabled”
倘使通过类名“.disable”来剥夺按键,其链接行为是无力回天禁止。而在要素标签中增加“disabled”属性的办法是能够禁止成分的暗许行为的。

3.24图像
一、img-responsive:响应式图片,重要针对于响应式设计
贰、img-rounded:圆角图形
三、img-circle:圆形图片
四、img-thumbnail:缩略图片

3.25 200个icon:
Bootstrap框架中的Logo都以字体图标,其促成原理就是经过@font-face属性加载了字体。

第四章 网格系统
一、数据行(.row)必须包蕴在容器(.container)中,以便为其授予合适的对齐格局和内距(padding)。
二、在行(.row)中可以增加列(.column),但列数之和无法超过平分的总列数,比如1二
三、具体内容应当放置在列容器(column)之内,而且唯有列(column)才足以视作行容器(.row)的直白子成分

4.4列偏移
只必要在列元素上加多类名“col-md-offset-*”(在那之中星号代表要偏移的列组合数),那么具备这些类名的列就会向右偏移。例如,你在列成分上助长“col-md-offset-4”,表示该列向右移动几个列的拉长率
只是有1个细节必要小心,使用”col-md-offset-*”对列实行向右偏移时,要确认保证列与偏移列的总和不超过12,不然会致列断行展现

4.5列排序
列排序其实便是退换列的取向,正是改动左右变化,并且安装浮动的离开。在Bootstrap框架的网格系统中是由此丰裕类名“col-md-push-*”和“col-md-pull-*”
(在那之中星号代表活动的列组合数)。

四.陆列的嵌套
Bootstrap框架的网格系统还帮助列的嵌套。你能够在三个列中加多三个要么四个行(row)容器,然后在那个行容器中插入列(像后面介绍的1律选用列)。

第陆章 菜单、开关及导航
5.1下拉菜单
一、使用二个名称为“dropdown”的器皿包裹了整套下拉菜单成分,示例中为:
<div class=”dropdown”></div>
贰、使用了一个<button>开关做为父菜单,并且定义类名“dropdown-toggle”和自定义“data-toggle”属性,且值必须和最外容器类名1致,此示例为:
data-toggle=”dropdown”
三、下拉菜单项使用3个ul列表,并且定义二个类名称为“dropdown-menu”,此示例为:
<ul class=”dropdown-menu”>

伍.三下拉菜单(下拉分隔线)
在Bootstrap框架中的下拉菜单还提供了下拉分隔线,假如下拉菜单有八个组,那么组与组之间能够通过增加多个空的<li>,并且给这一个<li>增添类名“divider”来贯彻拉长下拉分隔线的功用。

5.四下拉菜单(菜单标题)
因而增加dropdown-header类能够给各种组增多三个头顶(标题)

伍.伍下拉菜单(对齐情势)
Bootstrap框架中下拉菜单私下认可是左对齐,假诺你想让下拉菜单相对于父容器右对齐时,能够在“dropdown-menu”上增多1个“pull-right”或然“dropdown-menu-right”类名,

伍.陆下拉菜单(菜单项状态)
下拉菜单项的默许的场馆(不用安装)有浮动状态(:hover)和关键状态(:focus)还有当前地方(.active)和剥夺状态(.disabled)。那三种情形使用办法只必要在对应的菜单项上增添对应的类名:

5.7按钮(按钮组)
对此组织方面,分外的差不多。使用1个名称叫“btn-group”的容器,把四个开关放到那几个容器中。

伍.八按键(按键工具栏)
您只须要将开关组“btn-group”按组放在二个大的器皿“btn-toolbar”中

伍.九按键(嵌套分组)
应用的时候,只需求把当年塑造下拉菜单的“dropdown”的器皿换到“btn-group”,并且和日常的按键放在同拔尖

5.十按键(垂直分组)
我们只必要把水平分组的“btn-group”类名换到“btn-group-vertical”

伍.11开关(等分开关)
自适应分组开关,其实现方式也不行的粗略,只供给在开关组“btn-group”上平添贰个“btn-group-justified”类名

5.1二开关下拉菜单
开关下拉菜单其实就是寻常的下拉菜单,只但是把“<a>”标签成分换来了“<button>”标签元素。唯1不一致的是外部容器“div.dropdown”换来了“div.btn-group”

5.壹叁按键的向下发展三角形
开关的向下三角形,大家是经过在<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”

伍.1陆自适应导航(使用)
只不过在营造自适应导航时改造了另2个类名“nav-justified”。当然他索要和“nav-tabs”恐怕“nav-pills”协作在联合使用。

5.1柒导航加下拉菜单(二级导航)
只需求将li当作父容器,使用类名“dropdown”,同时在li中嵌套另四个列表ul

伍.1捌面包屑式导航
应用方法就很不难,为ol加入breadcrumb类

第六章 导航条
6.一基础导航条
先是步:首先在炮制导航的列表(<ul
class=”nav”>)基础上增添类名“navbar-nav”
其次步:在列表外部增加3个器皿(div),并且采取类名“navbar”和“navbar-default”

陆.二带表单的导航条
在navbar容器中放置三个包含navbar-form类名的表单

陆.叁恒久导航条
Bootstrap框架提供了两种长久导航条的点子:

? .navbar-fixed-top:导航条固定在浏览器窗口顶部

? .navbar-fixed-bottom:导航条固定在浏览器窗口尾巴部分
只要求在炮制导航条最外部容器navbar上加码对应的类名
存在bug及缓解格局:
body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有尾巴部分固定导航条时设置*/
}
我们还有别的的消除办法,把牢固导航条都放在页面内容后面:

六.4响应式导航条
动用方法:

1、保险在窄屏时需求折叠的剧情必须包裹在带2个div内,并且为这几个div参加collapse、navbar-collapse八个类名。最终为这几个div加多三个class类名可能id名。

二、保险在窄屏时要展现的Logo准样品式(固定写法):

<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名”

陆.5反色导航条
行使方法并无差距,只是将navbar-deafult类名换来navbar-inverse。

陆.伍分页导航(带页码的分页导航)
在ul标签上投入pagination方法

六.七分页导航(翻页分页导航)
为ul标签进入pager类:
私下认可情形之下,翻页分页导航是居中展现,但局地时候我们要求二个居左,三个居右。Bootstrap框架提供了四个样式:

? previous:让“上一步”开关居左

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

6.8标签
譬如在导航上增多了二个新导航项,可能就会加2个“new”标签,来告诉用户。那是新加上的导航项
那么在Bootstrap框架中等专业学校门将这样的效应提抽取来改成2个标签组件,并且以“.label”样式来兑现高亮展现。
和按钮成分button类似,label样式也提供了八种颜料:

? label-deafult:暗中同意标签,深法国红

? label-primary:首要标签,碧洋蓟绿

? label-success:成功标签,浅青

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

? label-warning:警告标签,墨紫

? label-danger:错误标签,暗青

6.9徽章
徽章效果和后面介绍的价签效应是Infiniti的形似。也是用来做一些提醒音讯使用
在Bootstrap框架中,把那种效应称作为徽章效果,使用“badge”样式来兑现

第拾章:此外内置组件
7.1缩略图(一)
Bootstrap框架将那壹部独立成一个模块组件。并透过“thumbnail”样式协作bootstrap的网格系统来落到实处。
在仅有缩略图的基础上,加多了三个div名字为“caption“的容器,在这几个容器中放置任何内容,比如说题目,文本描述,开关等:

七.2暗中同意警示框
Bootstrap框架通过“alert“样式来贯彻警示框效果。在私下认可情形之下,提供了种种不相同的警示框效果:

一、成功警示框:告诉用用户操作成功,在“alert”样式基础上加码“alert-success”样式,具体表现的是背景、边框和文书都以高粱红;

二、音信警示框:给用户提供提示新闻,在“alert”样式基础上扩张“alert-info”样式,具体表现的是背景、边框和文件都以米煤黑;

叁、警告警示框:提醒用户小心操作(提供警告消息),在“alert”样式基础上平添“alert-warning”样式,具体表现的是背景、边框、文本都以浅巴黎绿;

肆、错误警示框:提醒用户操作不当,在“alert”样式基础上扩充“alert-danger”样式,具体表现的是背景、边框和文件都以浅深褐。

7.3可关闭的警示框
只需求在暗中同意的警示框里面增多3个关闭按键。然后实行四个步骤:

一、须要在核心警示框“alert”的功底上丰盛“alert-dismissable”样式。

二、在button标签中加入class=”close”类,达成警示框关闭按键的体制。

三、要力保关闭按键成分上安装了自定义属性:“data-dismiss=”alert””(因为可关闭警示框必要借助Javascript来检查测试该属性,从而决定警示框的关门)。

七.四警示框的链接
Bootstrap框架是经过给警示框加的链接增多3个名称为“alert-link”的类名,通过“alert-link”样式给链接提供高亮展现。

七.五进度条–基本样式
Bootstrap框架中也是按那样的办法完成的,他提供了两个容器,外容器使用“progress”样式,子容器使用“progress-bar”样式。个中progress用来设置进度条的容器样式,而progress-bar用于限制进程条的速度。

7.陆进程条–彩色进度条
? progress-bar-info:表示音讯进程条,进程条颜色为土黑

? progress-bar-success:表示成功进程条,进程条颜色为金黄

? progress-bar-warning:表示警告进度条,进程条颜色为高粱红

? progress-bar-danger:表示错误进程条,进程条颜色为革命
实际使用就相当简单了,只要求在基础的速度上扩大对应的类名。

7.7进程条–条纹进度条
使用Bootstrap框架中的条纹进程条只要求在进程条的器皿“progress”基础上扩展类名“progress-striped”

柒.8进程条–动态条纹进程条
在进程条“progress progress-striped”三个类的功底上再加入“active”类名。

七.玖进程条–层叠进程条
仅要求在“progress”容器中加上对应的进度条

七.10进度条–带Label的进程条
只供给在进程条中增加你须求的值

7.1一传播媒介对象–暗中同意媒体对象
? 媒体对像的器皿:常接纳“media”类名表示,用来包容媒体对象的持有剧情

?
媒体对像的靶子:常动用“media-object”表示,正是媒体对象中的对象,平日是图片

?
媒体对象的主体:常选用“media-body”表示,便是媒体对像中的主体内容,能够是别的因素,平日是图表侧边内容

?
媒体对象的标题:常利用“media-heading”表示,就是用来描述对象的2个题目,此部分可选
除此而外上边八个部分之外,在Bootstrap框架中还每每使用“pull-left”恐怕“pull-right”来支配媒体对象中的对象浮动情势。

7.1壹传播媒介对象–媒体对象的嵌套
只必要将另3个媒体对象协会放置在传播媒介对象的重点内“media-body”

七.1贰媒体对象–媒体对象列表
Bootstrap框架提供了1个列表呈现的机能,在写结构的时候能够选取ul,并且在ul上加多类名“media-list”,而在li上行使“media”

7.壹三列表组–基础列表组
? list-group:列表组容器,常用的是ul成分,当然也能够是ol或许div成分
? list-group-item:列表项,常用的是li元素,当然也足以是div成分

7.1四列表组–带徽章的列表组
具体做法很简短,只需求在“list-group-item”中增加徽章组件“badge”:

七.1伍列表组–自定义列表组
? list-group-item-heading:用来定义列表项尾部样式
? list-group-item-text:用来定义列表项首要内容

柒.16列表组–列表项的状态设置
? active:表示近日气象
? disabled:表示禁止使用状态

七.17列表组–多彩列表组
? list-group-item-success:成功,背景观金红

? list-group-item-info:音讯,背景观青色

? list-group-item-warning:警告,背景象为香艳

? list-group-item-danger:错误,背景象为革命

要是你想给列表项增添什么背景象,只供给在“list-group-item”基础上加码对应的类名:

七.1八面板–基础面板
基本功面板非常轻松,就是2个div容器运用了“panel”样式,发生二个装有边框的文书展现块。由于“panel”不调整主旨颜色,所以在“panel”的底子上加码三个说了算颜色的大旨“panel-default”,其余在里面增添了贰个“div.panel-body”来放置面板主体内容

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

柒.20面板–彩色面板
? panel-primary:重点蓝

? panel-success:成功绿

? panel-info:信息蓝

? panel-warning:警告黄

? panel-danger:危险红
选用方法就很简单了,只必要在panel的类名基础上加码本身索要的类名

7.二一面板–面板中嵌套表格
在选取面板的时候,都会在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)。

捌.二动画片过渡(Transitions)
transition.js文件为Bootstrap具有过渡动画效果的机件提供了动画过渡效果。然而供给小心的是,这几个过渡动画都是选拔CSS三来落实的,所以IE6-八浏览器是不具有那个过渡动画效果。

8.三模态弹出框(Modals)
? 弹出框尾部,1般选拔“modal-header”表示,首要不外乎标题和关闭按键

? 弹出框主体,1般选取“modal-body”表示,弹出框的严重性内容

? 弹出框脚部,1般采纳“modal-footer”表示,首要放置操作按键

八.3模态弹出框–触发模态弹出窗贰种方法
主意壹:模态弹出窗申明,只须要自定义八个必备的性质:data-toggle和data-target(bootstrap中申明式触发方法一般仰仗于这么些自定义的data-xxx
属性。比如data-toggle=”” 可能 data-dismiss=””)
艺术2:触发模态弹出窗也得以是1个链接<a>成分,那么能够应用链接成分自带的href属性代替data-target属性

捌.四模态弹出框–为弹出框扩张过度动画效果
可通过给“.modal”扩张类名“fade”为模态弹出框扩大二个连缀动画效果。

相关文章