Bootstrap学习笔记2

• • • 1. 表单
    • • 1.1 表单提示信息
      • 1.2 按钮
      • • 1.2.1 多标签支持
        • 1.2.2 按钮大小
        • 1.2.3 块状按钮
        • 1.2.4 按钮状态
      • 1.3 图像
      • 1.4 图标
    • 2. 网络系统
    • • 2.1 工作原理
      • 2.2 基本用法
    • 3. 菜单、按钮及导航
    • • 3.1 下拉菜单
      • • 3.1.1 基本用法
        • 3.1.2 下拉分隔线
        • 3.1.3 菜单标题
        • 3.1.4 对齐方式
        • 3.1.5 菜单项状态
      • 3.2 按钮
      • • 3.2.1 按钮组
        • 3.2.2 按钮工具栏
        • 3.2.3 嵌套分组
        • 3.2.4 垂直分组
        • 3.2.5 等分按钮
        • 3.2.6 按钮下拉菜单
        • 3.2.7 按钮的向下向上三角形
      • 3.3 导航
      • • 3.3.1 标签形tab导航
        • 3.3.2 胶囊形(pills)导航
        • 3.3.3 垂直堆叠的导航
        • 3.3.4 自适应导航
        • 3.3.5 导航加下拉菜单（二级导航）
        • 3.3.6 面包屑式导航

1. 表单

1.1 表单提示信息

​ 在Bootstrap中使用了一个"help-block"样式，将提示信息以块状显示，并且显示在控件底部，另外让一般提示信息显示在控件的后面，也就是同一水平显示，需要使用Bootstrap的网格系统

<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="help-block">你输入的信息是错误的span><span class="glyphicon glyphicon-remove form-control-feedback">span>  
div>
<form role="form"><div class="form-group"><label class="control-label" for="inputSuccess1">成功状态label><div class="row"><div class="col-xs-6"><input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >div><span class="col-xs-6 help-block">你输入的信息是正确的span>div>div> 
form> 
// 或者在样式中加一个类 help-inline
.help-inline{display:inline-block;padding-left:5px;color: #737373;
}

1.2 按钮

   <button class="btn" type="button">基础按钮.btnbutton>  <button class="btn btn-default" type="button">默认按钮.btn-defaultbutton> <button class="btn btn-primary" type="button">主要按钮.btn-primarybutton> <button class="btn btn-success" type="button">成功按钮.btn-successbutton> <button class="btn btn-info" type="button">信息按钮.btn-infobutton> <button class="btn btn-warning" type="button">警告按钮.btn-warningbutton> <button class="btn btn-danger" type="button">危险按钮.btn-dangerbutton> <button class="btn btn-link" type="button">链接按钮.btn-linkbutton> 

1.2.1 多标签支持

// 唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”
<button class="btn btn-default" type="button">button标签按钮button>
<input type="submit" class="btn btn-default" value="input标签按钮"/>
<a href="##" class="btn btn-default">a标签按钮a>
<span class="btn btn-default">span标签按钮span>
<div class="btn btn-default">div标签按钮div>

1.2.2 按钮大小

// 唯一一点不能缺少“.btn”类名
<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lgbutton>
<button class="btn btn-primary" type="button">正常按钮button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-smbutton>
<button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xsbutton>

1.2.3 块状按钮

​ Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器，并且这个按钮不会有任何的padding和margin值

<button class="btnbtn-primary btn-lg btn-block" type="button">大型按钮.btn-lgbutton>
<button class="btnbtn-primary btn-block" type="button">正常按钮button>
<button class="btnbtn-primary btn-sm btn-block" type="button">小型按钮.btn-smbutton>
<button class="btnbtn-primary btn-xs btn-block" type="button">超小型按钮.btn-xsbutton>

1.2.4 按钮状态

​ Bootstrap按钮的活动状态主要包括按钮的悬浮状态(:hover)，点击状态(:active)和焦点状态（:focus）

1. 活动状态

   当按钮处理正在点击状态（也就是鼠标按下的未松开的状态），对于元素是通过“:active”伪类实现，而对于这样的标签元素则是通过添加类名“.active”来实现。

2. 禁用状态

   方法1：在标签中添加disabled属性
   方法2：在元素标签中添加类名“disabled”

   两者的主要区别是：“.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。

<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled">通过disabled属性禁用按钮button> 
<button class="btn btn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮button>
<button class="btn btn-primary btn-sm btn-block" type="button">未禁用的按钮button>

1.3 图像

1. img-responsive：响应式图片，主要针对于响应式设计
2. img-rounded：圆角图片
3. img-circle：圆形图片
4. img-thumbnail：缩略图片

使用方法：使用方法非常简单，只需要在标签上添加对应的类名

设置图片大小：由于样式没有对图片做大小上的样式限制，所以在实际使用的时候，需要通过其他的方式来处理图片大小。比如说控制图片容器大小。（注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了）

<div class="container"><div class="row"><div class="col-sm-4"><img   alt="140x140" src="http://placehold.it/140x140"><div>默认图片div>div><div class="col-sm-4"><img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140"> <div>圆角图片div>div><div class="col-sm-4"><img  class="img-circle" alt="140x140" src="http://placehold.it/140x140"><div>圆形图片div>div><div class="row"><div class="col-sm-6"><img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140"> <div>缩略图div>div><div class="col-sm-6"><img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140" /> <div>响应式图片div>div>div>div>
div> 

1.4 图标

​ 在Bootstrap框架中有一个fonts的目录，这个目录中提供的字体文件就是用于制作icon的字体文件。自定义完字体之后，需要对icon设置一个默认样式，在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，然后通过伪元素“:before”的“content”属性调取对应的icon编码。所有icon都是以”glyphicon-”前缀的类名开始，然后后缀表示图标的名称

查询图标网站：http://getbootstrap.com/components/#glyphicons
所有字体图标：https://how2j.cn/k/boostrap/boostrap-font/484.html 示例5

<span class="glyphicon glyphicon-search">span>
<span class="glyphicon glyphicon-asterisk">span>
<span class="glyphicon glyphicon-plus">span>
<span class="glyphicon glyphicon-cloud">span>

2. 网络系统

2.1 工作原理

1. 数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)
2. 在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12
3. 具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4. 通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响

2.2 基本用法

1. 列组合

   列组合简单理解就是更改数字来合并列（原则：列总和数不能超12），有点类似于表格的colspan属性

   <div class="container"><div class="row"><div class="col-md-4">.col-md-4div><div class="col-md-8">.col-md-8div>div>
   div>
   

2. 列偏移

   只需要在列元素上添加类名col-md-offset-*(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。但使用col-md-offset-*对列进行向右偏移时，要保证列与偏移列的总数不超过12，不然会致列断行显示

   <div class="container">
   <h4>列向右移动四列的间距h4><div class="row"><div class="col-md-4">.col-md-4div><div class="col-md-2 col-md-offset-4">列向右移动四列的间距div><div class="col-md-2">.col-md-3div>div><div class="row"><div class="col-md-4">.col-md-4div><div class="col-md-4 col-md-offset-4">列向右移动四列的间距div>div>
   div>
   <br />
   <h4>发生行断裂h4>
   <div class="container"><div class="row"><div class="col-md-4">.col-md-4div><div class="col-md-2 col-md-offset-4">列向右移动四列的间距div><div class="col-md-2">.col-md-3div>div>
   div>
   

3. 列排序

   ​ 列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名col-md-push-*和col-md-pull-*(其中星号代表移动的列组合数)。

   <div class="container"><div class="row"><div class="col-md-8 col-md-push-4">.col-md-8div><div class="col-md-4 col-md-pull-8">.col-md-4div>div>
   div>
   

4. 列的嵌套

   ​ Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（row）容器，然后在这个行容器中插入列

   <div class="container"><div class="row"><div class="col-md-8">我的里面嵌套了一个网格<div class="row"><div class="col-md-8">col-md-8div><div class="col-md-4">col-md-4div>div>div><div class="col-md-4">我的里面嵌套了一个网格<div class="row"><div class="col-md-9">col-md-9div><div class="col-md-3">col-md-3div>div>div>div>
   div>
   

3. 菜单、按钮及导航

3.1 下拉菜单

注意：在使用Bootstrap框架的下拉菜单时，必须调用Bootstrap框架提供的bootstrap.js文件，并且因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果

3.1.1 基本用法

1. 使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:

2. 使用了一个按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:data-toggle="dropdown"

3. 下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:

    <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="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项1a>li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项2a>li>ul>
   div> <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js">script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">script> 
   

3.1.2 下拉分隔线

​ 在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的

<li role="presentation" class="divider">li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项a>li>

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation" class="dropdown-header">第一部分菜单头部li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项a>li><li role="presentation" class="divider">li><li role="presentation" class="dropdown-header">第二部分菜单头部li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项a>li>ul>

<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 pull-right" role="menu" aria-labelledby="dropdownMenu1">…ul>
div>

<li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项a>li><li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项a>li>

<div class="btn-group"><button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-backward">span>button>…<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-step-forward">span>button>
div>

<div class="btn-group"><button class="btn btn-default" type="button">首页button><button class="btn btn-default" type="button">产品展示button><div class="btn-group"><button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret">span>button><ul class="dropdown-menu"><li><a href="##">公司简介a>li><li><a href="##">企业文化a>li>ul>div>
div>

<div class="btn-group-vertical"><button class="btnbtn-default" type="button">首页button><div class="btn-group"><button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret">span>button><ul class="dropdown-menu"><li><a href="##">公司简介a>li>ul>div>
div>

<div class="btn-group btn-group-justified">...
div>