html+css实战（2）

响应式布局+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里面