zoukankan      html  css  js  c++  java
  • bootstrap

    bootstrap:简易模版:

    <meta http-equiv='X-UA-Compatible' content='IE=edge'>   //让IE浏览器运行最新的渲染模式
    //<meta name='renderer' content='webkit'>让部分国产浏览器默认采用高速模式渲染页面
    <meta name='viewport' content='width=device-width,initail-scale=1'> //为确保适当的绘制和触屏缩放 <link href='bootstrap.min.css' ref='stylesheet'> <!--[if lt IE9]> //ie9以下浏览器引入 html5shiv.js 和 respond.js 以支持媒体查询media query和html5 <script src='http:cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js> <script src='http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js'> <![endif]--> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script>

    禁用响应式布局:1 移除viewport标签,2 设置.container的width值覆盖默认值 3栅格布局,替换掉.col-md-*

    支持情况:IE8-11;Android、IOS

    bootstrap3.是移动设备优先

    1.bootstrap需要为页面内容和栅格系统包裹一个 .container容器。

        A类:.container用于固定宽度并支持响应式布局的容器。

     B类: .container-fluid 用于100%宽度,占据全部适口的viewport 的容器

    2 栅格系统中,媒体查询media query 创建的关键的分界点阈值。

      超小屏幕,.col-xs-手机 小与768px   ,bootstrap默认

      小屏幕,.col-sm-平板 大于768px      @media (min-@screen-sm-min){}

      中等屏幕,.col-md-桌面显示器,大于992px  @media (min-@screen-md-min){}

      大屏幕,.col-lg-大桌面显示器,大于等于1200px  @media(min-@screen-lg-min){}

           @media (min-@screen-md-min) and @media (max-@screen-md-max){}

    .col-md-offset-4将.col-md-4向右偏移了4个列

    .col-md-push-3:将col-md-3推到前面,

    .col-md-pull-9:将col-md-9拉到后面,

    预定义样式:.h1 .h2  .small   .lead让段落更突出  .text-left .text-center .text-right .text-justify .text-nowrap 文本对其类  .text-lowercase .text-uppercase  .text-capitalize首字母大写  文本大小写  <abbr title="'>文本缩略语    <blockquote>默认引用   .list-unstyle   .list-inline

    表格:.table   .table-striped条纹样式  .table-hover  .table-bordered .table-condensed padding减半   单元格设置颜色.active .success .info .warning .danger

        响应式表格:table要包裹在.table-responsive中。<div class="table-responsive"><table class="table">

    表单

    role='form'  .form-group  .form-control  .form-inline内连样式表单中label要设置.sr-only   .form-horizontal水平排列表单

    表单类型:type= text  password datetime  datetime-local date month time week number email url search tel color

    多选框  .checkbox .radio .disabled禁止  .checkbox-inline  .radio-inline     

        .multiple 允许同时选多个

       .disabled  禁止用

       .readonly 只读属性

    按钮<button>、链接<a>   .btn .btn-default  .btn-primary  .btn-success  .btn-info  .btn-warning  .btn-danger  .btn-link  .btn-lg  .btn-sm  .btn-xs   .active 激活状态  

    图片 支持响应式:.img-responsive

    <img src="..." class="img-responsive" alt="Responsive image">

    .img-rounded  圆角图片  .img-circle圆形图片   .img-thumbnail边框图片

    关闭按钮  .close  <button type='button' class='close' ><span aria-hidden='true'>&times;</span>

    三角符号  .caret  <span class='caret'></span>

    快速浮动:.pull-left  .pull-right

    清除浮动:  .clearfix

    .show  .hidden

    .visible-xs-block/inline/inline-block

    .hidden-md-block

    app典型弹性布局:关键元素高度和位置不变,只有容器元素在做伸缩变换。开发原则:文字流式fluid,控件弹性flexible,图片等比缩放scale

  • 相关阅读:
    [翻译]AxureBasic Interactions原型设计工具Axure学习第1.3节
    [翻译]AxurePage Properties原型设计工具Axure学习第1.2节
    更新数据库表的某一字段为限制范围的随机数
    silverlight带水印的自定义TextBox控件(版本2)
    silverlight带水印的TextBox
    [翻译]AxureMasters原型设计工具Axure学习第2.2节
    [翻译]AxureBuild Wireframes原型设计工具Axure学习第1.1节
    [翻译]Windows Phone(Silverlight) 控件数据绑定
    [翻译]AxureDynamic Panel(Basic)原型设计工具Axure学习第2.1节
    假如你是新浪微博移动方向的产品经理
  • 原文地址:https://www.cnblogs.com/yxiaoqian/p/6109007.html
Copyright © 2011-2022 走看看