bootstrap

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <!-- ie按照默认版本渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置视窗大小 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 双内核浏览器按照极速模式(谷歌内核)渲染 -->
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.css">
  </head>
  <body>
    表单:
      单行文本框 .form-control
      单选框、复选框 .checkbox .radio
      如果需要创建一个表单,它的所有元素是内联的,向左对齐的,标签是并排的,
        请向 <form> 标签添加 class .form-inline。

      horizontal: 水平拖拽 vertical: 上下拖拽
      <textarea rows="form-control" cols="" style="resize: vertical;"></textarea>
      <div style="cursor: pointer;"></div>

      <p><kbd>ctrl</kbd>+<kbd>alt</kbd>+<kbd>del</kbd>三个组成能够快速唤醒任务管理器</p>

      <code></code>的作用是:能够用高亮的背景向时代码


    按钮:
      <button class="btn">anniu</button>
      btn: user-select: none; 禁止用户选择
      .btn-block 转为块元素 宽度百分百 -


    图片:
      通过class引用:
      .img-rounded:添加 border-radius:6px 来获得图片圆角。
      .img-circle:添加 border-radius:50% 来让整个图片变成圆形。

      图片:缩略图: img-thumbnail
      容器:缩略图: thumbnail

      .img-thumbnail:添加一些内边距(padding)和一个灰色的边框。

    通过img标签引用:
      通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。
      .img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上:

    辅助类:
      文本:
        以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗:

      类 描述 实例
        .text-muted        color: #777;
        .text-primary      color: #337ab7;
        .text-success       color: #3c763d;
        .text-info        color: #31708f;
        .text-warning      color: #8a6d3b;
        .text-danger       color: #a94442;

    背景:
      以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗:

      类 描述 实例
        .bg-primary    color: #fff;
                   background-color: #337ab7;

        .bg-success     background-color: #dff0d8;

        .bg-info     background-color: #d9edf7;

        .bg-warning     background-color: #fcf8e3;

        .bg-danger     background-color: #f2dede;

      其他
        类 描述 实例
        .pull-left       元素浮动到左边 float: left!important;

        .pull-right    元素浮动到右边 float: right!important;

        .center-block   设置元素为 display:block 并居中显示 display: block;
                  margin-right: auto;
                  margin-left: auto;

        .clearfix             清除浮动

        .show        强制元素显示 display: block!important;

        .hidden       强制元素隐藏 display: none!important;

        .sr-only     除了屏幕阅读器外,其他设备上隐藏元素 position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0,0,0,0);
                border: 0;

        .sr-only-focusable 与 .sr-only 类结合使用,在元素获取焦点时显示(如:键盘操作的用户)

        .text-hide     将页面元素所包含的文本内容替换为背景图 font: 0/0 a;
                color: transparent;
                text-shadow: none;
                background-color: transparent;
                border: 0;

        .close 显示关闭按钮 float: right;
                font-size: 21px;
                font-weight: 700;
                line-height: 1;
                color: #000;
                text-shadow: 0 1px 0 #fff;
                filter: alpha(opacity=20);
                opacity: .2;

        .caret 显示下拉式功能++

       隐藏:
         display:none; 元素消失,且不占用空间。
         visibility:hidden;元素消失,占用空间

       文字隐藏:text=hide
       显示关闭按钮:close
       显示下拉功能:caret

    <script src="js/jquery-1.11.3.js"></script>

    <script src="js/bootstrap.js"></script>
  </body>
</html>

posted @ 2020-01-01 09:30  Luckjl  阅读(118)  评论(1编辑  收藏  举报