zoukankan      html  css  js  c++  java
  • bootscript的相关

    2.标题(2)
      <small>,class:small
    3.段落 <p>  
      让一个段落p突出显示,可以通过添加类名“lead”实现,其作用就是增大文本字号,加粗文本,而且对行高和margin也做相应的处理
    4.使用<b>和<strong>标签让文本直接加粗。
    5.使用标签<em>或<i>来实现斜体
    6.强调类
    .text-muted:提示,使用浅灰色(#999)
    .text-primary:主要,使用蓝色(#428bca)
    .text-success:成功,使用浅绿色(#3c763d)
    .text-info:通知信息,使用浅蓝色(#31708f)
    .text-warning:警告,使用黄色(#8a6d3b)
    .text-danger:危险,使用褐色(#a94442)
    7.文本对齐风格(text-align)
         .text-left:左对齐
         .text-center:居中对齐
         .text-right:右对齐
         .text-justify:两端对齐
    8.列表结构主要有三种:有序列表、无序列表和定义列表
        类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
        类名“.list-inline”来实现内联列表,简单点说就是把垂直列表换成水平列表
        <dl>添加类名“.dl-horizontal”给定义列表实现水平显示效果。
    9.代码
        1、<code>:一般是针对于单个单词或单个句子的代码
        2、<pre>:一般是针对于多行代码(也就是成块的代码)。<pre>代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格
                类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
        3、<kbd>:一般是表示用户要通过键盘输入的内容
    10.表格table
          ☑  .table:基础表格
      ☑  .table-striped:斑马线表格
      ☑  .table-bordered:带边框的表格
      ☑  .table-hover:鼠标悬停高亮的表格
      ☑  .table-condensed:紧凑型表格
      ☑  .table-responsive:响应式表格
    11.表格行tr:颜色不同
          .active: 表示当前活动的信息
          .success:表示成功或者正确的行为
          .info:表示中立的信息或行为
          .warning:表示警告,需要特别注意
          .danger:表示危险或者可能是错误的行为
    12.表单form
         正常表单:是垂直分布的。
         水平表单:要实现水平表单效果,必须满足以下两个条件:
                    在<form>元素是使用类名“form-horizontal”。
                     配合Bootstrap框架的网格系统。(后面讲解)
         内联表单:要将表单的控件都在一行内显示:<form>元素中添加类名“form-inline”
      13.复选框和单选框
           1、不管是checkbox还是radio都使用label包起来了
           2、checkbox连同label标签放置在一个名为“.checkbox”的容器内
           3、radio连同label标签放置在一个名为“.radio”的容器内
                   在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。
      14.水平排列复选框或单选框
            1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
            2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”
      15.按钮button
           .btn        btn-default        btn-primary      btn-info       btn-success      btn-warning      btn-danger      btn-inverse      btn-link
           类定义按钮的背景颜色:与text类似。
           多标签支持:a   span   div    input的submit   
           按钮大小:btn-lg    btn-sm    btn-xs
           类名“btn-block”按钮使用这个类名就可以让按钮充满整个容器:块状按钮
          活动状态主要包括按钮的悬浮状态(:hover),点击状态(:active)和焦点状态(:focus)。禁用状态:disabled
       16.表单的大小
          input-sm:让控件比正常大小更小
          input-lg:让控件比正常大小更大
       17.form-control
          <input><legend><fieldset><textarea>...类名`form-control`,也就是说表单元素使用了类名“form-control”。
                   将会实现一些设计上的定制效果 100%  .<input>表单的类型type必须有。
                   产生焦点状态的效果
                   表单控件:添加disabled属性。 禁用手型变成了不准输入的形状。对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用的 。
        18.表单验证
             .has-warning:警告状态(黄色)
              .has-error:错误状态(红色)
               .has-success:成功状态(绿色)  
              表单验证的时候,不同的状态会提供不同的 icon。 添加类名“has-feedback”即可追加结果图标.
                           <span class="glyphicon glyphicon-ok form-control-feedback"></span>图标代码
               "help-block"样式,将提示信息以块状显示,并且显示在控件底部。与表单在一个块中。<span>标签中写提示信息。
               "help-inline"样式,行内提示信息。可以用网格系统代替。
       19.图像
             1、img-responsive:响应式图片,主要针对于响应式设计
              2、img-rounded:圆角图片
               3、img-circle:圆形图片
                4、img-thumbnail:缩略图片
       20.图标
             类名:glyphicon   glyphicon-search...<span class="glyphicon glyphicon-search"></span>一种搜索图标

    21网格系统
    1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。如:
             <div class="container">
              <div class="row"></div>
             </div>
    2、在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12
          col-xs-*      col-sm-*      col-md-*      col-lg-*   占据*列
    3.行容器(.row),其定义了“margin-left”和”margin-right”值为”-15px”,用来抵消第一个列的左内距和最后一列的右内距
    4.列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移
    5.类名“col-md-push-*”   向右移动*列
                “col-md-pull-*”      向左移动*列
    6.网格嵌套 

  • 相关阅读:
    Android网络框架之Retrofit + RxJava + OkHttp 变化的时代
    网易与Google合作发布开源UI自动化测试方案 牛逼:Google 方面评价,这可能是目前世界上最好的 Android 游戏自动化测试方案。
    GitHub上受欢迎的Android UI Library
    推荐一些socket工具,TCP、UDP调试、抓包工具 (转载)
    pytest 一个测试类怎样使用多种fixture前置方法
    Appium服务器初始化参数(Capability)
    pytest执行用例:明明只写了5个测试用例, 怎么收集到33个!?
    解决VirtualBox 运行时报内存不能written
    VirtualBox 虚拟机怎样设置共享文件夹
    简单通俗讲解 android 内存泄漏
  • 原文地址:https://www.cnblogs.com/gg123/p/7091766.html
Copyright © 2011-2022 走看看