玩转Bootstrap（基础）_技术问答

首页免费课玩转Bootstrap（基础）问答

玩转Bootstrap（基础）

                
                大漠
            Web前端工程师

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

全部评论问答未解决精华

ericwang2327

Bootstrap中的标签：
.label .label-default
<span class="label">****</span>

0 6-11 标签

2015-07-09

ericwang2327

翻页分页导航：
<ul class="pager">
<li><a href="#">&laquo;上一页</a></li>
<li><a href="#">&raquo;下一页</a></li>
</ul>

0 6-10 分页导航（翻页分页导航）

2015-07-09

ericwang2327

分页导航：pagination，使用结构ul>li>a
<ul class="pagination">
<li>
<a href="#"></a>
</li>
<li>...</li>
</ul>

1 6-9 分页导航（带页码的分页导航）

2015-07-09

ericwang2327

反色导航条：与默认导航条相比，只是将类名 .navbar-default 换成 .navbar-inverse

1 6-8 反色导航条

2015-07-09

ericwang2327

为button添加data-target=".类名/#id名"，指向需要折叠的div。
注意：data-target用于指向一个特定的div。

0 6-7 响应式导航条

2015-07-09

ericwang2327

ul正常布局, 外面套了一层div,添加类名:collapse,navbar-collapse,navbar-response-collapse

button按钮添加类:navbar-toggle,属性:data-toggle="collapse",data-target=".navbar-response-collapse"

这有点儿和dropdown类似, 但是还是有区别的:

1.button按钮和ul不在同一个父级div下;

2.button按钮多了一个属性data-target;

3.ul外面套了一个div

2 6-7 响应式导航条

2015-07-09

ericwang2327

Bootstrap框架的导航条中，除了使用 navbar-brand 中的 a 元素、navbar-nav 的 ul 元素和 navbar-form 的 form 元素之外，还可以使用其他元素。
框架提供了三种其他样式：
1.导航条的按钮：navbar-btn
2.导航条的文本：navbar-text
3.导航条的普通链接：navbar-link

0 6-5 导航条中的按钮、文本和链接

2015-07-09

ericwang2327

带表单的导航条：类名 .navbar-form
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="btn btn-info" placeholder="请输入关键字">
</div>
</form>

1 6-4 带表单的导航条

2015-07-09

ericwang2327

为导航条添加标题：
<div class="navbar navbar-default">
<div class="navbar-header">
<a href="#" class="navbar-brand">.....</a>
</div>
<ul class="nav navbar-nav">
<li>....</li>
</ul>
</div>

1 6-3 为导航条添加标题、二级菜单及状态

2015-07-09

ericwang2327

.nav 是基础导航的类名，而 .navbar 是基础导航条的类名。

1 6-2 基础导航条

2015-07-09

ericwang2327

.navbar-nav样式是在导航 .nav的基础上重新调整了菜单项的浮动与内外边距。

1 6-2 基础导航条

2015-07-09

不是全屏的状态下，文字过多的话会出现溢出的现象。

+ 我来回答回答最高可+2积分

3 回答 851 浏览 5-11 按钮（等分按钮）

2015-07-09

ericwang2327

制作基础导航条：
1.在制作导航的列表（<ul class="nav">）基础上，添加类名“navbar-nav”;
2.在列表外部添加一个容器（div）,并且使用类名“navbar”和“navbar-default”。
<div class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li>.....</li>
</ul>
</div>

2 6-2 基础导航条

2015-07-09

class="btn-wrap"是什么类

+ 我来回答回答最高可+2积分

3 回答 1976 浏览 5-11 按钮（等分按钮）

2015-07-09

ericwang2327

导航条（navbar）和导航（nav）是有区别的，导航条中有一个背景色，并且导航条可以是纯链接、也可以是表单。

2 6-1 导航条基础

2015-07-09

ericwang2327

面包屑式导航：.breadcrumb
<ul class="breadcrumb">
<li>...</li>
</ul>

1 5-22 面包屑式导航

2015-07-09

首页上一页 417 418 419 420 421 422 423 下一页尾页

开始学习

课程须知: 本教程适合具有一定前端基础的人员，对HTML和CSS有一定的了解，对于定制Bootstrap的同学需要具备LESS和Sass基础知识。

老师告诉你能学到什么？: 1、了解Bootstrap框架 2、如何使用Bootstrap制作Web页面或Web应用程序 3、如何定制个性化Bootstrap

微信扫码，参与3人拼团

热搜

最近搜索清空