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

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

玩转Bootstrap（基础）

                
                大漠
            Web前端工程师

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

全部评论问答未解决精华

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

起个名真无语

看不出效果的，给tr标签先加个颜色，.active .info .....

0 2-22 表格--鼠标悬浮高亮的表格

2016-01-03

起个名真无语

0 2-12 列表--内联列表

2016-01-03

起个名真无语

别急着和说简单，后面会放大招的

1 2-10 列表--无序列表、有序列表

2016-01-03

Kalax

浏览器要调到100%显示才会显示分割线。

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

2016-01-02

江南烟雨梦

sublime text3里面写代码，在Chrome运行，没有效果，这是为何？

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

2016-01-01

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

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

玩转Bootstrap（基础）