关于Bootstrap框架简单学习

关于BoostStrap中的css框架设计
bootstrap 快速搭建一个网页的前端框架 ,页面是一个响应式布局

何为响应式布局：

响应式布局 ：一个网站能够兼容多个终端（手机，iPad等），而不需要为每个终端做一个特定的版本。此概念是为解决移动互联网浏览而诞生的；

表格 class前缀

Class中的类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。 并且可以根据界面大小自适应调整

关于上面参数详解（col-lg-2 col-sm-2）

col —列 md —屏幕分辨率
数字 ----占比（可能不太理解这个占比是什么意思，就是说比如表格分为总共四列，最终列表格大小不同）

详见地址：https://v3.bootcss.com/css/

Button按钮Class样式设置：

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

分别对应Button按钮的Class值以及颜色

关于From表单的Class属性设置：

~~**<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>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

会出现以下的内联式样式

From中如果Class不设置属性的话：

From表单设置为form-horizontal

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

关于input输入框的设置：

<input type="text" class="form-control" placeholder="Text input">

关于img中Class样式设置：

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">