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

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

玩转Bootstrap（基础）

                
                大漠
            Web前端工程师

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

全部评论问答未解决精华

肖师妹_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

肖师妹_Laurel

1.按钮组：.btn-group里面的按钮或链接必须有".btn"，效果通过.btn-group>.btn实现。
2.圆角效果：A.所有都设置圆角效果 B.除了第一个和最后一个都去掉圆角效果 C.给第一个和最后一个只设置相应的圆角

0 5-7 按钮（按钮组）

2016-01-03

肖师妹_Laurel

菜单项激活状态：li.active;
菜单项禁用状态：li.disabled;
通过给li.active>a,li.disabled>a设置css样式实现.若li无子元素a,则激活禁用状态无样式。

2 5-6 下拉菜单（菜单项状态）

2016-01-03

肖师妹_Laurel

下拉菜单与父元素右对齐：.dropdown-menu.pull-right
设置{right:0;left:0；}实现
一定要为.dropdown设置float:left属性

0 5-5 下拉菜单（对齐方式）

2016-01-03

肖师妹_Laurel

下拉菜单标题：li.dropdown-header，改变字体颜色等
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #999;
}

0 5-4 下拉菜单（菜单标题）

2016-01-03

肖师妹_Laurel

下拉菜单分割线：li.divider
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}

0 5-3 下拉菜单（下拉分隔线）

2016-01-03

肖师妹_Laurel

.dropdown-menu默认隐藏，相对父元素.dropdown绝对定位：
.dropdown-menu {
position: absolute;
top: 100%;/*让下拉菜单项在父菜单项底部，如果父元素不设置相对定位，该元素相对于body元素*/
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;}

下拉菜单隐藏显示通过js给.dropdown添加或移除".open"类来实现。
.open > .dropdown-menu {
display: block;
}

0 5-2 下拉菜单（原理分析）

2016-01-03

肖师妹_Laurel

.col-md-push-*,.col-md-pull-*:左移、右移，通过left/right实现

0 4-5 列排序

2016-01-03

肖师妹_Laurel

.col-md-offset-*实现原理非常简单，就是利用十二分之一（1/12）的margin-left。然后有多少个offset，就有多少个margin-left。

0 4-4 列偏移

2016-01-03

肖师妹_Laurel

实现列组合方式非常简单，只涉及两个CSS两个特性：浮动与宽度百分比。

0 4-3 基本用法

2016-01-03

起个名真无语

没看出什么效果，去掉responsive ，一样有自适应，没搞懂

0 2-24 表格--响应式表格

2016-01-03

首页上一页 344 345 346 347 348 349 350 下一页尾页

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

玩转Bootstrap（基础）