响应式布局+bootstrap(学习)
响应式
- 导航栏position:fixed/relative
- 当div为百分比
- overflow:auto会自动加上滚动条
- ~表示兄弟 >表示儿子
- 不用js做菜单选择:
- checkbox:checked ~div{display:hidden}
- 默认隐藏:元素自身display:none;checkbox{display:block}(block相当于显示)
- checkbox的style是通过标签!!不是type!!
- 加一个label元素给checkbox之后再令checkbox隐藏
- 移动标签更改top right前要令其position:absolute!
- 两个摞在一起的块要使之分开,不要设置margin因为不适应屏幕大小变化,设置float:left & float right
- 另一个适应屏幕变化的设置方法:设xx%
- 解决文本字体密密麻麻:line-height
- 要记得取消浮动!!!
bootstrap
- https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css
- 栅格:
- 切割屏幕 class="col-md(sm)-x"
- 自动有padding 在最前面加上class=row
- 表单:
- 在label前有div class=“form-group”
- 在input内有class=“form-control” 除了input其他的标签也可以用
- form-group可以加上has-error/warning,label加上control-label
- 在多个form-group外定义form-inline可变成一行
- 在input前端加样式:在input前加上一个类“input-group”,给input加一个兄弟“input-group-addon”
- 控制input大小:在form-control之后加上input-lg/sm
- 在最外层定义class=“container container-sm/md/xs”前者是已有的,后者需自己定义max-width
- 按钮:
- btn btn-default/warning/primary(可以应用到除了button之外的比如a
- btn-lg/sm控制大小
- btn-bloc
- 最外层btn-group
- ~~btn-group btn-group-vertical
- active、disabled
- 导航
- ul class=“nav nav-tabs/pills (nav-stacked:设置侧栏)”
- 导航栏
- navbar navbar-default->navbar-header->navbar-brand
- 导航栏中的导航:nav navbar-nav (navbar-right)
- navbar下可以加上container会和其他的container内容对其
- 导航栏中的搜索栏:form class=navbar-form
- 面板
- panel panel-default->panel-heading/body/footer
- 让字体有区别:small text-muted
- 表格
- table->thead->tr->th;tbody->tr->td
- 间歇:table table-striped
- 反馈:table table-hover
- 给某一元祖高亮:在该元祖的tr class=“danger”
- others:
- 页码:ul class=pagination/pager->
- <a
- 路径:div breadcrumb
- 文章下标签:span class=label label-success/……
- 加徽章(一般用于标记总量):span badge
- 提醒:alert alert-danger/……
- 选项、侧栏:list-group->list-group-item
- 要把字体写在a里面不是li里面