Bootstrap组件与样式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/ououyangxiaolin/article/details/102732631

boostrap 组件命名

一般基础类都清空默认样式
glyphicon 图标基础类
具体图标 glyphicon-xxx

下拉菜单

1：容器类名 .dropdown (下拉) .dropup(上拉) -----只是改变 drop-down位置
2: 菜单类名 .dropdown-menu
3: 显示隐藏 .dropdown-toggle
data-toggle=“dropdown” js绑定属性实现显示隐藏效果；
.dropdown-header 被选中下拉项目改变字体颜色；内边距字体大小
.divider 横线
.disabled 选中 a 改变字体颜色和设置鼠标样式

输入框组 .input-group

.input-group-addon 输入框提示信息的样式
.from-control 在输入框组中；有独立样式

选择器 .input-group .from-contrl display: table-cell;

.input-group 用到 display:table

 .input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
}
.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

导航 .nav

主要改变a标签样式通过改变{不同类名} nav-xxx 下的a样式实现不同效果

.nav-tabs 切换导航演示给 li 下 a 标签添加样式

1：清空a 默认内边距鼠标悬浮
.active 表示被选中的样式
.nav-pills 只是给 .nav-pills 下的a标签样式

nav-stacked 纵向导航栏

.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}
.nav-tabs {
    border-bottom: 1px solid #ddd;
}
.nav-tabs > li > a {
    margin-right: 2px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
    border-bottom-color: transparent;
}
~~~css
@media (min-width: 768px){
    .nav-justified > li {
         /*
          设置为表格元素
          table-cell 与 width:1% 结合作用；让每个单元格看都进行均分；【表格列等分】
          1: 保证每个单元宽度不变： 内容过多：自动加高高度 适应内容  其他兄弟元素不受影响
          2： 会增大容器宽度  每个单元的父元素
          */
    display: table-cell;
    width: 1%;
} 
}
~~~css
### 导航条   .navbar
兼容移动端规则：媒体查询最小宽度  写pc样式  当大于这个宽度 使用默认浏览器样式
网站的导航条    到移动端可以折叠
.navbarfixed-top   固定顶部
.navbar  兼容移动和pc
.nav-default  给导航条加样式
.nav-header  有媒体查询样式  左pc端和移动端区分   移动端宽度100%
.collapse   元素隐藏{移动端}
nav-collapse  .collapse在pc端强制显示
navbar-nav  表示导航条下导航
navbar-form   导航条输入框
navbar-left   左浮动         移动端无效果
.navbar-right   让导航右浮动  移动端无效果
.navbar-toggle   表示显示隐藏列表导航栏  有  右浮动效果
.navbar-inverse  黑色导航条    border-boyyom:1px solid  black;
.navbar  .active   背景黑色  字体白色
.breadcrumd   表示路径导航   没有基础类
每个a加伪元素；  content:"/\00a0"


@media (min-width: 768px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  /* .collapse中的.navbar-collapse 显示一下样式 */
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
  <!-- in中 .navbar-collapse被修饰 -->
  .navbar-collapse.in {
    overflow-y: visible;
  }
  collapse为自动
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}
/* 默认样式；pc 移动端都通过 */
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
  max-height: 340px;
}