day57

参考：https://www.cnblogs.com/liwenzhou/p/8214637.html

下载：http://www.bootcss.com/   选择用于生产环境的 Bootstrap

Bootstrap环境搭建

目录结构：

bootstrap-3.3.7-dist/

├── css  // CSS文件

│   ├── bootstrap-theme.css  // Bootstrap主题样式文件

│   ├── bootstrap-theme.css.map

│   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件

│   ├── bootstrap-theme.min.css.map

│   ├── bootstrap.css

│   ├── bootstrap.css.map

│   ├── bootstrap.min.css  // 核心CSS样式压缩文件

│   └── bootstrap.min.css.map

├── fonts  // 字体文件

│   ├── glyphicons-halflings-regular.eot

│   ├── glyphicons-halflings-regular.svg

│   ├── glyphicons-halflings-regular.ttf

│   ├── glyphicons-halflings-regular.woff

│   └── glyphicons-halflings-regular.woff2

└── js  // JS文件

    ├── bootstrap.js

    ├── bootstrap.min.js  // 核心JS压缩文件

    └── npm.js

处理依赖

由于Bootstrap的某些组件依赖于jQuery，所以请确保下载对应版本的jQuery文件，来保证Bootstrap相关组件运行正常。

https://v3.bootcss.com/css/ 的全局CSS样式中。

Normalize.css

为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。

可在https://www.bootcdn.cn/normalize/复制标签。

布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

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

Copy
<div class="container">

  ...

</div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

Copy
<div class="container-fluid">

  ...

</div>

示例：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>bootstrap第一个示例</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!--<style>-->

        <!--.row div {-->

            <!--border: 1px solid red;-->

        <!--}-->

    <!--</style>-->

</head>

<body>

<!--容器-->

<div class="container">

    啦啦啦

</div>

<script src="jquery-3.2.1.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

效果：

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

简介

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 通过“行（row）”在水平方向创建一组“列（column）”。
  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

通过研究后面的实例，可以将这些原理应用到你的代码中。

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

  超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px)
栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度 None （自动） 750px 970px 1170px
类前缀 .col-xs- .col-sm- .col-md- .col-lg-
列（column）数 12
最大列（column）宽 自动 ~62px ~81px ~97px
槽（gutter）宽 30px （每列左右均有 15px）
可嵌套 是
偏移（Offsets） 是
列排序 是

1. 栅格系统
            0. 包含在container里面
            1. 每一行（row）均分成12列(col-xx-**）必须放在row中)，
            2. 每一个标签可以自定义占的列数（col-xx-**）
            
            列偏移
            
            列排序
2. 常用样式
            https://v3.bootcss.com/css/

示例：

03bootstrap第一个示例.html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>bootstrap第一个示例</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <style>

        .row div {

            border: 1px solid red;

        }

    </style>

</head>

<body>

<!--容器-->

<div class="container">

    <!--行-->

    <div class="row">

        <!--列 在手机页面上等宽显示-->

        <div class="col-md-1 col-xs-4">占1列</div>

        <div class="col-md-10 col-xs-4">占10列</div>

        <div class="col-md-1 col-xs-4">占1列</div>

    </div>

    <!--第二行-->

    <div class="row">

        <div class="col-md-5 col-md-offset-2">第二行 左边空两列</div>

    </div>

    <div class="row">

        <div class="col-md-3">占3列的div</div>

        <div class="col-md-6">占6列的div</div>

    <!--放不下往下放-->

        <div class="col-md-6">占6列的div</div>

    </div>

    <div class="row">

        <!--右推-->

        <div class="col-md-3 col-md-push-1">占3列的div</div>

        <div class="col-md-6">占6列的div</div>

    </div>

</div>

<script src="jquery-3.2.1.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

效果：

排版查看：https://v3.bootcss.com/css/#type

实现：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    <h1>h1. Bootstrap heading

        <small>Secondary text</small>

    </h1>

    <h2>h2. Bootstrap heading

        <small>Secondary text</small>

    </h2>

    <h3>h3. Bootstrap heading

        <small>Secondary text</small>

    </h3>

    <h4>h4. Bootstrap heading

        <small>Secondary text</small>

    </h4>

    <h5>h5. Bootstrap heading

        <small>Secondary text</small>

    </h5>

    <h6>h6. Bootstrap heading

        <small>Secondary text</small>

    </h6>

    <p>

        世情薄，人情恶，世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶

    </p>

    <p class="lead">

        世情薄，

        <del>人情恶</del>

        ，世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶世情薄，人情恶

    </p>

    <p>高亮坐在我的

        <mark>右边</mark>

        ！

    </p>

    <p class="text-lowercase">Lowercased text.</p>

    <p class="text-uppercase">Uppercased text.</p>

    <p class="text-capitalize">Capitalized text.</p>

    <address>

      <strong>luffycity, Inc.</strong><br>

      沙河地铁站往南走1500米，路左侧<br>

      赋腾国际创客中心A座2005<br>

        <!--缩略语-->

      <abbr title="Phone">P:</abbr> (123) 456-7890

    </address>

    <address>

      <strong>Alex Li</strong><br>

      <a href="mailto:#">first.last@example.com</a>

    </address>

    <blockquote>

      <p>技术的提升只是量的积累，思想的提升才是质的飞跃。</p>

        <!--作者-->

      <footer>老男孩思想</footer>

    </blockquote>

    <!--横摆list-inline-->

    <ul class="list-inline">

        <li>111</li>

        <li>222</li>

        <li>333</li>

    </ul>

    <dl class="dl-horizontal">

      <dt>Alex Li</dt>

      <dd>抽烟 烫头 大马猴</dd>

      <dt>Euismod</dt>

      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>

      <dd>Donec id elit non mi porta gravida at eget metus.</dd>

      <dt>Malesuada porta</dt>

      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>

      <dt>Felis euismod semper eget lacinia</dt>

      <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

    </dl>

</div>

<!--内联代码 高亮-->

<code>&lt;div&gt;</code>

<code>print("hello world!")</code>

<p>按住键盘上的<kbd>ctrl</kbd>键，就支持批量操作</p>

           <!--渲染表格 表格边框  隔行变色  鼠标移上去后变色   紧缩表格-->

<table class="table table-bordered table-striped table-hover table-condensed">

    <thead>

    <tr>

        <th>#</th>

        <th>姓名</th>

        <th>爱好</th>

        <th>操作</th>

    </tr>

    </thead>

    <tbody>

    <tr class="success">//改变颜色

        <td>1</td>

        <td>Egon</td>

        <td>街舞</td>

        <td>

            <button class="edit-btn">编辑</button>

            <button class="delete-btn">删除</button>

        </td>

    </tr>

    <tr class="error">

        <td>2</td>

        <td>Alex</td>

        <td>烫头</td>

        <td>

            <button class="edit-btn">编辑</button>

            <button class="delete-btn">删除</button>

        </td>

    </tr>

    <tr class="warning">

        <td>3</td>

        <td>苑局</td>

        <td>日天</td>

        <td>

            <button class="edit-btn">编辑</button>

            <button class="delete-btn">删除</button>

        </td>

    </tr>

        <tr class="danger">

        <td>3</td>

        <td>苑局</td>

        <td>日天</td>

        <td>

            <button class="edit-btn">编辑</button>

            <button class="delete-btn">删除</button>

        </td>

    </tr>

        <tr class="info">

        <td>3</td>

        <td>苑局</td>

        <td>日天</td>

        <td>

            <button class="edit-btn">编辑</button>

            <button class="delete-btn">删除</button>

        </td>

    </tr>

    </tbody>

</table>

<script src="jquery-3.2.1.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

效果：

图标除bootstrap中的也可选择Font Awesome

不下载的话，可以在bootcdn中复制地址（4.7.0版本）,需注意与Font Awesome（目前最新版本5.0.3）对应的版本。

使用举例：https://fontawesome.com/v4.7.0/examples/#

按钮组件

参考：https://v3.bootcss.com/components/#btn-groups

标签页

注意 .nav-tabs 类依赖 .nav 基类。

Copy
<ul class="nav nav-tabs">

  <li role="presentation" class="active"><a href="#">Home</a></li>

  <li role="presentation"><a href="#">Profile</a></li>

  <li role="presentation"><a href="#">Messages</a></li>

</ul>
<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <style>

        #d1 {

            background-color: red;

        }

        #d2 {

            background-color: yellow;

        }

        #d3 {

            background-color: deeppink;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="btn-group" role="group" aria-label="...">

  <button type="button" class="btn btn-default">Left</button>

  <button type="button" class="btn btn-default">Middle</button>

  <button type="button" class="btn btn-default">Middle2</button>

  <button type="button" class="btn btn-default">Right</button>

</div>

    <!--标签页-->

    <ul class="nav nav-tabs">

      <li role="presentation" class="active"><a href="#d1" data-toggle="tab">个人主页</a></li>

      <li role="presentation"><a href="#d2" data-toggle="tab">个人详情页</a></li>

      <li role="presentation"><a href="#d3" data-toggle="tab">消息页面</a></li>

    </ul>

    <!--上下对应-->

    <div class="tab-content">

        <div role="tabpanel" id="d1" class="tab-pane active">这是个人主页</div>

        <div role="tabpanel" id="d2" class="tab-pane">这是一个详情页</div>

        <div role="tabpanel" id="d3" class="tab-pane">消息页面</div>

    </div>

    <ul class="nav nav-tabs">

      <li role="presentation" class="active"><a href="#">Home</a></li>

      <li role="presentation"><a href="#">Help</a></li>

      <li role="presentation" class="dropdown">

        <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">

          Dropdown <span class="caret"></span>

        </a>

        <ul class="dropdown-menu">

          <li><a href="#">Action</a></li>

          <li><a href="#">Another action</a></li>

          <li><a href="#">Something else here</a></li>

          <li role="separator" class="divider"></li>

          <li><a href="#">Separated link</a></li>

        </ul>

      </li>

    </ul>

</div>

<script src="jquery-3.2.1.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

效果：

以上内容还需要使用JavaScript插件：

标签页。参考：https://v3.bootcss.com/javascript/#tabs

固定在顶部

添加 .navbar-fixed-top 类可以让导航条固定在顶部，还可包含一个 .container 或 .container-fluid 容器，从而让导航条居中，并在两侧添加内补（padding）。

Copy
<nav class="navbar navbar-default navbar-fixed-top">

  <div class="container">

    ...

  </div>

</nav>

需要为 body 元素设置内补（padding）

这个固定的导航条会遮住页面上的其它内容，除非你给 <body> 元素底部设置了 padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是 50px。

Copy
body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

举例：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

  <style>

    body { padding-top: 70px; }

  </style>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">

  <div class="container-fluid">

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class="navbar-header">

      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="#">老男孩教育</a>

    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav">

        <li class="active"><a href="#">Linux学院 <span class="sr-only">(current)</span></a></li>

        <li><a href="#">Python学院</a></li>

        <li><a href="#">大数据学院</a></li>

        <li><a href="#">Java学院</a></li>

        <li><a href="#">前端学院</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他<span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">One more separated link</a></li>

          </ul>

        </li>

      </ul>

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">登录/注册</a></li>

        <li class="dropdown">

          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">联系我们 <span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

          </ul>

        </li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>

<div class="container">

呵呵

</div>

<script src="jquery-3.2.1.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

实现:

参考：https://v3.bootcss.com/components/#navbar-fixed-top

分页

为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。

默认分页

受 Rdio 的启发，我们提供了这个简单的分页组件，用在应用或搜索结果中超级棒。组件中的每个部分都很大，优点是容易点击、易缩放、点击区域大。

Copy
<nav aria-label="Page navigation">

  <ul class="pagination">

    <li>

      <a href="#" aria-label="Previous">

        <span aria-hidden="true">&laquo;</span>

      </a>

    </li>

    <li><a href="#">1</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

    <li><a href="#">4</a></li>

    <li><a href="#">5</a></li>

    <li>

      <a href="#" aria-label="Next">

        <span aria-hidden="true">&raquo;</span>

      </a>

    </li>

  </ul>

</nav>

Labelling the pagination component

The pagination component should be wrapped in a <nav> element to identify it as a navigation section to screen readers and other assistive technologies. In addition, as a page is likely to have more than one such navigation section already (such as the primary navigation in the header, or a sidebar navigation), it is advisable to provide a descriptive aria-label for the <nav> which reflects its purpose. For example, if the pagination component is used to navigate between a set of search results, an appropriate label could be aria-label="Search results pages".

禁用和激活状态

链接在不同情况下可以定制。你可以给不能点击的链接添加 .disabled 类、给当前页添加 .active 类。

Copy
<nav aria-label="...">

  <ul class="pagination">

    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>

    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>

    ...

  </ul>

</nav>

我们建议将 active 或 disabled 状态的链接（即 <a> 标签）替换为 <span> 标签，或者在向前/向后的箭头处省略<a> 标签，这样就可以让其保持需要的样式而不能被点击。

Copy
<nav aria-label="...">

  <ul class="pagination">

    <li class="disabled">

      <span>

        <span aria-hidden="true">&laquo;</span>

      </span>

    </li>

    <li class="active">

      <span>1 <span class="sr-only">(current)</span></span>

    </li>

    ...

  </ul>

</nav>

尺寸

想要更小或更大的分页？.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。

Copy
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>

<nav aria-label="..."><ul class="pagination">...</ul></nav>

<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

翻页

用简单的标记和样式，就能做个上一页和下一页的简单翻页。用在像博客和杂志这样的简单站点上棒极了。

默认实例

在默认的翻页中，链接居中对齐。

Copy
<nav aria-label="...">

  <ul class="pager">

    <li><a href="#">Previous</a></li>

    <li><a href="#">Next</a></li>

  </ul>

</nav>

对齐链接

你还可以把链接向两端对齐：

Copy
<nav aria-label="...">

  <ul class="pager">

    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>

    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>

  </ul>

</nav>

可选的禁用状态

.disabled 类也可用于翻页中的链接。

Copy
<nav aria-label="...">

  <ul class="pager">

    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>

    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>

  </ul>

</nav>

示例：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<nav aria-label="Page navigation">

  <ul class="pagination">

    <li>

      <a href="#" aria-label="Previous">

        <span aria-hidden="true">&laquo;</span>

      </a>

    </li>

    <li><a href="#">1</a></li>

    <li><a href="#">2</a></li>

    <li><a href="#">3</a></li>

    <li><a href="#">4</a></li>

    <li><a href="#">5</a></li>

    <li>

      <a href="#" aria-label="Next">

        <span aria-hidden="true">&raquo;</span>

      </a>

    </li>

  </ul>

</nav>

<nav aria-label="...">

  <ul class="pager">

    <li><a href="#">上一页</a></li>

    <li><a href="#">下一页</a></li>

  </ul>

</nav>

<nav aria-label="...">

  <ul class="pager">

    <li  class="previous disabled"><a href="#">上一页</a></li>

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

  </ul>

</nav>

</div>

<script src="jquery-3.2.1.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

实现：

Bootstrap框架（一）的更多相关文章

  1. Bootstrap框架的学习（一）

    一.Bootstrap框架介绍 Bootstrap是一个非常优秀的前端UI框架,一个轻量级的UI前端框架,是基于HTML+CSS+JavaScript的框架. 二.简单介绍 Bootstrap框架是属 ...

  2. Web前端学习笔记：Bootstrap框架

    很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...

  3. 基于BootStrap框架构建快速响应的GPS部标监控平台

    最近一个客户要求将gps部标平台移植到bootStrap框架作为前端框架,符合交通部796部标只是他们的一个基本要求,重点是要和他们的冷链云物流平台进行适配.我自己先浏览了客户的云物流平台的界面,采用 ...

  4. BootStrap框架

    简介: Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷,是一个CSS ...

  5. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  6. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  7. Bootstrap框架(基础篇)

    本文引用慕课网http://www.imooc.com/learn/141  作者大漠  讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...

  8. bootstrap框架禁用谷歌字体

    bootstrap框架禁用谷歌字体 H5框架换字体.png

  9. css去掉使用bootstrap框架后打印网页时预览效果下的超链接

    在我们写网页的时候,超链接是链接各个页面的桥梁,也是搜索引擎爬虫(spider)收录网站页面的关键,因此,在每个网页中会有许多的超链. 今天,一个同行妹妹在使用了bootstrap框架来搭建自己的网站 ...

  10. 响应式设计，bootstrap框架的IE兼容问题

    学习bootstrap框架,主要是为了集成好的响应式框架,及其兼容性. 但是按bootstrap中文站的说明文档 制作了一个栅格布局的test.html后,怎么测试都不成功,在ie8下一直看不到媒体查 ...

随机推荐

  1. binlog怎样参与mysql recover的

    转自  Louis Hust's Blog MySQL两阶段提交 29 July 2015 参数介绍 两阶段提交 什么情况下会出现binlog写入了,但是实际这条数据不存在库中? 参数介绍 innod ...

  2. Ubuntu下部分软件的简介及安装

    1.安装linux摄像头应用软件cheese sudo apt-get install cheese 2.Ubuntu Tweak    Ubuntu Tweak是一款专门为Ubuntu(GNOME桌 ...

  3. 03 Maven 坐标与依赖

    Maven 坐标与依赖 Maven 的一大功能是管理项目依赖.为了能自动化地解析任何一个 Java 构件, Maven 就必须将它们唯一标识,这就依赖管理的底层基础 一一 坐标.本章将详细分析 Mav ...

  4. 给Array添加去重原型方法

    Array.prototype.unique = function(){ var newArray = []; var oldArray = this; if(oldArray.length<= ...

  5. 修改BUG心得

      修改BUG心得 分类: 项目管理/CMMI2013-01-14 22:06 845人阅读 评论(0) 收藏 举报 目录(?)[-] 一 二 三 一. 1.写第一版时就杜绝这些的发生. 2.思维要开 ...

  6. 2018.10.17 NOIP模拟 管道（状压dp）

    传送门 状压dp好题. 怎么今天道道题都有点东西啊 对于今天题目神仙出题人先膜为上策:%%%%DzYoAk_UoI%%%% 设f[i][j]f[i][j]f[i][j]表示选取点的状态集合为iii,当 ...

  7. 2018.09.26 bzoj4326: NOIP2015 运输计划（二分+树上差分）

    传送门 简单树上操作. 先转边权为点权. 显然所有的询问操作对应的路径会有一些交点,那么我们可以直接二分答案,对于所有大于二分值的询问用树上差分维护,最后dfs一遍每个点被覆盖了几次,当前情况合法当且 ...

  8. 2018.08.21 NOIP模拟 xorand（01trie）

    xorand 描述 有q次操作,每次操作是以下两种: 1. 加入一个数到集合中 2. 查询,查询当前数字与集合中的数字的最大异或值,最大and值,最大or值 输入 第一行1个正整数Q表示操作次数 接下 ...

  9. 在centos7.1上安装systemd

    1.检查本地systemd的版本 [admin@localhost ~]$ systemctl --version          systemd 208   +PAM +LIBWRAP +AUDI ...

  10. C语言之控制台读取上下左右方向键指令

    首先,可以检测任何按键键值 // 首先,检测任何按键的代码 #include<stdio.h> #include<conio.h> int main() { char ch; ...