bootstrap小结

bootstrap小结

实习的时候进公司第一天我们经理就让我看bs中文网
在那之前都没听过bootstrap 然后慢慢学习
其实蛮简单的 bs很强大
如果要用的话 首先到bs中文网下载Bootstrap文件
然后根据文件地址引入
当然也可以使用 Bootstrap 中文网提供的免费 CDN 加速服务
html 代码

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

注:如果没有效果 就在src链接地址里边加上 http:

通常我们使用得最多的还是栅格系统
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
因为row已经有 margin-left和margin-right 各 -15px 如果row不包在 .container 或者 .container-fluid中使用的话
在手机端 默认的会左右滑动 这是不利于用户体验的
如果您需要给字体换颜色 或者给div盒子加背景颜色 bs里边已经有写好的class
只需要直接引用即可 可以进bs中文网 [全局css样式 - 辅助类]中了解

我们会经常用到表单 来说说 我用表单的体会 

在手机端 特别是苹果4的时候 往往这样一个表单是放不下的

让我们来看一下代码html 代码

<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>

这是水平排列的表单 通过为表单添加 .form-horizontal 类，
并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了
这个时候我们就需要把 col-* 里边的内补 padding-left 和 padding-right 的 15px 改掉