I'm studying Bootstrap! loading...

最近在学习bootstrap框架.

Bootstrap框架是目前前端最受欢迎的框架,出于Twitter公司!搞前端你说你不会Bootstrap都不好意思见人呢. Bootstrap是基于Html Css JavaScript.使网页开发变得迅速简洁明了,是我们在前端开发中必不可少的工具!下面是我学习的总结!

*Bootstrap引用时一定要在jquery后面,因为几乎所有的js脚本都是依赖于jquery.js

<script src="js/jquery-3.1.0.js"></script>
<script src="js/bootstrap.js"></script>

 1.栅格系统

 1.1

栅格系统是通过一个个row(行)和column(列)来组合创建页面布局.row和column必须包含在.container(.container 类用于固定宽度并支持响应式布局的容器)或者.container-fluid(.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器)的容器中.

栅格系统的column根据屏幕分辨率的不同所使用的类前缀也不同.

当px>=1200px时使用.col-lg-(大屏幕显示器),

当992px<=px<=1200px使用.col-md(一般屏幕),

当768px<=px<=992px使用.col-sm(平板屏幕),

当px<=768px时使用.col-xs(手机屏幕).

其实一个row包含很多colunm,最多可以包含12个column.  column可以任意组合,如果是十二列每列就是.col-md-1,如果是8和4组合的话就是.col-md-8+.col-md-4,以此类推.如果一个row有多余的column则会被另起一行排列.

<div class="row">  一个row代表以行 
  <div class="col-md-1">.col-md-1</div>  一个col-md-1代表一列 所有的列都必须包含在row内
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

   1.2列偏移

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>   col-md-offest-4就是将col-md-4向又偏移4列
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

  1.3列嵌套

 栅格系统是可以嵌套的,只不过嵌套的时候需要将元素至于row内,被嵌套的row的column不能超过12列

<div class="row">
  <div class="col-sm-9">    9<12,不能超过12
      <div class="row">
      <div class="col-xs-8 col-sm-6"></div>
      <div class="col-xs-4 col-sm-6"></div>
    </div>
  </div>
</div>

 1.4列排序

<div class="row">
           <div class="col-lg-4 col-lg-push-8">4列</div>   在四列后面加上col-lg-push-8的意思就是将四列和八列对换位置   
           <div class="col-lg-8 ">8列</div>                这不用加col-lg-push-4了,因为就两组,加上的话两组会重复在一个位置
</div>

 

2.排版

2.1  标题标签:h1-h6  h1最大

<h1>h1.  heading</h1>   
<h2>h2.  heading</h2>
<h3>h3.  heading</h3>
<h4>h4.  heading</h4>
<h5>h5.  heading</h5>
<h6>h6.  heading</h6>

 2.2  中心内容  .lead

<p class="lead">...</p>  通过lead属性可以让被修饰的内容突出显示

 2.3  被删除的文本用<del>标签

<del>这里面是被删除的.text</del>

 2.4  额外插入文本用<ins>

<ins>额外插入的文本.text</ins>

 2.5  带下划线的文本<u>

<u>带下划线的.text</u>

 2.6  小号文本<small>

<small>小号文本.text</small>

 2.7  着重某一段文本用<strong>

标签内是被着重的<strong>r我是被着重的</strong>

 2.8  斜体<em>

<em>斜体文本.text</em>

 2.9  对齐

<p class="text-left">居左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-right">居右对齐</p>
<p class="text-justify">行对齐</p>
<p class="text-nowrap">内容不换行</p>

2.10  大小写

<p class="text-lowercase">全部小写</p>
<p class="text-uppercase">全部大写</p>
<p class="text-capitalize">首字母大写</p>

2.11

缩略语用<attr>标签 但是需要为它设置title属性才行

<abbr title="鼠标悬停在缩略语部分要显示的内容">被缩略语的部分</abbr>   被缩略语的部分外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上

 首字母缩略语

<abbr title="鼠标悬停在缩略语部分会显示的内容" class="initialism">HTML</abbr>  需要添加title属性

顺带提一嘴,title属性和alt属性是不同的,title属性是提示文字的.alt是提示图片的,比如一个图片因为网络原因不正常显示,这时就需要用alt属性来提示图片不正常显示时要显示的内容

 2.12  有序列表和无序列表

<ul>        无序列表unordered
  <li>...</li>
</ul>


<ol>        有序列表order
  <li>...</li>
</ol>

 2.13 内联列表 将所有元素放在同一行

<ul class="list-inline">
  <li>...</li>
  <li>...</li>
 <li>...</li>
</ul>

 

3.表格  

<div class="container">   container类是一个用于固定宽度并且支持响应式的一个容器
   <table class="table table-striped table-hover table-bordered table-condensed">  可以给表格定义很多属性 依次是条纹状即斑马线样式/鼠标悬停移入移出效果/增加外边框/缩进表格
       <thead>  这是一个表格的表头标签
           <tr class="danger"> 可以给表头定义属性 danger success warning active info等等
              <td></td>  表头的第一列
              <td></td>  第二列
              <td></td>  第三列
             </tr>
        </thead>
        <tbody>  这是表身
           <tr>    表申的第一行
             <td></td>   第一行的第一列
             <td></td>   第一行的第二列
            <td></td>   第一行的第三列
         </tr>
      </tbody>
  </table>
</div>

 

4.表单

<div class="container">  先设置一个div容器 响应式
   <div id="login">   为表单设置个id
      <form role="form">  表单是form标签
        <h3 class="text-center">这是一个表单</h3>
         <div class="form-group has-success has-feedback">   form-group将表单分组 has-success是输入成功状态  has-feedback为这个输入框后面添加一个图标  需要和下面的<span>关联
              <label for="user">用户名</label>
               <input type="text" id="user" placeholder="请输入用户名" class="form-control"> 一般都加上from-control属性,有了这个属性后:表框是浅灰色 宽度100% 边框圆角 有阴影效果聚焦后会变化
               <span class="glyphicon glyphicon-ok form-control-feedback"></span>  glpphicon-ok是要添加的图标样式  form-control-feedback是将其与上面的has-feedback关联
           </div>
         <div class="form-group has-error has-feedback">
           <label for="password">密码</label> <lable>本身并没有什么显示效果,<lable>是为<input>定义标注,for属性后面就是input的id. 关联之后用户在点击lable标签时会自动聚焦到input上,提升了用户体验
              <input type="text" id="password" placeholder="请输入密码" class="form-control">
              <span class="glyphicon glyphicon-remove form-control-feedback"></span>
          </div>
         <div class="checkbox">  这是一个复选框
            <label>
            <input type="checkbox"> 记住密码
            </label>
         </div>
         <button type="submit" class="btn btn-success  form-control ">点击登录</button>  类型是submit  
     </form>
 </div>
</div>