zoukankan html css js c++ java

Bootstarp总结

Bootstrap

Bootstrap，一个前端的开发框架，来自Twitter，基于HTML、CSS、JavaScript，方便前端开发。

是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

当然，这个主用于响应式网页的开发。

响应式布局

响应式和自适应的区别？
　　响应式：1套代码
　　　　示例网站：https://www.intel.cn/content/www/cn/zh/homepage.html
　　　　　　　　　　https://worktile.com/
　　自适应：多套代码，根据不同的设备加载不同的代码
　　　　示例网站：大部分的网站都有，因为现在的人用手机太多了

响应式网页的不足：
　　内容不宜过多，只适合一些展示类网站，代码量变大了，复杂了。不能有过于复杂的动画

响应式/自适应网页的测试：
　　1.浏览器自带的模拟器
　　　　优点：简单方便
　　　　缺点：结果要进一步确定
　　2.真实物理设备测试
　　　　iphone 4 4s 5 5s 5c 6 6p 6s 6sp 7 7p 8 x xr xs
　　　　安卓一样买一个
　　　　pad ipad 一样买一个
　　　　windows
　　　　winphone

　　　　优点：测试真实可靠
　　　　缺点：成本高，测试任务量极大
　　3.电脑上自带的手机模拟器效果

响应式网站如何编写：
　　1.必须声明viewport（重点重点）
　　　　<meta name="viewport" content="width=device-width,initial-scale=1.0">
　　2.使用流式布局
　　　　float:left , display:inline-block
　　3.文字，图片，容器...使用相对尺寸（70%，em，rem），不要使用绝对尺寸（px）
　　　　em是一个相对单位，相对父元素
　　　　rem是一个相对单位，相对于页面的根元素，即html
　　　　谷歌浏览器的最小号字体为12px，如果不足12，全部显示为12，别的浏览器没有限制
　　　　font-size: 62.5%; 大部分浏览器的默认字体为16px，62.5就是10px

　　　　font-size: 100px;
　　4.最重要的原则：媒体查询技术 css3中的内容 media query
　　　　写响应式的时候一般不需要去管高度，高度让其自己去变化，响应式肯定是不会有横向的滚动条，纵向就不一定了

css3中的媒体查询
　　根据不同的设备，查询到不同的代码，然后执行，不需要刷新

全局css样式

　　网格系统

　　Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

工作原理：

　　行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。

　　使用行来创建列的水平组。

　　内容应该放置在列内，且唯有列可以是行的直接子元素。

　　预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

　　列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。

　　网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

步骤：

　　定义容器，相当于HTML的table，容器分为container（有固定的宽度）、container-fluid（100%的宽度）

　　定义行，相当于HTML的tr，样式：row

　　定义元素，指定该元素在不同的设备上占用的格子数，样式：col-设备代号-格子数目

　　　　xs：超小屏幕，手机，如，col-xs-12

　　　　sm：小屏幕，平板

　　　　md：中等屏幕，桌面显示器

　　　　lg：大屏幕，大桌面显示器

<!DOCTYPE html>
<!-- 1.指定语言的类型 -->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <!-- 2.设置meta标签，为了兼容老版本的IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 3.必须项，设置视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>栅格系统</title>

    <!-- 4.引入bootstrap的主文件 -->
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">

    <!-- 5.处理兼容性的js文件
        cssHack  条件注释法 -->
    <!--[if lt IE 9]>
      <script src="bootstrap-3.3.5-dist/js/html5shiv.min.js"></script>
      <script src="bootstrap-3.3.5-dist/js/respond.min.js"></script>
    <![endif]-->
    <style>
        div{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <!-- “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中 -->
    <div class="container">
        <!-- 一行中有一列 -->
        <div class="row">
            <div class="col-md-1">col-md-1</div>
        </div>
        <div class="row">
            <div class="col-md-2">col-md-2</div>
        </div>
        <div class="row">
            <div class="col-md-3">col-md-3</div>
        </div>
        <div class="row">
            <div class="col-md-4">col-md-4</div>
        </div>
        <div class="row">
            <div class="col-md-5">col-md-5</div>
        </div>
        <div class="row">
            <div class="col-md-6">col-md-6</div>
        </div>
        <div class="row">
            <div class="col-md-7">col-md-7</div>
        </div>
        <div class="row">
            <div class="col-md-8">col-md-8</div>
        </div>
        <div class="row">
            <div class="col-md-9">col-md-9</div>
        </div>
        <div class="row">
            <div class="col-md-10">col-md-10</div>
        </div>
        <div class="row">
            <div class="col-md-11">col-md-11</div>
        </div>
        <div class="row">
            <div class="col-md-12">col-md-12</div>
        </div>
        <!-- 一行中有多列 -->
        <div class="row">
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
            <div class="col-md-1">col-md-1</div>
        </div>
        <div class="row">
            <div class="col-md-2">col-md-2</div>
            <div class="col-md-2">col-md-2</div>
            <div class="col-md-2">col-md-2</div>
            <div class="col-md-2">col-md-2</div>
            <div class="col-md-2">col-md-2</div>
            <div class="col-md-2">col-md-2</div>
        </div>
        <!-- 针对不同的屏幕进行设计 -->
        <div class="row">
            <div class="col-lg-3">col-lg-3</div>
        </div>
        <div class="row">
            <div class="col-md-3">col-md-3</div>
        </div>
        <div class="row">
            <div class="col-sm-3">col-sm-3</div>
        </div>
        <div class="row">
            <div class="col-xs-3">col-xs-3</div>
        </div>
        <!-- 变宽 -->
        <!-- 大屏幕的时候占一份 -->
        <!-- 中等屏幕的时候占三分 -->
        <!-- 小屏幕的时候占六分 -->
        <!-- 超小屏幕的时候占十分 -->
        <div class="row">
            <div class="col-lg-1 col-md-3 col-sm-6 col-xs-10">宽度是可以变化的</div>
        </div>
        <!-- 列的偏移 使用的是margin-->
        <div class="row">
            <div class="col-md-2">LOGO</div>
            <!-- <div class="col-md-3"></div> -->
            <div class="col-md-3 col-md-offset-7">
                <input type="text" style=" 100%" placeholder="请输入你想搜索的内容">
            </div>
        </div>
        <!-- 列的排序 使用的是相对定位中的left，是不会影响其他的列的-->
        <div class="row">
              <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
              <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
        </div>
        <!-- 列的显示和隐藏 -->
        <div class="row">
            <div class="col-xs-5 hidden-xs">col-xs-5</div>
        </div>
    </div>
    <!-- 
    .col-xs-   超小屏幕 手机 (<768px)
    .col-sm-   小屏幕 平板 (≥768px)
    .col-md-   中等屏幕 桌面显示器 (≥992px)
    .col-lg-   大屏幕 大桌面显示器 (≥1200px) -->


    <!-- 6.引入jquery，因为bootstrap是依赖于jquery，所以jquery必须放在前面先加载 -->
    <!-- 最好使用bootstrap自己带的jquery -->
    <script src="bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <!-- 7.引入bootstrap中所需要用到的JavaScript插件 -->
    <script src="bootstrap-3.3.5-dist/js/bootstrap.js"></script>
</body>
</html>

　　排版

　　　　Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。

　　　　使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。

　　代码

　　　　第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。

　　　　第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么应该使用 <pre> 标签

　　　　确保使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： < 和 >。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 代码</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<p><code>&lt;header&gt;</code> 作为内联元素被包围。</p>
<p>如果需要把代码显示为一个独立的块元素，请使用 &lt;pre&gt; 标签：</p>
<pre>
&lt;article&gt;
    &lt;h1&gt;Article Heading&lt;/h1&gt;
&lt;/article&gt;
</pre>

</body>
</html>

　　表格

　　　　Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

标签	描述
<table>	为表格添加基础样式。
<thead>	表格标题行的容器元素（<tr>），用来标识表格列。
<tbody>	表格主体中的表格行的容器元素（<tr>）。
<tr>	一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。
<td>	默认的表格单元格。
<th>	特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。
<caption>	关于表格存储内容的描述或总结。

表格类

下表样式可用于表格中：

类	描述
.table	为任意 <table> 添加基本样式 (只有横向分隔线)
.table-striped	在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 <tbody> 内的任一行启用鼠标悬停状态
.table-condensed	让表格更加紧凑

<tr>, <th> 和 <td> 类

下表的类可用于表格的行或者单元格：

类	描述
.active	将悬停的颜色应用在行或者单元格上
.success	表示成功的操作
.info	表示信息变化的操作
.warning	表示一个警告的操作
.danger	表示一个危险的操作

表单

　　Bootstrap 提供了下列类型的表单布局：

　　　　垂直表单（默认）

　　　　内联表单

　　　　水平表单

所有设置了 .form-control类的<input> 、<textarea> 和 <select> 元素都将被默认设置宽度属性为 100%;。
将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

内联表单：为 <form> 元素添加 .form-inline 类可使其内容左对齐，表单元素在一行排列。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
一定要添加 label 标签

水平排列表单 ：为表单添加 .form-horizontal 类，可以将 label 标签和控件组水平并排布局。

输入框：括大部分表单控件、文本输入域控件，还支持所有 HTML5。

类型的输入控件： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。（只有正确设置了type、属性的输入控件才能被赋予正确的样式）

文本域：<textarea class="form-control" rows="3"></textarea> 可以通过改变 row 属性值改变文本域大小。

多选框和单选框：默认堆叠排列。通过将 .checkbox-inline或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。

下拉列表：为 <select>添加类 .form-control ，可以显示Bootstrap设置的默认样式。对于标记了 multiple属性的 <select>控件来说，默认显示多选项。

静态控件：如果需要在表单中将一行纯文本和 label 元素放置于同一行，为<p> 元素添加 .form-control-static 类。

自动获取焦点：

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." autofocus>

禁用状态：

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

被禁用的 filedset ：为<fieldset>设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件。

只读状态：

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

状态检验：状态包括 error ,warning , success 状态。Bootstrap为这些状态都定义了默认样式。使用时，.has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和.help-block元素都将接受这些校验状态的样式.

添加额外的图标: 设置相应的.has-feedback 类并添加正确的图标.

控件尺寸：通过 .input-lg 类似的类可以为控件设置高度，通过.col-lg-* 类似的类可以为控件设置宽度。通过添加 .form-group-lg 或 .form-group-sm类，为.form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

按钮

以下样式可用于<a>, <button>, 或 <input> 元素上：

类	描述
.btn	为按钮添加基本样式
.btn-default	默认/标准按钮
.btn-primary	原始按钮样式（未被操作）
.btn-success	表示成功的动作
.btn-info	该样式可用于要弹出信息的按钮
.btn-warning	表示需要谨慎操作的按钮
.btn-danger	表示一个危险动作的按钮操作
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg	制作一个大按钮
.btn-sm	制作一个小按钮
.btn-xs	制作一个超小按钮
.btn-block	块级按钮(拉伸至父元素100%的宽度)
.active	按钮被点击
.disabled	禁用按钮

下表列出了获得各种大小按钮的 class：

Class	描述
.btn-lg	这会让按钮看起来比较大。
.btn-sm	这会让按钮看起来比较小。
.btn-xs	这会让按钮看起来特别小。
.btn-block	这会创建块级的按钮，会横跨父元素的全部宽度。

下表列出了让按钮元素和锚元素呈禁用状态的 class：

元素	Class
按钮元素	添加 disabled 属性到 <button> 按钮。
锚元素	添加 disabled class 到 <a> 按钮。

图片

　　.img-rounded：添加 border-radius:6px 来获得图片圆角。

　　.img-circle：添加 border-radius:50% 来让整个图片变成圆形。

　　.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

以下类可用于任何图片中。

类	描述
.img-rounded	为图片添加圆角 (IE8 不支持)
.img-circle	将图片变为圆形 (IE8 不支持)
.img-thumbnail	缩略图功能
.img-responsive	图片响应式 (将很好地扩展到父元素)

响应式图片

　　通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。图片将很好地扩展到父元素。

　　.img-responsive 类将 max- 100%; 和 height: auto; 样式应用在图片上：

辅助类

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

类	描述
.text-muted	"text-muted" 类的文本样式
.text-primary	"text-primary" 类的文本样式
.text-success	"text-success" 类的文本样式
.text-info	"text-info" 类的文本样式
.text-warning	"text-warning" 类的文本样式
.text-danger	"text-danger" 类的文本样式

插件概览　

在前面 布局组件 章节中所讨论到的组件仅仅是个开始。Bootstrap 自带 12 种 jQuery 插件，扩展了功能，可以给站点添加更多的互动。即使您不是一名高级的 JavaScript 开发人员，您也可以着手学习 Bootstrap 的 JavaScript 插件。利用 Bootstrap 数据 API（Bootstrap Data API），大部分的插件可以在不编写任何代码的情况下被触发。

站点引用 Bootstrap 插件的方式有两种：

单独引用：使用 Bootstrap 的个别的 *.js 文件。一些插件和 CSS 组件依赖于其他插件。如果您单独引用插件，请先确保弄清这些插件之间的依赖关系。

　　插件弹出框

<div class="container">
            <button type="button" class="btn btn-lg btn-danger" data-trigger="hover" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. Right?" >点我弹出/隐藏弹出框</button>
        </div>

　　插件收放效果

<div class="container">
            <a href="#Mytarget" data-toggle="collapse">展开和收起</a>
            <button data-toggle="collapse" data-target="#Mytarget">展开/收起</button>

            <div class="collapse" id="Mytarget">
                <div class="well">
                    <p>HTML</p>
                    <p>css</p>
                    <p>JavaScript</p>
                </div>
            </div>
        </div>

　　模态框

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

　　方法

　　　　modal(options)

　　　　将页面中的某块内容作为模态框激活。接受可选参数object。

$('#myModal').modal({
  keyboard: false
})

modal('toggle')

//手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中（也就是，在触发shown.bs.modal或hidden.bs.modal事件之前）

$('#myModal').modal('toggle')

.modal('show')

手动打开模态框。在模态框显示之前返回到主调函数中（也就是，在触发shown.bs.modal事件之前）。

$('#myModal').modal('show')

.modal('hide')

//手动隐藏模态框。在模态框隐藏之前返回到主调函数中（也就是，在触发hidden.bs.modal事件之前）。
$('#myModal').modal('hide')

　　轮播图

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>

查看全文

相关阅读:
JAVAEE框架搭建所需的配置文件大全
 JPA之hibernate例子+总结
 NtDuplicateObject小解读
 黑窗口输入确定数字弹MessageBox（VirtualProtect())
内存理解之简单的内存修改器
 注入理解之挂起线程
 银行家算法
 ReflectiveLoader分析（远程线程注入 PE修正）
Window10中利用Windbg与虚拟机（window7）中调试驱动建立方法
 了解RabbitMQ

原文地址：https://www.cnblogs.com/yeming980912/p/11245852.html