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>

巴特西

I'm studying Bootstrap! loading...

最新文章

热门文章