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

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

玩转Bootstrap（基础）

                
                大漠
            Web前端工程师

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

全部评论问答未解决精华

hen_nam

Bootstrap 4：
bg-success：成功（绿色）
bg-info：信息（浅蓝色）
bg-warning：警告（黄色）
bg-danger：危险（红色）

1 7-9 进度条--彩色进度条

2020-12-30

hen_nam

Bootstrap 4：
alert-dismissible：可关闭

1 7-5 警示框--可关闭的警示框

2020-12-30

hen_nam

Bootstrap 4：
<ul class="pagination">
<li class="page-item">
<a href="..." class="page-link">...</a>
</li>
<li class="page-item">
<a href="..." class="page-link">...</a>
</li>
</ul>

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

2020-12-29

hen_nam

Bootstrap 4：
navbar-light：深灰色文本
navbar-dark：浅灰色文本
bg-*：背景颜色

1 6-8 反色导航条

2020-12-29

hen_nam

Bootstrap 4：
<nav class="navbar">
<a href="..." class="navbar-brand">...</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#ID">
<span class="navbar-toggler-icon"></span>
</button>
<div id="ID" class="navbar-collapse collapse">
<ul class="navbar-nav">...</ul>
</div>
</nav>

1 6-7 响应式导航条

2020-12-29

hen_nam

Bootstrap 4：
fixed-top：固定在顶部
fixed-bottom：固定在底部

1 6-6 固定导航条

2020-12-29

hen_nam

Bootstrap 4：
<nav class="navbar">
<span class="navbar-text">...</span>
</nav>

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

2020-12-29

hen_nam

Bootstrap 4：
<nav class="navbar">
<form class="form-inline">
<input type="text" class="form-control" />
<button type="submit" class="btn">...</button>
</form>
</nav>

1 6-4 带表单的导航条

2020-12-28

hen_nam

Bootstrap 4：
<nav class="navbar">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="..." class="nav-link dropdown-toggle" data-toggle="dropdown">...</a>
<div class="dropdown-menu">
<a href="..." class="dropdown-item">...</a>
</div>
</li>
</ul>
</nav>

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

2020-12-28

hen_nam

Bootstrap 4：
<nav class="navbar">
<a href="..." class="navbar-brand">...</a>
<ul class="navbar-nav">
<li class="nav-item">
<a href="..." class="nav-link">...</a>
</li>
<li class="nav-item">
<a href="..." class="nav-link">...</a>
</li>
</ul>
</nav>

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

2020-12-28

hen_nam

Bootstrap 4：
<nav class="navbar navbar-expand-*">
<ul class="navbar-nav">
<li class="nav-item">
<a href="..." class="nav-link">...</a>
</li>
<li class="nav-item">
<a href="..." class="nav-link">...</a>
</li>
</ul>
</nav>

1 6-2 基础导航条

2020-12-28

hen_nam

Bootstrap 4：
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="...">...</a>
</li>
<li class="breadcrumb-item">
<a href="...">...</a>
</li>
<li class="breadcrumb-item active">...</li>
</ol>

1 5-22 面包屑式导航

2020-12-28

hen_nam

Bootstrap 4：
flex-column：垂直

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

2020-12-28

hen_nam

下拉菜单分割线不是 divider 吗？

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

2020-12-28

hen_nam

Bootstrap 4：
<ul class="nav">
<li class="nav-item">
<a href="..." class="nav-link active">...</a>
</li>
<li class="nav-item">
<a href="..." class="nav-link disabled">...</a>
</li>
</ul>

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

2020-12-28

hen_nam

Bootstrap 4：
<ul class="nav">
<li class="nav-item">
<a href="..." class="nav-link">...</a>
</li>
<li class="nav-item">
<a href="..." class="nav-link">...</a>
</li>
</ul>

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

2020-12-28

首页上一页 1 2 3 4 5 6 7 下一页尾页

开始学习

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

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

微信扫码，参与3人拼团

热搜

最近搜索清空

玩转Bootstrap（基础）