bootstrap快速入门_技术问答

首页免费课 bootstrap快速入门问答

bootstrap快速入门

                
                袁三日
            Web前端工程师

                    查看讲师更多课程 
                    袁三日讲师的其他课程
                
css定位 position
初级·49042
免费课程
                                
                难度中级
            
                时长 2小时 5分
            
                学习人数
            
综合评分9.37
                            179人评价
                        查看评价
                                9.6
                                内容实用
                            
                                9.4
                                简洁易懂
                            
                                9.1
                                逻辑清晰

全部评论问答未解决精华

weixin_慕工程6397061

总结：说了个卵

0 6-1 Bootstrap中的插件（1）

2022-01-14

乐乐1407300

有没有代码资料

0 4-2 viewport

2021-10-09

Sam元

特别感谢哦，这个视频好，几个小时，快速带领入门，节约时间，深入看官网文档

0 6-2 Bootstrap中的插件（2）

2021-04-25

慕沐6482373

一些英语的发音最好事先查一下，发音太糟糕了。

1 2-3 bootstrap环境搭建

2021-02-24

hen_nam

Bootstrap 4：
<div class="card">
<div class="card-header">...</div>
<div class="card-body">...</div>
<div class="card-footer">...</div>
</div>
bg-success：成功（绿色）
bg-info：信息（浅蓝色）
bg-warning：警告（黄色）
bg-danger：危险（红色）

1 5-10 面板

2021-01-09

hen_nam

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

1 5-8 进度条

2021-01-09

hen_nam

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

1 5-7 分页

2021-01-09

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">...</a>
</li>
</ul>
nav-justified：项目等宽
flex-column：项目垂直

1 5-6 导航

2021-01-09

hen_nam

Bootstrap 4：
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">...</span>
</div>
<input type="text" class="form-control" />
</div>

1 5-5 控件组

2021-01-09

hen_nam

Bootstrap 4：
<div class="dropdown btn-group">
<button class="dropdown-toggle btn" data-toggle="dropdown">...</button>
<div class="dropdown-menu">
<a href="..." class="dropdown-item">...</a>
<div class="dropdown-divider"></div>
<a href="..." class="dropdown-item">...</a>
</div>
</div>

1 5-4 下拉菜单

2021-01-08

hen_nam

Bootstrap 4：
col-sm-*：在小号屏幕上指定宽度
col-md-*：在中号屏幕上指定宽度
col-lg-*：在大号屏幕上指定宽度
col-xl-*：在特大号屏幕上指定宽度
offset-sm-*：在小号屏幕上偏移
offset-md-*：在中号屏幕上偏移
offset-lg-*：在大号屏幕上偏移
offset-xl-*：在特大号屏幕上偏移

1 4-3 栅格布局

2021-01-07

hen_nam

Bootstrap 4：
rounded：圆角
rounded-circle：椭圆形

1 3-7 Bootsteap中图片及辅助类

2021-01-07

hen_nam

Bootstrap 4：
form-control-sm：小号
form-control-lg：大号
is-valid：有效（绿色边框）
is-invalid：无效（红色边框）

1 3-5 Bootsteap中的表单(1)

2021-01-07

hen_nam

Bootstrap 4：
table-sm：小号
table-success：成功（绿色）
table-info：信息（浅蓝色）
table-warning：警告（黄色）
table-danger：危险（红色）
table-active：活跃（灰色）

1 3-4 Bootstrap中的排版 - 表格

2021-01-07

皮皮_0009

66666

2020-12-31

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

开始学习

课程须知: 本教程适合具有一定前端基础的人员，对HTML、CSS、JavaScript有一定的了解。

老师告诉你能学到什么？: （1）如何快速搭建网页（2）如何使用组件开发（3）使用bootstrap插件实现网页的开发

微信扫码，参与3人拼团

热搜

最近搜索清空

bootstrap快速入门