BOOTSTRAP

Bootstrap

一些从学习到现在所了解的一些关于框架bootstrap的一些东西 以下< 都代指<>

前言

bootstrap需要引用bootstrap框架 就像 <link rel=“stylesheet” href="./bootstrap-3.3.7-dist/css/bootstrap.css"/

在引用 <script src="./Bootstrap/js/bootstrap.min.js"</script时候要在前面引用 JQUERY
.min.js与点.min.css与 .css和.js都一样 包含全部内容

栅格系统

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
在用容器（container）定义了一个容器后在子目录中加入class=“row”让其排列 至于列（column）也是一样的原理

最重要的是下面的 在设置了后 我们会将一横排分为12个小格子 我们用col-X X代表数字来设置小格子的数量 但总数加起来为12
比如我们写了3个col-4就可以凑齐12个格子 图像直观的看

还有一些有前缀的可以实现在不同的大小屏幕下的一些变化
在响应式网站的编译中，媒体查询都是最重要的一部分；如果 不进行媒体查询，如何进行响应式？

在栅格系统中，通常使用以下媒体查询（media query）来创建关键的分界点阈值。 这里引用菜鸟教程上的图

当然如果我们不想设置那么多格子 比如我们只用了3个col-3 还有3个想让前面的右移 那么我们可以用列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
嵌套列
为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。
举个例子

多媒体对象

这大概是我最喜欢用的一个标签了
第一条学习了 small text-xxxxx等

今天将其用在了上面 用text-xxxx对字体大小 颜色等改变

想对图片进行居中的时候遇到了问题 由于text-center是对文字进行居中所以对图片无效 ，在网上搜索后 大多是用 .img-responsive center-block 这个类

又尝试用多媒体类 也就是 media来实现左（右）对齐

就可以实现

二级菜单

尝试运用bootstrap来制作二级导航（下拉菜单）dropdown属性的使用和nav的一些类的使用， 但不加data-toggle="dropdown"这个JS文件里的类就无法打开下拉dropdown-menu和dropdown-item全部都失效了，必须加上data-toggle=“dropdown”

因为想要实现触碰展开 用bootstrap.css里的属性实现不了就到处搜索发现加上

.dropdown:hover .dropdown-menu {
display: block;
}来删除open

轮播图

用了 Carouse插件能很好的做出轮播图 不用在去JS上设置时间 等 感觉方便的多

carousel-indicators和carousel-inner运用就可以 但改不了那个小圈圈的样式很难受

刚做完发现不能自动播 百度后
加上 class=“carousel slide” id=“slidershow” data-ride=“carousel” data-interval=“2000”（时间自定）就可以实现自动轮播

补充：昨天关于多媒体的运用 media中要使图片居左居右 要先用一个div中 写 .media-body内容看自己 在用一个div中用.media-right在在里面加img src=""才可以使图片居右，如果是左对齐就要先用.media-left在写.media-body

滚动监听

navbar 为导航条组组件

主题 .navbar-default灰色 .navbar-inverse黑色
.navbar-fixed-top固定在顶部 -bottom则为在底部 。

刚开始发现怎么滚动都无法实现滚动监听 发现加上id="navbar-example"在

中就可以实现

在在子元素中设置 ul（ ul标签要加上 class=“nav navbar-nav”） 组 里面的li为监听botton 重点（li中用a标签 herf=“#xx” xx不是网址 为监听botton的连接量 下面id等于这个量就可以实现了）

然后简体的元素中的文档 新建一个div 要加上data-spy=“scroll”（重点） 还要加上
style=“height:200px（数值看情况）;overflow:auto; position: relative;” 然后下面的文档用id=“这里就是上面的连接了”