zoukankan      html  css  js  c++  java
  • boostrap

    media 根据不同的屏幕大小,选择不同的CSS文件

    <link  rel="stylesheet"  type="text/css"  media="screen and (max-500px)"  href="small.css">

    <link  rel="stylesheet"  type="text/css" media="screen and (min-500px)"  href="large.css">

    Bootstrap----部分类名的应用

    颜色类名:  -danger红   -warning黄   -success绿   -info信息蓝   -primary主要蓝 (前面加上相关基本类名 eg:  btn-danger 按钮是红色)

    文本:

    文本位置:  居中 text-center , 居右 text-right , 居左 text-left , 两端对齐 text-justify (IE  支持的浏览器不多)

    大小写: 大写 text-uppercase  小写 text-lowercase   首字符大写  text-capitalize

    突出强调 lead       不换行 text-nowrap

    文本颜色:  红色字体text-danger   ......  柔和灰  text-muted

    背景颜色: bg-danger   bg-warning  bg-success  bg-info  bg-primary

    列表:  

    无样式  list-unstyled     行内 list-inline

    table基本表格样式:

    每个类名是一种效果,它们之间需要组合使用   

    class=" table  table-bordered  table-striped  table-hover "        table-striped  表示隔行有条纹

    按钮:

    类型大小:  btn-lg 大   btn  基本按钮样式     btn-sm  小按钮    btn-xs  小小按钮

    按钮颜色:  btn-danger   ......  btn-link 

    按钮分组: btn-group

    活跃的 active    禁止点击 disabled    关闭  close(向右浮动)    (×) &times;    <button class="btn close"> &times; </button>

    左右浮动:   pull-left    pull-right           清除浮动:   clearfix

    显示与隐藏:    show     hidden

    响应式:   大屏显示 visible-lg-inline      大屏隐藏 hidden-lg        三种后缀:  inline     block   inline-block

    263个图标的类:

    要放图标: glyphicon  哪个类型 :glyphicon-waining-sign   效果图:

    分页:     用ul-li 标签写,

    <ul class="pagination pagination-lg">    

    <li>标签内部放<a>标签  eg:  <li><a href="">&lang;</a></li>  <li><a href="">1</a></li> <li><a href="">&rang;</a></li>

    翻页:    用ul-li 标签写,

    <ul class="pager"> 
    <li>标签内部放<a>标签  eg:  <li><a href="">上一页</a></li>

    对齐翻页:   用ul-li 标签写,

    <ul class="pager">
    <li>标签内部放<a>标签  eg:  <li  class="previous"><a href="" >上一页</a></li>

                                                 <li  class="next"><a href="" >上一页</a></li>

    徽章:   badge   

    表单:

    form  块级       form-inline  行内    form-ground 分组

    input标签:

    form-control   input基本样式   input-ground 分组  input-ground-addon将框外文字与输入框结合在一起

    在输入框后添加图标:

    下拉菜单:    (默认隐藏  点击显示)

             1.按钮和菜单放在一个外层盒子中  类名为dropdown(下拉) 或 dropup(上拉)   其内部属性和类都不变

             2.按钮需要设置一个属性   data-toggle="dropdown"

             3.菜单<ul>标签设置类名 dropdown-menu

    栅栏(格)系统:

    把屏幕分为12列, 通过行row  列col  组合来分配格子

    最外层盒子的类名为   Container   固定宽度   或   container-fluid  100%宽度  

    大屏  lg   >1200px       中屏   md  >992px       小屏   sm   >768px      特小屏   xs    <768px  

    col 只能作为 row的子标签    eg: <div class="row"><div class="col-md-4"></div></div>   若另起一行,只占设置的比例

    如果每一份要使用栅格,就要使用外层类名为row的盒子

    替换   col-md-pull-移动的列数      向左边移动

              col-md-push-移动的列数    向右边移动

    留空白    空白位置在中间,通过移动    col-md-offset-移动的列数


    导航:   ul-li

    面包屑导航:  (路径导航)    <ul>的类名为:  breadcrumb      类似于这种效果:  qq / 分组 / 同学

    导航nav:

    nav  导航样式        nav-tabs  基本导航        nav-pills  胶囊      nav-stacked   竖向      nav-justify   两端对齐

    导航条:

    navbar  导航条      navbar-default  基本导航条        navbar-inverse  反色导航条

  • 相关阅读:
    Spring基础知识
    Hibernate基础知识
    Struts2基础知识
    在eclipse里头用checkstyle检查项目出现 File contains tab characters (this is the first instance)原因
    java后台获取cookie里面值得方法
    ckplayer 中的style.swf 中的 style.xml 中的修改方法
    java hql case when 的用法
    Windows下Mongodb安装及配置
    Mongodb中经常出现的错误(汇总)child process failed, exited with error number
    Mac 安装mongodb
  • 原文地址:https://www.cnblogs.com/KLYY/p/6489167.html
Copyright © 2011-2022 走看看