bootstrap随笔
来源：互联网 发布：淘宝钱盾怎么验证 编辑：程序博客网 时间：2024/05/22 17:12
刚接触bootstrap
- 由于Bootstrap是基于jq的，所以引入jq要早于bootstrap
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> //兼容IE9 <meta http-equiv="X-UA-Compatible" content="IE=edge"> //使得移动设备可以随意缩放屏幕，并且页面宽度等于视角的宽度，缩放的比例为1：1 <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap的HTML标准模板</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--你自己的样式文件 --> <link href="css/your-style.css" rel="stylesheet"> <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery --> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>保留和坚持部分浏览器的基础样式，解决部分潜在的问题，提升一些细节的体验，具体说明如下：
- 移除body的margin声明
- 设置body的背景色为白色
- 为排版设置了基本的字体、字号和行高
- 设置全局链接颜色，且当链接处于悬浮“:hover”状态时才会显示下划线样式
- 在Bootstrap中为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>标题（一）</title><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body> <h1>我的第一个bootstrap标题</h1><!--Bootstrap中的标题--><h1>Bootstrap标题一</h1><h2>Bootstrap标题二</h2><h3>Bootstrap标题三</h3><h4>Bootstrap标题四</h4><h5>Bootstrap标题五</h5><h6>Bootstrap标题六</h6><!--Bootstrap中让非标题元素和标题使用相同的样式--><div class="h1">Bootstrap标题一</div><div class="h2">Bootstrap标题二</div><div class="h3">Bootstrap标题三</div><div class="h4">Bootstrap标题四</div><div class="h5">Bootstrap标题五</div><div class="h6">Bootstrap标题六</div><!--任务填写下方--></body></html>- 如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理
<p class="lead">我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。</p>一些通过颜色来强调文本的类
.text-muted：提示，使用浅灰色（#999）
- .text-primary：主要，使用蓝色（#428bca）
- .text-success：成功，使用浅绿色(#3c763d)
- .text-info：通知信息，使用浅蓝色（#31708f）
- .text-warning：警告，使用黄色（#8a6d3b）
- .text-danger：危险，使用褐色（#a94442）
为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：
☑ .text-left：左对齐
☑ .text-center：居中对齐
☑ .text-right：右对齐
☑ .text-justify：两端对齐
- 通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。
<ul class="list-inline"> <li>W3cplus</li> <li>Blog</li> <li>CSS3</li> <li>jQuery</li> <li>PHP</li></ul>W3xplus Blog CSS3 jq PHP
- Bootstrap可以给添加类名“.dl-horizontal”给定义列表实现水平显示效果。
- 此处添加了一个媒体查询。也就是说，只有屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式：
1、将dt设置了一个左浮动，并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px，达到水平的效果
3、当标题宽度超过160px时，将会显示三个省略号
- 在使用代码时，用户可以根据具体的需求来使用不同的类型：
- \
：一般是针对于单个单词或单个句子的代码 - \
：一般是针对于多行代码（也就是成块的代码）
- \:一般是表示用户要通过键盘输入的内容
- \
- 不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码“<”来替代，大于号(>)使用“>”来替代。
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>代码</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body>code风格：<div>Bootstrap的代码风格有三种：<code><code></code>、<code><pre></code>和<code><kbd></code></div>pre风格：<div><pre><ul><li>...</li><li>...</li><li>...</li></ul></pre></div>kbd风格：<div>请输入<kbd>ctrl+c</kbd>来复制代码，然后使用<kbd>ctrl+v</kbd>来粘贴代码</div><!--下面是代码任务部分--><p>请使用ctrl+x复制代码，然后使用ctrl+shift+v将复制的代码粘贴到需要的地方。</p></body></html>- 你只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格
☑ .table：基础表格
☑ .table-striped：斑马线表格
☑ .table-bordered：带边框的表格
☑ .table-hover：鼠标悬停高亮的表格
☑ .table-condensed：紧凑型表格
☑ .table-responsive：响应式表格
Bootstrap还为表格的行元素提供了五种不同的类名，每种类名控制了行的不同背景颜色
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>表格行的类</title><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><table class="table table-bordered"> <thead> <tr> <th>类名</th> <th>描述</th> </tr> </thead> <tbody> <tr class="active"> <td>.active</td> <td>表示当前活动的信息</td> </tr> <tr class="success"> <td>.success</td> <td>表示成功或者正确的行为</td> </tr> <tr class="info"> <td>.info</td> <td>表示中立的信息或行为</td> </tr> <tr class="warning"> <td>.warning</td> <td>表示警告，需要特别注意</td> </tr> <tr class="danger"> <td>.danger</td> <td>表示危险或者可能是错误的行为</td> </tr> </tbody></table> </body></html>- Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。
- 在Bootstrap框架中，通过定制了一个类名
form-control，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。
1、宽度变成了100%
2、设置了一个浅灰色（#ccc）的边框
3、具有4px的圆角
4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
- Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格:1、在元素是使用类名“form-horizontal”。
2、配合Bootstrap框架的网格系统。
- 在Bootstrap框架中实现这样的表单效果是轻而易举的，你只需要在元素中添加类名“form-inline”即可。
- 如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中
- 在label标签运用了一个类名“sr-only”，标签没显示就是这个样式将标签隐藏了。
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>内联表单</title> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></head><body><form class="form-inline" role="form"> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">邮箱</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword2">密码</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码"> </div> <div class="checkbox"> <label> <input type="checkbox"> 记住密码 </label> </div> <button type="submit" class="btn btn-default">进入邮箱</button></form> </body></html>- 为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”
control”，如：<form role="form"><div class="form-group"><input type="email" class="form-control" placeholder="Enter email"></div></form>- 如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。
1、如果checkbox需要水平排列，只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列，只需要在label标签上添加类名“radio-inline”
- 1、input-sm:让控件比正常大小更小
- 2、input-lg:让控件比正常大小更大
- class=”col-xs-7” 但往往很多时候，我们需要控件宽度也要做一定的变化处理。
- 要让控件在焦点状态下有上面样式效果，需要给控件input添加类名“form-control”
- 使用方法为：只需要在需要禁用的表单控件上加上“disabled”即可：
<input class="form-control" type="text" placeholder="表单已禁用，不能输入" disabled>- 在使用了“form-control”的表单控件中，样式设置了禁用表单背景色为灰色，而且手型变成了不准输入的形状。如果控件中不使用类名“form-control”，禁用的控件只会有一个不准输入的手型出来。
- 在Bootstrap框架中，如果fieldset设置了disabled属性，整个域都将处于被禁用状态。
<form role="form"> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">禁用的输入框</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入"> </div> <div class="form-group"> <label for="disabledSelect">禁用的下拉框</label> <select id="disabledSelect" class="form-control"> <option>不可选择</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox"> 无法选择 </label> </div> <button type="submit" class="btn btn-primary">提交</button> </fieldset></form> - 在制作表单时，不免要做表单验证。同样也需要提供验证状态样式，在Bootstrap框架中同样提供这几种效果。
1、.has-warning:警告状态（黄色）
2、.has-error：错误状态（红色）
3、.has-success：成功状态（绿色）
使用的时候只需要在form-group容器上对应添加状态类名
<div class="form-group has-success"> <label class="control-label" for="inputSuccess1">成功状态</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > </div>- 在表单验证的时候，不同的状态会提供不同的 icon，比如成功是一个对号（√），错误是一个叉号（×）等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来，只需要在对应的状态下添加类名“has-feedback”。==请注意，此类名要与“has-error”、“has-warning”和“has-success”在一起==：
div class="form-group has-error has-feedback"> <label class="control-label" for="inputError1">错误状态</label> <input type="text" class="form-control" id="inputError1" placeholder="错误状态"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div>- 平常在制作表单验证时，要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个”help-block”样式，将提示信息以块状显示，并且显示在控件底部。
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" > <span class="help-block">你输入的信息是正确的</span>//在盒子里面- 在Bootstrap V2.x版本中还提供了一个行内提示信息，其使用了类名“help-inline”。一般让提示信息显示在控件的后面，也就是同一水平显示。
<div class="row"><div class="col-xs-6"><input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" ></div><span class="col-xs-6 help-block">你输入的信息是正确的</span></div>//在盒子外面- 关于button：
<button class="btn" type="button">基础按钮.btn</button> <button class="btn btn-default" type="button">默认按钮.btn-default</button> <button class="btn btn-primary" type="button">主要按钮.btn-primary</button> <button class="btn btn-success" type="button">成功按钮.btn-success</button> <button class="btn btn-info" type="button">信息按钮.btn-info</button> <button class="btn btn-warning" type="button">警告按钮.btn-warning</button> <button class="btn btn-danger" type="button">危险按钮.btn-danger</button> <button class="btn btn-link" type="button">链接按钮.btn-link</button>- 使用标签元素之外，还可以使用和标签等。同样，在Bootstrap框架中制作按钮时，除了刚才所说的这些标签元素之外，还可以使用在其他的标签元素上，==唯一需要注意的是，要在制作按钮的标签元素上添加类名“btn”==
<a href="##" class="btn btn-default">a标签按钮</a>- 在Bootstrap框架中提供了三个类名来控制按钮大小，那么在实际使用中，这几个类名可以配合按钮中其他颜色类名一起使用，==但唯一一点不能缺少“.btn”类名==
<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button> <button class="btn btn-primary" type="button">正常按钮</button> <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>- 在制作按钮的时候需要按钮宽度充满整个父容器（width:100%），特别是在移动端的制作中。在Bootstrap中并不需要这样做，Bootstrap框架中提供了一个类名“btn-block”。
<button class="btn btn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button> - 当按钮处理正在点击状态（也就是鼠标按下的未松开的状态），对于元素是通过“:active”伪类实现，而对于这样的标签元素则是通过添加类名“.active”来实现
- “.disabled”样式不会禁止按钮的默认行为，比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为，则需要通过JavaScript这样的语言来处理。对于标签也存在类似问题，如果通过类名“.disable”来禁用按钮，其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的。
- 图像在网页制作中也是常要用到的元素，在Bootstrap框架中对于图像的样式风格提供以下几种风格：==注意不可以通过css样式直接修改img图片的大小，这样操作就不响应了==
1、img-responsive：响应式图片，主要针对于响应式设计
2、img-rounded：圆角图片
3、img-circle：圆形图片
4、img-thumbnail：缩略图片
//规定140*140<img class="img-rounded" alt="140x140" src="http://placehold.it/140x140">- 200个icon：（请点击：http://getbootstrap.com/components/#glyphicons 链接查阅或根据bootstrap.css文件第2393行～第2992行查阅。）
<span class="glyphicon glyphicon-plus"></span> <span class="glyphicon glyphicon-cloud"></span>进一步学习
- 实现原理：通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)
- 框架工作原理：http://www.imooc.com/code/2325
- 使用列偏移（offset）功能来实现。使用列偏移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。
<div class="container"><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div><div class="col-md-2">.col-md-3</div></div><div class="row"><div class="col-md-4">.col-md-4</div><div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div></div></div>==如果总偏移数>12，将会发生了列断行==
- 列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-”和“col-md-pull-” (其中星号代表移动的列组合数)
<div class="row"> <div class="col-md-4 col-md-push-8">.col-md-4</div> <div class="col-md-8 col-md-pull-4">.col-md-8</div> </div>//两个盒子调换位置，push为左移。pull为右移- 还有列的嵌套功能，并且嵌套的row容器有样式
用到Js的部分
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>==特别声明：因为Bootstrap的组件交互效果都是依赖于jQuery库写的插件，所以在使用bootstrap.min.js之前一定要先加载jquery.min.js才会生效果==
- 在使用Bootstrap框架中的下拉菜单组件时，其结构运用的正确与否非常的重要，如果结构和类名未使用正确，直接影响组件是否能正常运用。我们来简单的看看：
1、使用一个名为“dropdown”的容器包裹了整个下拉菜单元素，示例中为:
\
\
\2、使用了一个按钮做为父菜单，并且定义类名“dropdown-toggle”和自定义“data-toggle”属性，且值必须和最外容器类名一致，此示例为:
data-toggle=”dropdown”
3、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu”，此示例为:
\
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>下拉菜单</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><link rel="stylesheet" href="style.css"></head><body> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul></div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>- 在Bootstrap框架中的下拉菜单还提供了下拉分隔线，假设下拉菜单有两个组，那么组与组之间可以通过添加一个空的\
- 并且给这个
- 添加类名“divider”来实现添加下拉分隔线的功能。
<li role="presentation" class="divider"></li>- 为了让这个分组更明显，还可以给每个组添加一个头部（标题）
<li role="presentation" class="dropdown-header">第一部分菜单头部</li>- 你想让下拉菜单相对于父容器右对齐时，可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right”类名
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">-m Bootstrap框架按钮工具栏也提供了这样的制作方法，你只需要将按钮组“btn-group”按组放在一个大的容器“btn-toolbar”中,将按钮组分组排列在一起，比如说复制、剪切和粘贴一组；左对齐、中间对齐、右对齐和两端对齐一组，如下图所示：
<div class="btn-toolbar"> <div class="btn-group"> … </div>在介绍按钮一节中，我们知道按钮是通过btn-lg、btn-sm和btn-xs三个类名来调整padding、font-size、line-height和border-radius属性值来改变按钮大小。那么按钮组的大小，我们也可以通过类似的方法：
☑ .btn-group-lg:大按钮组
☑ .btn-group-sm:小按钮组
☑ .btn-group-xs:超小按钮组
自适应宽度占满屏按钮：\
- 让下拉菜单向上弹出。在Bootstrap框架中专门为这种效果提代了一个类名“dropup，往上弹出的li
- 导航：“nav-tabs”//有uderline、“nav-pills”//没有underline
<ul class="nav nav-tabs"> <li><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li></ul>- 上面同样可以加active和disabled
- 垂直导航状态：\
- 自适应导航：\
- 面包势导航：\
- 响应式导航：http://www.imooc.com/code/3124
- 分页导航：\
- 只提供上下页的导航：
<ul class="pager"> <li><a href="#"> «上一页</a></li> <li><a href="#">下一页»</a></li> </ul> 阅读全文
0 0
- bootstrap随笔
- bootstrap随笔记
- 随笔心得，【bootstrap实战项目第一节】初探bootstrap若干小技巧
- 随笔
- 随笔
- 随笔
- 随笔
- 随笔
- 随笔
- 随笔
- 随笔
- 随笔
- 随笔
- 随笔
- 随笔
- 随笔
- 随笔
- 随笔
- 容斥原理
- 文件获取
- 码云的使用方法
- python爬取txt电子书
- 变量在jq隐式迭代中的特性
- bootstrap随笔
- vue.js安装小记
- YOLOv2训练自己的数据来实现人脸检测详细步骤
- 网络流最大流之Ford-Fulkerson算法
- js 保留两位小数
- Protostar Format Write Up
- 《锋利的jQuery》读书笔记 -- 编写jQuery插件
- tomcat版本低导致启动报"Unable to process Jar entry" Unable to process Jar entry [javassist/bytecode/Opcode
- 大数据处理
