bootstrap用法

作者: 米塔塔 | 来源:发表于2017-03-20 20:26 被阅读0次

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

    还提供了small类

    3、内联文本元素 *       

     高亮<mark>    也加了mark的类        

    被删除的文本<del> <s>

    带下划线的文本,<ins> <u>

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

      着重<string>

    斜体<em>

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

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

    文本大小写            

    转小写text-lowercase            

    转大写text-uppercase            

    首字母大写text-capitalize        

    基本缩略语attr结合title使用        

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

     地址<address>

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

        本文链接:https://www.haomeiwen.com/subject/wwminttx.html