bootstrap基础知识学习笔记（含相关JS下载链接）
标签
--
我的第一个bootstrap标题
--
如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
Bootstrap还通过元素标签:（副标题）、（加粗）、（斜体）和给文本做突出样式处理。
--
我是一个普通的段落，我不需要腔调显示
--
这部分内容需要特别的腔调，我和别人长得不一样
在Bootstrap中，可以使用和标签让文本直接加粗。
--强调
--强调
斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签或来实现。
--
我正在学习Bootstrap。我发现Bootstrap真的好强大。
使用标签、等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过颜色来表示强调，具本说明如下：
.text-muted：提示，使用浅灰色（#999） --
.text-primary：主要，使用蓝色（#428bca） --
.text-success：成功，使用浅绿色(#3c763d) --
.text-info：通知信息，使用浅蓝色（#31708f） --
.text-warning：警告，使用黄色（#8a6d3b） --
.text-danger：危险，使用褐色（#a94442）--
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
.text-left：左对齐 --
我居左
.text-center：居中对齐 --
我居中
.text-right：右对齐 --
我居右
.text-justify：两端对齐 --
两端对齐
在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
--
通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。
--
- class="list-inline">
- W3cplus
- Blog
- CSS3
- jQuery
- PHP
定义列表而言，Bootstrap并没有做太多的调整，只是调整了行间距，外边距和字体加粗效果。dl dt dd
--
- 北京
- 北京是中国的首都，是政治文化集中地
- 上海
- 上海号称东方的巴黎
水平定义列表就像内联列表一样，Bootstrap可以给
- 添加类名“.dl-horizontal”给定义列表实现水平显示效果。
- 标题一:
- 描述内容
- 标题二:
- 描述内容
- 苹果
- 香蕉
- 梨
- 桃
- ，并且给这个
- 添加类名“divider”来实现添加下拉分隔线的功能。
--
- class="divider">
- class="dropdown-header">水果
-
-
- Home
- CSS3
- Sass
- jQuery
- Responsive
- class="active">Home
- class="disabled">Home
- 性能优化之PHP优化
- Canvas绘图详解
- 玩转bootstrap
- 基于bootstrapcdn的网页开发
-
性能优化之PHP优化
123
-
Canvas绘图详解
123
-
玩转bootstrap
123
-
基于bootstrapcdn的网页开发
123
--
- class="dl-horizontal">
->
1、使用来显示单行内联代码
2、使用来显示多行块代码
3、使用来显示用户输入代码
不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。而且对于代码块风格，标签前面留多少个空格，在显示效果中就会留多少个空格。
请使用ctrl+x复制代码，然后使用ctrl+shift+v将复制的代码粘贴到需要的地方。
在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：
☑ .table：基础表格
☑ .table-striped：斑马线表格
☑ .table-bordered：带边框的表格
☑ .table-hover：鼠标悬停高亮的表格
☑ .table-condensed：紧凑型表格
☑ .table-responsive：响应式表格
Bootstrap还为表格的行元素
|
Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）见下图。 在
焦点状态：控件在焦点状态下有焦点的状态效果，需要给控件添加类名“form-control”,焦点状态是通过伪类“:focus”来实现 form-control input-lg" type="text" placeholder="焦点点状态下效果">
禁用状态: 在需要禁用的表单控件上加上“disabled” 在使用了“form-control”的表单控件中，样式设置了禁用表单背景色为灰色，而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”，禁用的控件只会有一个不准输入的手型出来。
验证状态：在Bootstrap框架中同样提供这几种效果。 1、.has-warning:警告状态（黄色） 2、.has-error：错误状态（红色） 3、.has-success：成功状态（绿色） class="form-group has-success">
class="form-control" id="inputSuccess1" placeholder="成功状态" > 在 Bootstrap 的小图标都是使用@font-face来制作（后面的内容中将会着重用一节内容来介绍）。而且必须在表单中添加了一个 span 元素，如： --
表单提示信息：使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部 --
你输入的信息是正确的
在Bootstrap V2.x版本中还提供了一个行内提示信息，其使用了类名“help-inline”。一般让提示信息显示在控件的后面，也就是同一水平显示。
按钮 Bootstrap框架V3.x版本的基本按钮和V2.x版本的基本按钮一样，都是通过类名“btn”来实现。 -- -- -- 各种标签都可以成为按钮 -- -- --a标签按钮 --span标签按钮 -- div标签按钮
使用起来就很简单，就像前面介绍的默认按钮一样的使用方法，只需要在基础按钮“.btn”基础上追加对应的类名，就可以得到需要的按钮风格。 -- -- -- -- -- -- -- -- 按钮大小： -- -- -- -- 块状按钮： -- 针对按钮的状态效果主要分为两种：活动状态和禁用状态 Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）几种 在Bootstrap框架中，要禁用按钮有两种实现方式： 方法1：在标签中添加disabled属性 方法2：在元素标签中添加类名“disabled” “.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。 对于标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。 -- --
图像
Bootstrap框架中对于图像的样式风格提供以下几种风格： 1、img-responsive：响应式图片，主要针对于响应式设计 2、img-rounded：圆角图片 3、img-circle：圆形图片 4、img-thumbnail：缩略图片 --
缩略图
图标 在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码 --glyphicon glyphicon-search">
网格系统 Bootstrap框架的网格系统工作原理如下： 1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。 -- container">
row">
2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12 -- 4">
8">
网格系统用来布局，其实就是列的组合
我们不希望相邻的两个列紧靠在一起，但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。
只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。 不过有一个细节需要注意，使用”col-md-offset-*”对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示 --
.col-md-4
列向右移动四列的间距
.col-md-3
col-md-4”居左，“col-md-8”居右，如果要互换位置，需要将“col-md-4”向右移动８个列的距离，也就是8个offset ,也就是在“ 也要将“col-md-8”向左移动４个列的距离，也就是4个offset，在“ col-md-offset-*，是利用margin-left实现的，col-md-push-*/col-md-pull-*是利用相对定位实现的。效果的区别，col-md-offset-*只能向右便宜，因为实现方式就是margin-left，而push/pull因为是相对定位，既可以左偏移也可以右偏移还有一点，如果一行的偏移量+实际的宽度综合超过12，col-md-offset会换行显示，也是因为margin，而push/pull只会一部分不可见（超出容器），因为是相对自身定位。 Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（row），宽度为100%时，就是当前外部列的宽度。 -- 我的里面嵌套了一个网格 我的里面嵌套了一个网格 下拉菜单 在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件。当然，如果你使用的是未编译版本，在js文件夹下你能找到一个名为“dropdown.js”的文件。你也可以调用这个js文件。不过在我们的教程中，我们统一调用压缩好的“bootstrap.min.js”文件： -- 特别声明：因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果。 使用方法：在使用Bootstrap框架中的下拉菜单组件时，其结构运用的正确与否非常的重要，如果结构和类名未使用正确，直接影响组件是否能正常运用。我们来简单的看看： 1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为: -- 2、使用了一个 --data-toggle="dropdown" 3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为: -- 选择你喜欢的水果 class="caret"> 下拉菜单（下拉分隔线）假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的 通过添加“divider”可以将下拉菜单分组，为了让这个分组更明显，还可以给每个组添加一个头部（标题） -- 下拉菜单默认是左对齐，如果你想让下拉菜单相对于父容器右对齐时，可以在ul的“dropdown-menu”上添加一个“dropdown-menu-right”类名 还有“dropdown-menu-left” -- 下拉菜单（菜单项状态） -- -- 按钮（按钮组） 除了可以使用 -- 按钮（按钮工具栏） 将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中 按钮组的大小，我们也可以通过类似的方法： ☑ .btn-group-lg:大按钮组 ☑ .btn-group-sm:小按钮组 ☑ .btn-group-xs:超小按钮组 只需要在“.btn-group”类名上追加对应的类名，就可以得到不同大小的按钮组。 -- 按钮（嵌套分组） 使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。 -- 水平分组的“btn-group”类名换成“btn-group-vertical” -- 等分按钮也常被称为是自适应分组按钮，其实现方法也非常的简单，只需要在按钮组“btn-group”上追加一个“btn-group-justified”类名 按钮的向上和向下 其实只要在更换dropdown(向下)，dropup(向上)，与图标无关 -- 导航 Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。 -- 假设我们想让“Home”项为当前选中项，只需要在其标签上添加类名“class="active"”即可 -- 除了当前项之外，有的选项卡还带有禁用状态，实现这样的效果，只需要在标签项上添加“class="disabled"” -- 导航（胶囊形(pills)导航） 其实现方法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”即可 -- 导航（垂直堆叠的导航） 制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可 -- 自适应导航 自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用 -- 面包屑式导航 使用方式就很简单，为ol加入breadcrumb类 -- 导航条 导航条（navbar）和导航（nav），在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Bootstrap框架中导航条的使用。 基础导航条 在制作一个基础导航条时，主要分以下几步： 第一步：首先在制作导航的列表( 第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default” 为导航条添加标题、二级菜单及状态 在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过“navbar-header”和“navbar-brand”来实现
带表单的导航条 在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单 只有当浏览器视窗宽度大于768px生效 固定导航条 导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式： ☑ .navbar-fixed-top：导航条固定在浏览器窗口顶部 ☑ .navbar-fixed-bottom：导航条固定在浏览器窗口底部 使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可 -- 存在bug及解决方法:从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。 为了避免固定导航条遮盖内容，我们需要在body上做一些处理： body { padding-top: 70px;/*有顶部固定导航条时设置*/ padding-bottom: 70px;/*有底部固定导航条时设置*/ } 响应式导航条 1.保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。 2.保证在窄屏时要显示的图标样式（固定写法） 3.并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定 -- 反色导航条 只是将navbar-deafult类名换成navbar-inverse -- 分页导航（带页码的分页导航） 在Bootstrap框架中，也可以通过几个不同的情况来设置其大小。类似于按钮一样： 1、通过“pagination-lg”让分页导航变大； 2、通过“pagination-sm”让分页导航变小： 分页导航（翻页分页导航） 在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类 默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式： ☑ previous：让“上一步”按钮居左 ☑ next：让“下一步”按钮居右 只需要在li标签上添加对应类名即可 -- 标签 默认标签深灰色 主要标签 深蓝色 成功标签 绿色 信息标签 浅蓝色 警告标签橙色 错误标签红色 徽章 像标签一样，使用span标签来制作，然后为他加入badge类 --23 缩略图通过“thumbnail”样式配合bootstrap的网格系统来实现 缩略图配合标题、描述内容，按钮 在仅有缩略图的基础上，添加了一个div名为“caption“的容器，在这个容器中放置其他内容，比如说标题，文本描述，按钮 警示框 -- 请修改相应内容 谢谢，操作成功！ 您已操作失败两次，还有最后一次机会 对不起，您刚才的操作失败 可关闭的警示框 1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。 -- 2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。 -- 3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。 -- -- 请修改相应信息 警示框的链接 Oh snap!class="alert-link" href="#">Change a few things up and try submitting again. 进度条 基本进度条 外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。 彩色进度条 条纹进度条 动态条纹进度条 正常层叠进度条 层叠条纹进度条 进度条--带Label的进度条 媒体对象--默认媒体对象 媒体对象常常包括以下几个部分： ☑ 媒体对像的容器：常使用“media”类名表示，用来容纳媒体对象的所有内容 ☑ 媒体对像的对象：常使用“media-object”表示，就是媒体对象中的对象，常常是图片 ☑ 媒体对象的主体：常使用“media-body”表示，就是媒体对像中的主体内容，可以是任何元素，常常是图片侧边内容 ☑ 媒体对象的标题：常使用“media-heading”表示，就是用来描述对象的一个标题，此部分可选 媒体对象的嵌套 列表组 在Bootstrap框架中的基础列表组主要包括两个部分： ☑ list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素 ☑ list-group-item：列表项，常用的是li元素，当然也可以是div元素 带徽章的列表组 带链接的列表组 自定义列表组 Bootstrap框加在链接列表组的基础上新增了两个样式： ☑ list-group-item-heading：用来定义列表项头部样式 ☑ list-group-item-text：用来定义列表项主要内容 这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容 class="list-group-item-text">详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性... class="list-group-item-text">致力于为中国开发者提供最全面，最具影响力，最前沿的Sass相关技术与教程... 列表项的状态设置 多彩列表组 Bootstrap为不同的状态提供了不同的背景颜色和文本色，可以使用这几个类名定义不同背景色的列表项。 ☑ list-group-item-success：成功，背景色绿色 ☑ list-group-item-info：信息，背景色蓝色 ☑ list-group-item-warning：警告，背景色为黄色 ☑ list-group-item-danger：错误，背景色为红色 如果你想给列表项添加什么背景色，只需要在“list-group-item”基础上增加对应的类名 list-group-item-success">性能优化之PHP优化10 list-group-item-info">Canvas绘图详解3 面板 基础面板 一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容 带有头和尾的面板 面板增加“面板头部”和“页面尾部”的效果： ☑ panel-heading：用来设置面板头部样式 ☑ panel-footer：用来设置面板尾部样式 彩色面板 在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板： ☑ panel-primary：重点蓝 ☑ panel-success：成功绿 ☑ panel-info:信息蓝 ☑ panel-warning：警告黄 ☑ panel-danger：危险红 使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名 panel-fault 换成其他样式 面板中嵌套表格 在panel-body中加入 如果希望表格和面板边缘不需要有任何的间距 需要把table提取到panel-body外面 详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
面板中嵌套列表组 原理同上,把 导入JavaScript插件 单独导入特效文件，Bootstrap V3.2中提供了12种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）。 |
