bootshrap-css全局样式及组件

96
十刑
2017.02.17 17:57* 字数 948

一、栅格布局系统

1.所有的行必须放在容器中.container 或container-fluid

  container:
     screen>1200px(超大PC显示器-lg)  容器宽1170px
     screen>992px(普通PC显示器-md) 容器宽970px
     screen>768px(平板显示器-sm)     容器宽750px
     screen<768px(手机显示器-xs)     容器宽auto
  container-fluid:
      width:auto+befor+after

2.分为多行,一行最多分为12列
3.网页内容只能放在列中,不能放在行中
4.可以在col中再嵌套row
5.col分为四大类col-xs-i col-sm-i col-md-i col-lg-i,i值可以为1-12,值为某列的宽度
6.可以为一个列指定不同屏幕下的宽度

  1. col-lg-i 大PC
    col-md-i 大PC 普通PC
    col-sm-i 大PC 普通PC 平板
    col-xs-i 大PC 普通PC 平板 手机
    1. hidden-lg 大PC
      hidden-md 普通PC
      hidden-sm 平板
      hidden-xs 手机
      9.列的偏移问题

      col-xs-offset-i 大PC 普通PC 平板 手机
      col-sm-offset-i 大PC 普通PC 平板
      col-md-offset-i 大PC 普通PC
      col-lg-offset-i 大PC
      10.补充.

  1. web开发页面布局可以采用的方式
    • 使用table做布局
      简单不易出错,但加载效率低
  • HTML+CSS
    加载速度快,灵活,不易控制
  • 使用bootstrap提供的栅格(grid layout)布局系统
    加载速度快,灵活,支持响应式功能,容易控制(有行和列的概念)
  1. css相关知识
  • 如何解决父元素的第一个子元素margin-top越界问题
    给父元素加border-top
    给父元素指定padding-top
    给父元素指定overflow:hidden
    让该元素不是第一个子元素
    为父元素添加前置内容生成-推荐使用
    .parent:before {
    content:" ";
    display:table;
    }
  • 如果解决所有子元素浮动后,父元素高度变为0,且影响后续元素
    给父元素指定overflow:hidden
    为父元素指定高度
    为父元素添加后置内容生成-推荐使用
    .parent:after {
    content:"";
    display:table;
    clear:both;
    }
  1. bootstrap系统中容器的特点
    宽度做了媒体查询
    添加了前置和后置内容生成,可以防止子元素的越界,浮动影响

二、表单

1.默认表单

单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的input、textarea和select元素都将被默认设置宽度属性为width:100%。 将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列

  <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
      </div>
  </form>
默认表单

2.行内表单

为form元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件。

    <form class="form-inline">
      <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
      </div>
  </form>
行内表单

3.水平表单

通过为表单添加.form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将label 标签和控件组水平并排布局。这样做将改变
.form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加.row了

  <form class="form-inline">
      <div class="form-group">
        <label class="sr-only" for="exampleInputEmail3">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
      </div>
      <div class="form-group">
        <label class="sr-only" for="exampleInputPassword3">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
      </div>
  </form>
水平表单

三、图标-字体

  1. glyphicons是一套收费的图标字体,提供了web/移动开发中常用的小图标
  2. bootstrap中可以免费使用这套字体中的250+个,以服务器端字体形式出现的
  3. 图标字体的本质不是图片,而是字体
  4. glyphicon 图标字体只能用于空元素-不能包含任何内容或子元素;
  5. 用法
    <span class="glyphicon glyphicon-user"></span>
    字体文件夹fonts必须跟html文件同级

四、 bootstrap-组件-按钮组

  btn-group 水平按钮组
  btn-group-vertical 竖直按钮组
  btn-group btn-group-justified 水平且两端对齐的按钮组
  btn-group-lg
  btn-group-xm
  btn-group-xs

五、 bootstrap-组件-下拉菜单 重点简单

  1. 必须html结构

     <div class="dropdown"> 相对定义的父元素
       <a data-toggle="dropdown">触发元素</a>
       <ul/div class="dropdown-menu">隐藏元素</ul/div>  绝对定位
     </div>
    
  2.  divider 分割线
     dropdown-header 分类头
    

六、 bootstrap-组件-导航 重点简单

  1. 标签页导航
    <ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li ><a href="#">Profile</a></li>
    <li ><a href="#">Messages</a></li>
    </ul>
    data-toggle="tab" 用于切换
  2. 胶囊式导航 用于ul
    <ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li ><a href="#">Profile</a></li>
    <li ><a href="#">Messages</a></li>
    </ul>
  3. 两端对其的导航 nav nav-tabs nav-justified
  4. 竖直放置的胶囊导航 nav nav-pills nav-stacked
日记本