bootstrap快速入门_学习笔记

首页免费课 bootstrap快速入门笔记

bootstrap快速入门

                
                袁三日
            Web前端工程师

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

最热最新

CalvinLeung8422

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="myModal"> 弹窗 </button>

查看全部

1 采集收起来源：Bootstrap中的插件（1）
2018-03-22
CalvinLeung8422

<div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span>×</span><span class="sr-only">关闭弹窗</span></button> <h4> class="modal-title" id="myModalLabel">标题</h4> </div> <div class="modal-body">慕课网</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary">保存</button> </div> </div> </div> </div> <

查看全部

1 采集收起来源：Bootstrap中的插件（1）
2018-03-22
weibo_可乐尼洛love拉尔_0 04:37

@media screen and (min-width:*px) and (max-width){ }

查看全部

1 采集收起来源：栅格布局
2017-07-05
qq_chuwarrior_0

bootstrap组件——进度条 progress-bar progress-bar-danger/success/info.... progress-bar-striped 进度条渐变 <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" >20% </div> <div class="progress-bar progress-bar-success progress-bar-striped" >40% </div> </div>

查看全部

1 采集收起来源：进度条
2018-03-22
qq_chuwarrior_0

字体图标 1.特点：体积小便于加载、无需重复设计、方便引用 2.引用：下载bootstrap时就自带了glyphicon的图标库，直接通过类名引用 <link rel="stylesheet" href="css/bootstrap.mn.css"> <span class="glyphicon glyphicon-asterist"></span> 3. 阿里矢量图标库 http://www.iconfont.cn/

查看全部

1 采集收起来源：图标
2018-03-22
风清723

Bootraps使用要根据自己需要进行相应的选择,插件很多,同时也可以使用自己的插件

查看全部

1 采集收起来源：Bootstrap中的插件（2）
2017-06-18
慕粉菜鸟2020

讲的好简单

查看全部

1 采集收起来源：分页
2017-06-18
ghost_0014 05:56

@media sreen and （max-width：900px）{} 不同分辨率给予不同样式。

查看全部

1 采集收起来源：栅格布局
2017-06-11
念奴娇

面板-------panel 组成：panel-heading、panel-body、panel-footer 引用 <div class="panel panel-default"> <div class="panel-heading panel-defult"> 面板的头部 </div> <div class="panel-body"> 面板主体内容 </div> <div class="panel-footer"> 面板脚注 </div> </div> 颜色 panel-primary panel-info panel-success panel-warning

查看全部

1 采集收起来源：面板
2018-03-22
念奴娇

bootstrop中的图片-形状圆角 .img-rounded 圆形 .img-circle 带有边框的圆角图形 .img-thumbnail bootstrap辅助类文本颜色背景颜色状态设置三角符号

查看全部

1 采集收起来源：Bootsteap中图片及辅助类
2017-05-31
念奴娇

3-4 bootstrap中的表格全屏宽度带水平线的表格.table 带边框的表格.table-bordered 条纹状表格.table-striped 悬停变色表格.table-hover 紧凑风格表格.table-condensed 相应的行改色row class="info" 或active warning success 例子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery-1.11.1.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <table class="table table-striped table-border table-hover"> <tr><th>标题一</th><th>标题二</th><th>标题三</th><th>标题四</th><th>标题五</th></tr> <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr> <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr> <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr> <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr> <tr><td>内容一</td><td>内容二</td><td>内容三</td><td>内容四</td><td>内容五</td></tr> </table> </body> </html>

查看全部

1 采集收起来源：Bootstrap中的排版 - 表格
2018-03-22
only_YOU_REVERSE 03:00

列表--------list-group list-group-item active 选中 disabled 禁用 badge 状态数（例如点赞的人数）

查看全部

1 采集收起来源：列表
2017-05-15
Crazy_Killer 00:58

辅助类：

查看全部

1 采集收起来源：Bootsteap中图片及辅助类
2017-05-12
qq_叫什么好呢__0

列表 <ul class="list-group"> <li class="list-group-item active"> 这是一个列表 <span class="badge">10</span> </li> <li class="list-group-item disabled"> 这是一个列表 <span class="badge">10</span> </li> <li class="list-group-item list-group-item-info"> 这是一个列表 <span class="badge">10</span> </li> <li class="list-group-item"> 这是一个列表 <span class="badge">10</span> </li> </ul>

查看全部

1 采集收起来源：列表
2018-03-22
qq_叫什么好呢__0

分页 <nav> <ul class="pager"> <li class="previous"><a href="#">向左</a></li> <li class="next"><a href="#">向右</a></li> </ul> <ul class="pagination pagination-lg"> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </nav> 

查看全部

1 采集收起来源：分页
2018-03-22