bootstrap用法

使用bootstrap的准备工作        

a)引入meta标签,为了移动端        

b)引入jq      

  c)引入bootstrap的css和js文件

除了栅格系统的css部分    

1、当引入文件后会给页面默认加东西        

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;       

 font-size: 14px;       

 line-height: 1.42857143;        

color: #333;   

 2、标题        

重写了h1到h6        

还提供了h1-h6的class名       

 小标题

还提供了small类

3、内联文本元素 *       

 高亮    也加了mark的类        

被删除的文本

带下划线的文本,

小号文本父级字体大小的85%      

  着重

斜体

对齐:text-left|right|center|justify|nowrap              

           文本对齐方式        两端对齐不换行  

文本大小写            

转小写text-lowercase            

转大写text-uppercase            

首字母大写text-capitalize        

基本缩略语attr结合title使用        

首字母缩略语HTML结合title使用       

 地址


4、列表        

清除列表样式 list-unstyled       

 让li变成行内快  list-inline   

 5、表格  ***         

 a)去掉了一些默认样式,边距         

 b)table里面加.table 会加上下边,会自适应          

c)在table里面加table-bordered 四周都有边框         

 d)table-striped  条纹状表格          

 e)table-hover    鼠标悬停         

 f)table-condensed  紧凑型         

 g).active 是给tr加的  鼠标悬停的转台  灰色           

    .success标识成功或积极的动作    绿色           

    .info标识普通的提示信息或动作    蓝色           

    .warning标识警告或需要用户注意  橙色         

   .danger    危险                    红色    

6、表单        

文本元素 加  form-control  让点击的时候有阴影 

 7、按钮  **         

        最好用这两个、当然也可以用input

        如果想用必须先加上 .btn

        a的话务必加上role="button"

        默认按钮  btn-default

        首选项  btn-primary

        成功    btn-success

       提示信息  btn-info

       警告    btn-warning

       危险    btn-danger

       链接    btn-link

      大号    .btn-lg

      小号    .btn-sm

      超小号  .btn-xs

8、图片 **

              给图片加class img-responsive 图片会自适应

               img-rounded    圆角

               img-circle      圆形

               img-thumbnail  边框

9、辅助类***

         a、情境文本颜色  给文字变色

          b、caret 小三角

         c、close ×  默认在右上角

        d、快速浮动:pull-left pull-right

                           清除浮动  clearfix

你可能感兴趣的:(bootstrap用法)