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

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

玩转Bootstrap（基础）

                
                大漠
            Web前端工程师

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

全部评论问答未解决精华

想为TA而学

panel panel-default
panel-heading
panel-body
table table-bordered
panel-footer

0 7-29 面板--面板中嵌套表格

2016-01-04

肖师妹_Laurel

导航总结：
1.导航.nav无默认样式。导航基本样式只有.nav-tabs,.nav-pills,需和.nav同时使用。float：left
2.垂直导航：.nav-stacked.float:none;
3.自适应导航：.nav-justified. ".nav-justified>li{display:tabled-cell};ul{width:100%;}"
4.导航分割线：.nav-divider
5.li.active,li.disabled需li>a，样式作用于a。
6.面包屑导航：ul.breadcrumb,li.active里无a才有效果。

72 5-22 面包屑式导航

2016-01-04

肖师妹_Laurel

二级菜单：li作为包裹父元素li.dropdown,a.dropdown-toggle+ul.dropdown-menu

0 5-21 导航加下拉菜单（二级导航）

2016-01-04

想为TA而学

active list-group-item-success list-group-item-info list-group-item-warning list-group-item-danger badge消息提示

0 7-24 列表组--多彩列表组

2016-01-04

肖师妹_Laurel

自适应导航：.nav-justified,实现原理是列表（<ul>）上设置宽度为“100%”，然后每个菜单项(<li>)设置了“display:table-cell”，让列表项以模拟表格单元格的形式显示

5 5-20 自适应导航（实现原理）

2016-01-04

肖师妹_Laurel

1.制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可,去掉li的浮动.nav-stacked > li {float:none;}
2.分割线:li.nav-divider，只对垂直有效。

6 5-18 导航（垂直堆叠的导航）

2016-01-04

想为TA而学

active disabled

0 7-23 列表组--列表项的状态设置

2016-01-04

肖师妹_Laurel

.nav-tabs:li块状显示且左浮。li.active,li.disabled对a起效果。

0 5-16 导航（标签形tab导航）

2016-01-04

肖师妹_Laurel

Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。

0 5-15 导航（基础样式）

2016-01-04

肖师妹_Laurel

1.实现普通下拉菜单：.dropdown>button.dropdown-toggle[data-toggle="dropdown"]+ul.dropdown-menu;
2.按钮下拉菜单：把.dropdown换成.btn-group即可。
3.下拉菜单变上拉菜单：.dropdown.dropup或.btn-group.dropup
4.下拉菜单通过绝对定位实现，可通过设置top,bottom,left,right改变下拉菜单出现的位置。
5.dropdown-header,li.divider,li.active,li.disabled

54 5-14 向上弹起的下拉菜单

2016-01-03

肖师妹_Laurel

下拉菜单的向上箭头：.btn-group.dropup>span.caret；三角箭头通过css实现，向上与向下只是border-botton-width的值不同。

0 5-13 按钮的向下向上三角形

2016-01-03

肖师妹_Laurel

1.等分按钮：button-group-justified,实现原理非常简单，把“btn-group-justified”模拟成表格（display:table），而且把里面的按钮模拟成表格单元格（display:table-cell）。
2.在制作等分按钮组时，请尽量使用<a>标签元素来制作按钮，因为使用<button>标签元素时，使用display:table在部分浏览器下支持并不友好

0 5-11 按钮（等分按钮）

2016-01-03

肖师妹_Laurel

很多时候，我们常把下拉菜单和普通的按钮组排列在一起，实现类似于导航菜单的效果。使用的时候，只需要把当初制作下拉菜单的“dropdown”的容器换成“btn-group”，并且和普通的按钮放在同一级。

0 5-9 按钮（嵌套分组）

2016-01-03

肖师妹_Laurel

将很多btn-group放在"btn-toolbar"里面，每个btn-group之间会有5px的左外边距和左浮动。通过.btn-toolbar .btn-group,.btn-toolbar>.btn等来实现。注意给.btn-toolbar去除浮动。主要用于富文本框内的排列。

1 5-8 按钮（按钮工具栏）

2016-01-03

肖师妹_Laurel

垂直方向上的按钮组：.btn-group-vertical

0 5-7 按钮（按钮组）

2016-01-03

首页上一页 262 263 264 265 266 267 268 下一页尾页

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

玩转Bootstrap（基础）