玩转Bootstrap（基础）_学习笔记

首页免费课玩转Bootstrap（基础）笔记

玩转Bootstrap（基础）

                
                大漠
            Web前端工程师

                    查看讲师更多课程 
                    大漠讲师的其他课程
                
Sass进阶篇
中级·46635
免费课程
                                
Sass入门篇
中级·104426
免费课程
                                
玩转Bootstrap（JS插件篇）
中级·128648
免费课程
                                
十天精通CSS3
初级·242589
免费课程
                                
                难度初级
            
                时长10小时 0分
            
                学习人数
            
综合评分9.53
                            686人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.4
                                逻辑清晰

最热最新

杰帅musicman
分页导航（翻页分页导航）
Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。
Bootstrap框架将其独立成一个单独的部分：
   LESS版本：对应源文件为pager.less
  Sass版本：对应源文件为_pager.scss
  编译后版本：对应bootstrap.css文件第4223行～第4260行
使用方法：
在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类：
```
>    <li><a href="#">&laquo;上一页</a></li>    <li><a href="#">下一页&raquo;</a></li> </ul>
```
运行效果见右侧结果窗口。
对齐样式设置：
默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式：
previous：让“上一步”按钮居左
next：让“下一步”按钮居右
具体使用的时候，只需要在li标签上添加对应类名即可：
```
<ul class="pager">
   <li class="previous"><a href="#">&laquo;上一页</a></li>
   <li class="next"><a href="#">下一页&raquo;</a></li>
</ul>
```
实现原理：
实现原理很简单，就是一个进行了左浮动，一个进行了右浮动：
状态样式设置：
和带页码分页导航一样，如果在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，但同样不能禁止其点击功能。你可以通过js来处理，或将a标签换成span标签，可以禁止点击，a标签自带点击。
状态样式实现原理：
/*bootstrap.css文件第4253行～第4260行*/
```
.pager .disabled > a,
.pager .disabled >a:hover,
.pager .disabled >a:focus,
.pager .disabled > {
  color: #999;

  background-color: #fff;
}
```
```
<ul class="pager">  <li class="disabled"><span>&laquo;上一页</span></li>
  <li><a href="#">下一页&raquo;</a></li>
</ul>
```
查看全部

0 采集收起来源：分页导航（翻页分页导航）
2018-08-11
杰帅musicman
分页导航（带页码的分页导航）
分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：
      带页码的分页导航
      带翻页的分页导航
带页码的分页导航
带页码的分页导航，可能是最常见的一种分页导航，特别是在列表页内容超多的时候，会给用户提供分页的导航方式。在Bootstrap框架为开发者提供不同的版本：
      LESS版本：对应的源文件pagination.less
      Sass版本：对应的源文件_pagination.scss
      编译后版本：对应bootstrap.css文件第4130行～第4222行
使用方法：
平时很多同学喜欢用div>a和div>span结构来制作带页码的分页导航。不过，在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：
```
<ul class="pagination">    <li><a href="#">&laquo;</a></li>    <li><a href="#">1</a></li>    <li><a href="#">2</a></li>    <li><a href="#">3</a></li>    <li><a href="#">4</a></li>    <li><a href="#">5</a></li>    <li><a href="#">&raquo;</a></li> </ul>
```
运行效果：
实现原理：
从效果中可以看出，当前状态页码会高亮显示，而且不能点击。而最后一页是禁用状态，也不能点击。实现样式：
大小设置：
在Bootstrap框架中，也可以通过几个不同的情况来设置其大小。类似于按钮一样：
1、通过“pagination-lg”让分页导航变大；
2、通过“pagination-sm”让分页导航变小：
```
<ul class="pagination pagination-lg">
 …
</ul>
<ul class="pagination">
 …
</ul>
<ul class="pagination pagination-sm">
 …
</ul>
```
查看全部

0 采集收起来源：分页导航（带页码的分页导航）
2018-08-11
杰帅musicman
反色导航条
反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条，与默认的导航条相比，使用方法并无区别，只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。
```
<div class="navbar  navbar-inverse" role="navigation">
<div class="nav bar-header">
```
查看全部

0 采集收起来源：反色导航条
2018-08-11
杰帅musicman
响应式导航条
如今浏览Web页面的终端不在是一尘不变了，前面示例实现的导航条仅能适配于大屏幕的浏览器，但当浏览器屏幕变小的时候，就不适合了。因此响应式设计也就随之而来。那么在一个响应式的Web页面中，对于响应式的导航条也就非常的重要。例如Bootstrap框架官网的导航条：
（宽屏时效果）
（中屏时效果）
（窄屏时效果）
那么在这一节中，主要和大家探讨如何使用Bootstrap框架实现响应式导航条效果。
<body>

<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
　
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a href="##" class="navbar-brand">慕课网</a>
</div>

<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
<li><a href="##">成功案例</a></li>
<li><a href="##">关于我们</a></li>
</ul>
</div>
</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>

</body>
为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定。如：
需要折叠的div代码段：
```
<div class="collapse navbar-collapse" id="example">
      <ul class="nav navbar-nav">
      …
      </ul>
</div>
```
窄屏时显示的图标代码段：
```
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
  ...
</button>
```
sr-only 代表元素只在屏幕阅读器中显示：sc (screen-reader)，为残障人士设计，体现人文关怀；
这是专门为残障人士浏览网页设计的。一些元素，比如选中高亮状态无法读出。因此我们还要写上这些元素的文本说明，但是又不需要展示给普通用户看到，于是加上 sr-only 的意义就在于能保证屏幕阅读器正确读取且不会影响正常人的使用。
查看全部

0 采集收起来源：响应式导航条
2018-08-11
绫小治

textarea文本域
可以通过rows定义高度，通过cols定义宽度
但是如果使用类“form-control”则会自动将宽度设定为100%或者自动

查看全部

0 采集收起来源：表单控件(文本域textarea)
2018-08-11
杰帅musicman
固定导航条
很多情况之一，设计师希望导航条固定在浏览器顶部或底部，这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式：
.navbar-fixed-top：导航条固定在浏览器窗口顶部
.navbar-fixed-bottom：导航条固定在浏览器窗口底部
使用方法很简单，只需要在制作导航条最外部容器navbar上追加对应的类名即可：
```
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 　… </div> <div class="content">我是内容</div> <div class="navbar navbar-default navbar-fixed-bottom" role="navigation"> 　… </div>
```
实现原理：
实现原理很简单，就是在navbar-fixed-top和navbar-fixed-bottom使用了position：fixed属性，并且设置navbar-fixed-top的top值为0,而navbar-fixed-bottom的bottom值为0
存在bug及解决方法:
从运行效果中大家不难发现，页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容，我们需要在body上做一些处理：
```
body {  padding-top: 70px;/*有顶部固定导航条时设置*/
  padding-bottom: 70px;/*有底部固定导航条时设置*/
}
```
因为固定导航条默认高度是50px，我们一般设置padding-top和padding-bottom的值为70px，当然有的时候还是需要具体情况具体分析。
第二种解决这个bug方法：
其实除了这种解决方案之外，我们还有其他的解决方法，把固定导航条都放在页面内容前面：
```
<div class="content">我是内容</div>
```
在文件中添加下列样式代码：
```
.navbar-fixed-top ~ .content {
   padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
  padding-bottom: 70px;
}
```
当然，这种方法有的时候也是需要具体情况具体分析的。
查看全部

0 采集收起来源：固定导航条
2018-08-11
绫小治

input type = "xxx"规则与CSS相同，必须指定类型，同时需要使用form-control来保证样式不会出现错误

查看全部

0 采集收起来源：表单控件(输入框input)
2018-08-10
绫小治

form-inline类名可以将所有的元素改为内联块元素。效果就是所有的元素都可以在一行之中显示出来。
sr-only可以隐藏一切存在的痕迹。

查看全部

0 采集收起来源：内联表单
2018-08-10
绫小治

水平表单的使用前提
form 元素需要使用form-horizontal
需要配合Boostrap框架的网络系统。

查看全部

0 采集收起来源：水平表单
2018-08-10
杰帅musicman

导航条中的按钮、文本和链接
Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外，还可以使用其他元素。框架提供了三种其他样式：
1、导航条中的按钮navbar-btn
2、导航条中的文本navbar-text
3、导航条中的普通链接navbar-link
但这三种样式在框架中使用时受到一定的限制，需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题。
<div class="navbar navbar-default" role="navigation">
　<div class="navbar-header">
　 <a href="##" class="navbar-brand">慕课网</a>
　</div>
<ul class="nav navbar-nav">
<li><a href="##" class="navbar-text">Navbar Text</a></li>
<li><a href="##" class="navbar-text">Navbar Text</a></li>
<li><a href="##" class="navbar-text">Navbar Text</a></li>
</ul>
两种不同
<div class="navbar navbar-default" role="navigation">
　<div class="navbar-header">
　 <a href="##" class="navbar-brand">慕课网</a>
　</div>
<div class="nav navbar-nav">
<a href="##" class="navbar-text">Navbar Text</a>
<a href="##" class="navbar-text">Navbar Text</a>
<a href="##" class="navbar-text">Navbar Text</a>
</div>
</div>

查看全部

0 采集收起来源：导航条中的按钮、文本和链接
2018-08-10
杰帅musicman
带表单的导航条
有的导航条中会带有搜索表单，比如新浪微博的导航条：
在Bootstrap框架中提供了一个“navbar-form”，使用方法很简单，在navbar容器中放置一个带有navbar-form类名的表单，示例代码编辑器（29-34行）。
在上面的示例中，大家看到了“navbar-left”让表单左浮动，更好实现对齐。在Bootstrap框架中，还提供了“navbar-right”样式，让元素在导航条靠右对齐。
```
@media (min-width: 768px) {
 .navbar-left {
 float: left !important;
}
.navbar-right {
 float: right !important;
 }
}
```
注意：这里有一个条件，只有当浏览器视窗宽度大于768px生效
<form action="##" class="navbar-form navbar-left" rol="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入关键词" />
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
查看全部

0 采集收起来源：带表单的导航条
2018-08-10
杰帅musicman
为导航条添加标题、二级菜单及状态
加入导航条标题
在Web页面制作中，常常在菜单前面都会有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过“navbar-header”和“navbar-brand”来实现，示例查看代码编辑器（11-22）。
<div class="navbar navbar-default" role="navigation">
　<div class="navbar-header">
　 <a href="##" class="navbar-brand">慕课网</a>
　</div>
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li class="dropdown">
<a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">JavaScript</a></li>
<li class="disabled"><a href="##">PHP</a></li>
</ul>
</li>
同样在默认导航条（navbar-default）下，对navbar-brand也做了颜色处理：
/*源码请查看bootstrap.css文件第3947行～3951行*/
```
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
```
导航条状态、二级菜单
同样的，在基础导航条中对菜单提供了当前状态，禁用状态，悬浮状态等效果，而且也可以带有二级菜单的导航条，案例代码见右侧代码编辑器（24-42行）。
效果图如下：
查看全部

0 采集收起来源：为导航条添加标题、二级菜单及状态
2018-08-10
杰帅musicman
基础导航条
在Bootstrap框中，导航条和导航从外观上差别不是太多，但在实际使用中导航条要比导航复杂得多。我们先来看导航条中最基础的一个——基础导航条。
使用方法：
在制作一个基础导航条时，主要分以下几步：
第一步：首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”
第二步：在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”
示例查看右侧代码编辑（10-19行）。
“.navbar”样式的主要功能就是设置左右padding和圆角等效果，但他和颜色相关的样式没有进行任何的设置。
原理分析：
而导航条的颜色都是通过“.navbar-default”来进行控制：
/*源码查看bootstrap.css文件第3940行～第3943行*/
```
.navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}
```
navbar-nav样式是在导航.nav的基础上重新调整了菜单项的浮动与内外边距。同时也不包括颜色等样式设置，源码请查看bootstrap.css文件第3785行～第3830行，我们把代码节选出来放入右侧bootstrap.css中。
而颜色和其他样式是通过配合父容器“navbar-default”来一起实现：
<div class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a href="##">网站首页</a></li>
<li><a href="##">系列教程</a></li>
<li><a href="##">名师介绍</a></li>
查看全部

0 采集收起来源：基础导航条
2018-08-10
杰帅musicman
面包屑式导航
面包屑(Breadcrumb)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。在Bootstrap框架中面包屑也是一个独立模块组件：
- LESS版本：对应源文件breadcrumbs.less
- Sass版本：对应源文件_breadcrumbs.scss
- 编译出来的版本：源码对应bootstrap.css文件第4112行～第4129行
使用方法：
使用方式就很简单，为ol加入breadcrumb类：
```
<ol class="breadcrumb">   <li><a href="#">首页</a></li>   <li><a href="#">我的书</a></li>   <li class="active">《图解CSS3》</li> </ol>
```
实现原理：
看来不错吧！作者是使用li+li:before实现li与li之间的分隔符，所以这种方案在IE低版本就惨了（不支持）。
查看全部

0 采集收起来源：面包屑式导航
2018-08-10
杰帅musicman
导航加下拉菜单（二级导航）
前面介绍的都是使用Bootstrap框架制作一级导航，但很多时候，在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul，使用前面介绍下拉菜单的方法就可以：
```
<ul class="nav nav-pills">      <li class="active"><a href="##">首页</a></li>      </li>      <li><a href="##">关于我们</a></li> </ul>
```
运行效果如下：
通过浏览器调试工具，不难发现，点击有二级导航的菜单项，会自动添加“open”类名，再次点击就会删除添加的“open”类名：
简单点来说，就是依靠这个类名来控制二级导航显示与否，并且设置了背景色和边框：
在制作下拉菜单时，可以用分隔线，那么在二级导航中是否可以呢？我们一起来看看：
不用再说太多，只需要添加“<li class=”nav-divider”></li>”这样的一个空标签就可以了。
查看全部

0 采集收起来源：导航加下拉菜单（二级导航）
2018-08-10