bootstrap学习笔记

boostrap 3--------bootcss.com   是基于jquery的，需要下载引用jquery库文件

1）bootstrap.css

2) jquery.js    jquery的版本需要匹配  jquery需要在bootstrap之前引用，因为bootstrap很多插件依赖于jquery

3) bootstrap.js

一、bootstrap的全局样式：

HTML元素都可以通过class类设置样式并增强效果

标题：

h1: 36px;

h2:  30px;

h3: 24px;

h4: 18px;

h5: 14px;

h6: 12px;

<h1>标题</h1>

class= h1

副标题： 

small

<small>小标题</small>

文本:

段落：

p标签

在bootstrap中默认：    14px  

行高：20px；

底部外边距： 10px;

对齐方式：

.text-left

.text-center

.text-right    

文本的左中右的对齐

大小写：

.text-lowercase

.text-uppercase

.text-captialize       首字母大写   

字体的大小写

表格：

带边框表格  .table-bordered

条纹状表格  .table-striped

悬停变色   .table-hover

紧凑风格   .table-condensed

设置颜色

active

success

info

warning

danger

表单：

普通的input  单纯一个长方体

input-lg    很大

input-sm   更小

form-control   带有圆角边框的，悬停时有颜色变化的长方体

form-group  代表一个组件    label 和input  select  textarea组成一个组件    

                  有一个默认的底边距 15px

form-inline  一行显示

sr-only  label的提示信息消失，不显示label的信息

control-label  改变label的颜色， 

has-sucess  form-group上结合该类，  改变label的颜色，input边框的颜色

按钮

btn颜色

btn

btn-default

btn-primary

btn-success

btn-info

btn-warning

btn-danger

btn大小

btn-lg

btn-sm

btn-block全屏大小的效果

active  按下的效果

disabled="disabled"   禁用  按钮的颜色也发生了改变

a 标签写上 btn的类，也可以显示为按钮的效果

图片

形状：

圆角 .img-rounded

圆形  .img-circle

带有边框的圆角图形  .img-thumbnail

辅助类：

文本颜色

背景颜色

状态设置

三角符号

二. bootstrap渐进：

开发响应式页面

利用栅格系统适配不同的硬件

栅格 

图标

响应式

meta标签中的viewport

1. width height

2. user-scable  initial-scale

3. maximum-scale  minimum-scale

bootstrap中的响应式：

css3中通过 媒体查询的方式实现响应式布局      @media only screen and (max-width: 900px) { ... }

bootstrap中可以通过栅格系统实现响应式布局  ------------实现原理与媒体查询是一样的；

                                                                   ------------分成12等份

                                                                    ------------对不同设备的屏幕尺寸做了几个类型分类：  

                                                                              lg    > 1200    大屏设备

                                                                            md    >992       中屏设备

                                                                           sm     >768       小屏设备

                                                                            xs     <768       超小屏设备------手机类

<div class="test  col-lg-3  col-md-4 col-sm-6 col-xs-12  col-lg-offset-3   col-md-offset-4"   ---------其中 col-lg-3  指大屏时的宽度    col-lg-offset-3指大屏时的左边距

单位：

px 

em  

rem    html {font-size: 62.5%;}  -------根元素10px =  1rem;   其他元素比如 16px  = 1.6rem即可

图标：

字体图标：

无论放大多少倍数都不失真，因为是基于字体不是基于图片的

引用字体图标：

@font-face {

font-family {......}

}

图标：

<span class = "xxxx" ></span>

.xxx {

font-size:100px;

color:green;

}

三、bootstrap的组件：

data-   自定义属性-------不影响在页面上显示    可以去管理一些数据传递   数据交互的一些效果

下拉菜单：

.dropdown   控制组件为下拉

.dropdown-menu-right  代替  .pull-right  右对齐

divider  分割线

<div class="dropdown"> 

    <button class="btn btn-default dropdown-toggle"   data-toggle="dropdown" >    通过data属性绑定事件属性，点击按钮才会有下拉选项出来。

           这是按钮

    </button>

   <ul class="dropdown-menu" >

        <li> <a href="xxxx" > aaa</a></li>

        <li> <a href="xxxx" > aaa</a></li>

          <li> <a href="xxxx" > aaa</a></li>

  </ul>

</div>

导航：

class .nav 无序列表开始

.nav-tabs   可切换的导航

.nav-pills    胶囊导航

.nav-justified   导航垂直的

<ul class="nav nav-tabs">

        <li class="active"> <a href="xxxx" > aaa</a></li>    默认选中

        <li> <a href="xxxx" > aaa</a></li>

         <li> <a href="xxxx" > aaa</a></li>

</ul>

nav-stacked  垂直显示的导航

分页：

.pagination  父元素中添加表示分页

.pager 放置在分页区域

.previous 把链接向左对齐   

.next 把链接向右对齐

<nav >   

   <ul class="pagger  ">     

        <li class="previous"> <a href="xxxx" > 向左</a></li>

         <li class="next"> <a href="xxxx" > 向右</a></li>

    </ul>

    <ul class="pagination pagination-lg">    分页变大

         <li class="active"> <a href="xxxx" > aaa</a></li>     默认选中

        <li> <a href="xxxx" > 1</a></li>

         <li> <a href="xxxx" > 2</a></li>

          <li> <a href="xxxx" > 3</a></li>

          <li> <a href="xxxx" > 4</a></li>

          <li> <a href="xxxx" > 5</a></li>

     </ul>

</nav>

进度条：

.progress 表示进度条

通过状态类改变进度条的颜色

.progress-bar-striped  使得进度条颜色渐变

<div class="progress">

     <div class="progress-bar progress-bar-success progress-bar-striped" style="width:60%;" >

                60%

     </div>

</div>