Bootstrap笔记
写完bug就找女朋友
努力写bug.....
展开
-
bootstrap之学习笔记
form-inline: 用于强行将多个form-group div放在一行(禁止换行)里面。 案例: <div class="form-inline"> <div class="form-group"> <label>username:</label> <input type="text" cla原创 2018-10-27 00:10:52 · 274 阅读 · 0 评论 -
BootStrap之面板panel
普通面板: <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-heading">Panel header</div> <div class="panel-body"> &am原创 2018-11-04 14:44:56 · 1235 阅读 · 0 评论 -
BootStrap之下拉菜单ropdownMenu
普通下拉菜单: <div class="btn-group"> <button class="btn btn-default" data-toggle="dropdown"> 下拉菜单<span class="caret"></span> </button> &原创 2018-11-04 14:25:36 · 450 阅读 · 0 评论 -
BootStrap之导航条navigationBar
普通导航条: <div class="nav navbar-default"> <ul class="nav navbar-nav"> <li class="active"><a href="javascript:void(0)">新闻</a></li>原创 2018-11-04 14:06:36 · 417 阅读 · 0 评论 -
BootStrap之导航navigation
普通导航: <ul class="nav nav-tabs nav-justified"> <!-- class=“active”:表示选中当前tab页,高亮显示,通过js控制tab切换 --> <li> <a href="javascript:void(0);">新闻</a></li&原创 2018-11-04 13:47:45 · 2006 阅读 · 0 评论 -
BootStrap之按钮组inputGroup
邮箱类型后缀: <div class="input-group"> <input type="text" class="form-control" placeholder="input username" /> <span class="input-group-addon">@mail.com</span原创 2018-11-04 11:56:27 · 2186 阅读 · 0 评论 -
BootStrap之包含下拉菜单的输入框
用法: <div class="row col-md-5 text-center"> <div class="input-group"><!--保持内联,消除边框,类似于form-inline--> <div class="input-group-btn"><!--不换行,与相邻元素内联,包含dropdown-原创 2018-11-04 11:47:57 · 11049 阅读 · 0 评论 -
BootStrap之进度条progress
基础进度条用法: <div class="progress"> <div class="progress-bar" style="width: 20%"> 20% </div> </div> <div class="progress"> <div class原创 2018-11-04 00:56:53 · 1014 阅读 · 2 评论 -
BootStrap之媒体media
描述:媒体对象; media:包含所有媒体内容(图片、描述、内容) media-object:包含图片视频 media-body:描述评价等文字信息 普通媒体: <h3>media 包含媒体,描述,标题</h3> <div class="media"> <a hr...原创 2018-11-03 23:01:55 · 316 阅读 · 0 评论 -
BootStrap之列表组listGroup
语法: <ul class="list-group"> <子元素名 class="list-group-item list-group-item-danger"><a href="javascript:void(0)">入学通知</a><span class="badge">1&原创 2018-11-03 22:29:11 · 541 阅读 · 0 评论 -
BootStrap之弹窗alert
信息弹窗: <div class="row"> <div class="col-md-4"> <div class="alert alert-info">信息提示框</div> </div> </div> 效果图: 成功信息弹窗: <div cl原创 2018-11-04 14:57:40 · 11248 阅读 · 6 评论