计算机教程

解决Bootstrap 附加导航(Affix)的问题和使用时若干注意事项

29 6月 , 2019  

1、要清楚Affix分别赋予的class,

一、Bootstrap简介

  开始:affix-top

1、Bootstrap是什么?

Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个开源的前端开发框架

基于HTML、CSS、JavaScript,代码简洁、视觉优美,用来快速开发基于PC以及移动端的Web页面,更快速、简单。

2010 年 6 月,Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历

各种方案后,Bootstrap 最终被确定下来,并于 2011 年 8 月发布。经过很长时间的迭代升

级,由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端

的开源框架。

Bootstrap 最为重要的部分就是它的响应式布局,通过这种布局可以兼容 PC 端、PAD

以及手机移动端的页面访问。

 

Bootstrap官网:http://[www.getbootstrap.com](http://www.getbootstrap.com/)

中文网:http://www.bootcss.com

版本:v3.0、v4.0

  达到top参数:affix

2、特点

l 跨设备、跨浏览器

兼容所有主流浏览器,包括IE7、IE8

l 响应式布局

支持PC、移动端(手机、PAD)等,移动设备优先。

l 丰富的组件

表单、下拉菜单、导航、面板、徽章、标签等

l 内置jQuery插件

模态框、工具提示、弹出框、轮播图等。

l 支持动态样式

LESS 、SASS,可以使用变量、嵌套、混合等,编写样式更快、更灵活

l 支持HTML5/CSS3

  达到bottom参数:affix-bottom

二、起步

2、一定要自定义这些class,否则
插件会默认给你在达到bottom参数时加上relative,会严重影响bottom参数时的样式。

下载Bootstrap

CDN:Content Delivery Network,即内容分发网络,提供稳定快速的资源网络

优化网站:

Js、css等一些库文件,压缩

CDN

 

解压后,目录呈现这样的结构:

bootstrap/

├──   css/

│ ├──   bootstrap.css

│ ├──   bootstrap.css.map

│ ├──   bootstrap.min.css

│ ├──   bootstrap-theme.css

│ ├──   bootstrap-theme.css.map

│ └──   bootstrap-theme.min.css

├──   js/

│ ├──   bootstrap.js

│ └──   bootstrap.min.js

└──   fonts/

├──   glyphicons-halflings-regular.eot

├──   glyphicons-halflings-regular.svg

├──   glyphicons-halflings-regular.ttf

├──   glyphicons-halflings-regular.woff

└──   glyphicons-halflings-regular.woff2

 

主要分为三大核心目录:css(样式)、js(脚本)、fonts(字体)。

1.css 目录中有四个 css 后缀的文件,其中包含 min 字样的,是压缩版本,一般使用这个;不包含的属于没有压缩的,可以学习了解 css 代码的文件;而 map 后缀的文件则是css 源码映射表,在一些特定的浏览器工具中使用。

2.js 目录包含两个文件,是未压缩和压缩的 js 文件。

3.fonts 目录包含了不同后缀的字体文件。

3、样式没有特殊需求的话:affix-top 为默认流
、affix为fixed、affix-bottom为absolute。

准备

开发工具:Hbuild

测试工具:Firfox   chrome (自带响应式设计模式)

4、浮动的容器和屏幕上边沿的间距(如果想留一点的话)用css的top控制,不要用padding等,否则会出现跳动。

基本模板

<!DOCTYPE html>

<html lang="zh-CN">

  <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">

    <title>基本模板</title>

 

    <!– Bootstrap核心css文件 –>

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

<!–CDN–>

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

 

    <!– 如果IE版本低于IE9,该注释生效,html5shiv.min.js让其支持html5标签,respond.min.js让其支持媒体查询 –>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

  </head>

  <body>

    <h1>你好,世界!</h1>

    <!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

  </body>

</html>

注意:控制台报错:

源映射错误:TypeError: NetworkError when attempting to fetch resource. 源 URL:file:///E:/Bootstrap/code/css/bootstrap.css 源映射 URL:bootstrap.css.map[详细了解]

如果不将bootstrap.css.map和bootstrap.css放在一个目录下将报源映射错误

5、浮动容器和滚动容器(一般是body)之间的容器不要有relative等定位。

栅格系统

Bootstrap 的栅格系统,提供了一套响应式、移动设备优先的流式栅格系统。

一.移动设备优先

有一份非常重要的 meta,用于设置屏幕和设备等宽以及是否运行用户缩放,及缩放比例的问题。

二.布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器。由于 padding 等

属性的原因,这两种容器类不能相互嵌套。

.container//固定容器

.container-fluid//100%宽度

 

栅格系统中,浏览器会随着屏幕的大小的增减自动分配最多 12 列。通过一系列的行(row)

与列(column)的组合来创建页面布局。工作原理如下:

  1. “行(row)”必须包含在  .container (固定宽度)或  .container-fluid (100%宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
  2. 通过“行(row)”在水平方向创建一组“列(column)”。

3.你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。

4.类似  .row  和  .col-xs-4  这种预定义的类,可以用来快速创建栅格布局。

5.栅格系统中的列是通过指定 1 到 12 的值来表示其跨越的范围。例如,三个等宽的列可以使用三个  .col-xs-4  来创建。

6.如果一“行(row)”中包含了的“列(column)”大于  12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>栅格系统</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

 

<style>

.col1{

background:red;

}

.col2{

background:#666;

}

.col3{

background:blue;

}

.col4{

background:green;

}

 

</style>

 

  </head>

  <body>

  <!–常用设备尺寸<768、[768,992)、[992-1200)、>=1200>–>

<div class="container">

<!–根据尺寸变化,当到达临界值时会自动适应,匹配相应的设置{实现响应式布局}–>

<div class="row">

<div class="col1 col-xs-3 col-sm-2 col-md-1 col-lg-3">col1</div>

<div class="col2 col-xs-3 col-sm-2 col-md-1 col-lg-3">col2</div>

<div class="col3 col-xs-3 col-sm-2 col-md-1 col-lg-3">col3</div>

<div class="col4 col-xs-3 col-sm-2 col-md-1 col-lg-3">col4</div>

</div>

<hr/>

 

<!–较大尺寸没有设置时默认会继承较小尺寸–>

<div class="row">

<div class="col1 col-xs-3">col1</div>

<div class="col2 col-xs-3">col2</div>

<div class="col3 col-xs-3">col3</div>

<div class="col4 col-xs-3">col4</div>

</div>

<hr/>

 

<!–较小尺寸未设置时默认会独占一行–>

<div class="row">

<div class="col1 col-md-3">col1</div>

<div class="col2 col-md-3">col2</div>

<div class="col3 col-md-3">col3</div>

<div class="col4 col-md-3">col4</div>

</div>

<hr/>

 

<!–列网格总数不能超过12,否则多余的列另起一行–>

<div class="row">

<div class="col1 col-sm-4">col1</div>

<div class="col2 col-sm-4">col2</div>

<div class="col3 col-sm-5">col3</div>

<div class="col4 col-sm-2">col4</div>

</div>

<hr/>

 

</div>

  </body>

</html>

 

6、一般不要忽略bottom参数,否则在浮动容器高度高于浏览器高度时会出问题。

列偏移、列排序、列嵌套

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>栅格系统</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

 

<style>

.row div{

background:#ccc;

border: 1px solid red;

}

</style>

 

  </head>

  <body>

  <!–常用设备尺寸<768、[768,992)、[992-1200)、>=1200>–>

<div class="container">

<!–列偏移,添加类col-md-offset-*,只能向右偏移,后面的都会向右移动–>

<div class="row">

<div class="col-md-4">col1</div>

<div class="col-md-4 col-md-offset-2">col2</div>

<div class="col-md-2">col3</div>

</div>

<hr/>

 

<!–列排序,添加类,col-md-push-*(向右)和col-md-pull-*(向左),可以实现列的交换–>

<div class="row">

<div class="col-md-4 col-md-push-2">col1</div>

<div class="col-md-2 col-md-pull-4">col2</div>

<div class="col-md-4">col3</div>

</div>

<hr/>

 

<!–列嵌套–>

<div class="row">

<div class="col-md-6">

<div class="col-md-3">col1</div>

<div class="col-md-3">col2</div>

<div class="col-md-3">col3</div>

<div class="col-md-3">col4</div>

</div>

<div class="col-md-6">col2</div>

</div>

</div>

  </body>

</html>

7、加句:

排版样式

1.页面主体

Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即

20px);<p>段落元素被设置等于 1/2 行高(即 10px);颜色被设置为#333。

2.标题

Bootstrap 分别对 h1 ~ h6 进行了 CSS 样式的重构,并且还支持普通内联元素定义 class=(.h1   ~   h6)来实现相同的功能。

注:Bootstrap字体颜色、字体样式、行高均被固定了,从而保

证了统一性,而原生的会根据系统内置的首选字体决定,颜色是最黑色。

在 h1   ~   h6 元素之间,还可以嵌入一个 small 元素作为副标题.

h1  ~  h3 下 small 元素的大小只占父元素的 65%,那么通过计算,h1 ~ h3 下的 small 为 23.4px、19.5px、15.6px;h4   ~   h6 下 small 元素的大小只占父元素的 75%   ,分别为:13.5px、10.5px、9px。在 h1   ~   h6 下的 small 样式也进行了改变,颜色变成淡灰色:#777,行高为 1,粗度为 400。

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>排版样式</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

  </head>

  <body>

<!–标题–>

<h1>标题1<small>小标题1</small></h1>

<h2>标题2<span class="small">小标题2</span></h2>

<h3>标题3</h3>

<h4>标题4</h4>

<h5>标题5</h5>

<h6>标题6</h6>

<span class="h1">span下的h1标题</span>

<hr/>

<!–页头组件–>

<div class="page-header">

<h1>标题1<small>页头组件</small></h1>

</div>

<!–class 为lead突出显示–>

<p class="lead">突出(lead)段落</p>

<p>段落</p>

<hr/>

 

<!–内联文本元素–>

<span>普通文本</span><br/>

<mark>标记文本</mark>

<span class="mark">span下的mark</span><br/>

<del>被删除的文本</del><br/>

<s>无用的文本</s><br/>

<ins>插入的文本</ins>

<u>带下划线的文本</u><br/>

<small>小号文本</small>

<span class="small">span下的小号文本</span><br/>

<strong>着重强调的文本</strong><br/>

<b>用于高亮单词或短语,不带有任何着重的意味</b><br/>

<em>斜体文本</em><br/>

<i>用于发言、技术词汇</i>

<hr/>

 

<!–对齐–>

<p class="text-left">左对齐</p>

<p class="text-right">右对齐</p>

<p class="text-center">居中对齐</p>

<p class="text-justify">两端对齐</p>

<p style="border:1px solid red;width:30px" class="text-nowrap">超出后不换行</p>

<hr/>

 

<!–改变大小写–>

<p class="text-lowercase">hello world!</p>//小写

<p class="text-uppercase">hello world!</p>//大写

<p class="text-capitalize">hello horld!</p>//首字母大写

<hr/>

 

<!–缩略语

      class="initialism"复写html5的abbr

–>

<abbr title="http://www.baidu.com" class="initialism">百度</abbr>

<div title="阿里">阿里巴巴</div>

 

<!–地址–>

<address>

中国北京天安门

</address>

 

<!–引用    blockquote-reverse或者pull-right:居右引用–>

<blockquote>

<p>钢铁是咋样练成的?</p>

<footer>百度百科</footer>

</blockquote>

<blockquote class="blockquote-reverse">

<p>钢铁是咋样练成的?</p>

<footer>百度百科</footer>

</blockquote>

<hr/>

<blockquote class="pull-right">

<p>钢铁是咋样练成的?</p>

<footer>百度百科</footer>

</blockquote>

<!–列表

list-unstyled:移除默认样式(无序列表不加小圆点)

list-inline:内联(设置为一行)

–>

<!–默认无序列表–>

<ul>

<li>无序列表1</li>

<li>无序列表2</li>

<li>无序列表3</li>

</ul>

<ul class="list-unstyled list-inline">

<li>无序列表1</li>

<li>无序列表2</li>

<li>无序列表3</li>

</ul>

<hr/>

<!–水平排列描述列表

    dl-horizontal:dt和dd水平排列

    –>

<dl class="dl-horizontal">

<dt>LOL</dt>

<dd>是一款游戏</dd>

</dl>

 

<!–内联代码–>

<code><section></code>

<hr/>

<!–用户输入–>

press   <kbd>ctrl   +   ,</kbd>

<hr/>

<!–代码块–>

<pre><p>Please   input…</p></pre>

 

  </body>

</html>

 

setTimeout(function(){

代码样式

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>代码样式</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

  </head>

  <body>

<!–内联样式–>

<code>Console.log()</code>表示在控制台输出信息<br/>

<code>List<Double></code><br/>

<!–用户输入–>

请按<kbd>ctrl+s</kbd>进行保存

<hr/>

<!–代码块 pre-scrollable带滚动条–>

<pre class="pre-scrollable">

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

var a=10;

var b=20;

return a+b;

</pre>

 

<!–变量–>

var <var>abc</var>=10;

  </body>

</html>

  $(‘…’).affix();

表格

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>表格</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

  </head>

  <body>

<div class="container">

<!–表格

.table:实现基本的表格样式

.table-striped:条纹状表格(让<tbody>里的行产生一行隔一行加单色背景效果) 注:表格效果需要基于基本格式.table

. table-bordered:带边框的表格

.table-hover:让<tbody>下的表格悬停鼠标实现背景效果

        –>

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

<thead>

<!–状态类

可以单独设置每一行/列的背景样式

active:鼠标悬停在行或单元格上

success:标识成功或积极的动作

info:标识普通的提示信息或动作

warning:标识警告或需要用户注意

danger:表示危险或潜在的带来负面影响的动作

                –>

<tr class="success">

<th>编号</th>

<th>姓名</th>

<th>性别</th>

<th>年龄</th>

<th>地址</th>

</tr>

</thead>

<tbody>

<tr class="warning">

<td class="danger">1</td>

<td>张三</td>

<td>男</td>

<td>20</td>

<td>北京</td>

</tr>

<!– .sr-only:隐藏某一行 –>

<tr class="sr-only">

<td>2</td>

<td>李四</td>

<td>女</td>

<td>19</td>

<td>上海</td>

</tr>

<tr>

<td>3</td>

<td>马云</td>

<td>男</td>

<td>18</td>

<td>杭州</td>

</tr>

</tbody>

</table>

</div>

  </body>

</html>

});

表单

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

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

<title>表单</title>

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

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

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

<style>

</style>

</head>

<body>

<!–基本用法–>

<form>

<div class="form-group">

<label for="email">邮箱</label>

<input type="email" id="email" class="form-control" placeholder="请输入邮箱" disabled>

</div>

<div class="form-group">

<label for="pwd">密码</label>

<input type="password" id="pwd" class="form-control" placeholder="请输入密码">

</div>

</form>

<hr/>

<!–内联表单

(表单元素居于一行)

–>

<form class="form-inline">

<div class="form-group">

<!–sr-only隐藏label–>

<label for="email" class="control-label sr-only">邮箱</label>

<input type="email" id="email" class="form-control" placeholder="请输入邮箱">

</div>

<div class="form-group">

<label for="pwd" class="control-label">密码</label>

<input type="password" id="pwd" class="form-control" placeholder="请输入密码">

</div>

<!–输入框组(组件)–>

<div class="form-group">

<label for="money" class="control-label">金额</label>

<div class="input-group input-group-lg">

<div class="input-group-addon">$</div>

<input type="text" id="money" class="form-control" placeholder="请输入金额"/>

<div class="input-group-addon">.00</div>

</div>

<div class="input-group input-group-lg">

<div class="input-group-addon">

<input type="checkbox" name="" id="">

</div>

<input type="text" id="money" class="form-control" placeholder="请输入性别">

</div>

<div class="input-group input-group-lg">

<div class="input-group-addon">

<input type="radio" name="" id="">

</div>

<input type="text" id="money" class="form-control" placeholder="请输入年龄">

</div>

<div class="input-group input-group-lg">

<div class="input-group-btn">

<button class="btn btn-default">Go!</button>

</div>

<input type="text" id="money" class="form-control" placeholder="请输入关键字">

</div>

</div>

</form>

<hr/>

<!–水平排列的表单–>

<form class="form-horizontal">

<div class="form-group">

<label for="email" class="control-label col-sm-2 col-sm-offset-2">邮箱</label>

<div class="col-sm-6">

<input type="email" id="email" class="form-control" placeholder="请输入邮箱">

</div>

</div>

<div class="form-group">

<label for="pwd" class="control-label col-sm-2 col-sm-offset-2">密码</label>

<div class="col-sm-6">

<input type="password" id="pwd" class="form-control" placeholder="请输入密码">

</div>

</div>

</form>

<hr/>

<!–被支持的控件–>

<form>

<textarea  class="form-control" name="" id="" cols="30" rows="5" readonly>

阅读服务协议

阅读服务协议

阅读服务协议

阅读服务协议

</textarea>

<!–

         复选框

         disabled:设置禁用

        –>

<div class="checkbox disabled">

<label>

<input type="checkbox" disabled>吃饭

</label>

</div>

<div class="checkbox">

<label>

<input type="checkbox">睡觉

</label>

</div>

<div class="checkbox disabled">

<label>

<input type="checkbox">打豆豆

</label>

</div>

 

<!–

         设置内联样式

        –>

<label class="checkbox-inline disabled">

<input type="checkbox"  disabled>睡觉

</label>

<label class="checkbox-inline">

<input type="checkbox">打豆豆

</label>

        <!–

         设置下拉列表

        –>

<select class="form-control">

<option>1</option>

<option>2</option>

<option>3</option>

</select>

</form>

<hr/>

<form class="form-horizontal">

<!–校验状态

Has-success:成功状态

Has-error:失败状态

Has-warning:警告状态

 

添加额外的图标

glyphicon-ok:成功状态

glyphicon-warning-sign:警告状态

glyphicon-remove:错误状态

 

注意:图标显示在文本框中需要加上.has-feedback和.form-control-feedback

–>

<div class="form-group has-success has-feedback">

<label for="email" class="control-label col-sm-2 col-sm-offset-2">邮箱</label>

<div class="col-sm-6">

<input type="email" id="email" class="form-control" placeholder="请输入邮箱" >

<span class="glyphicon glyphicon-ok form-control-feedback"></span>

</div>

</div>

<div class="form-group has-error has-feedback">

<label for="pwd" class="control-label col-sm-2 col-sm-offset-2">密码</label>

<div class="col-sm-6">

<input type="password" id="pwd" class="form-control" placeholder="请输入密码">

<span class="glyphicon glyphicon-remove form-control-feedback"></span>

</div>

</div>

</form>

<hr/>

</body>

</html>   

能纠正刷新后或浏览器大小变化时出现的对齐问题。

按钮

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>按钮</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

  </head>

  <body>

<!–可作为按钮使用的标签元素–>

<button class="btn btn-default">button按钮</button>

<input type="button" class="btn btn-default" value="input按钮"/>

<a href="#" class="btn btn-default" role="button">超链接按钮</a>

<br/>

<!–预定义样式、尺寸

       样式:btn-default,btn-success,btn-info,btn-warning,btn-danger,btn-primary,

btn-link

尺寸:btn-lg >默认>btn-sm>btn-xs

btn-block:块级按钮(占整行)

–>

<button class="btn btn-default btn-lg">默认按钮</button>

<button class="btn btn-primary ">首选项按钮</button>

<button class="btn btn-success btn-sm">成功按钮</button>

<button class="btn btn-info btn-xs">一般信息按钮</button>

<button class="btn btn-warning">警告按钮</button>

<button class="btn btn-danger">危险按钮</button>

<button class="btn btn-link">链接按钮</button>

<!–块状按钮–>

<button class="btn btn-default btn-block">块状按钮</button>

  

<!–激活状态(.active)、禁用状态(.disabled)–>

<button class="btn btn-default btn-block active">激活状态按钮</button>

<button class="btn btn-default btn-block disabled">禁用状态按钮</button>

<a href="#" class="btn btn-default disabled" role="button">禁用超链接按钮</a>

 

</body>

</html>

 

图片

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>图片</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

<style>

img{

width:600px;

}

</style>

  </head>

  <body>

<!–图片 img-thumbnail自带响应式  img-responsive响应式的

.img-rounded:圆角

.img-circle:圆

.img-thumbnail:缩略图

–>

<img src="images/jquery.png" class="img-rounded"><br/>

<img src="images/react.png" class="img-circle"><br/>

<img src="images/qq.jpg" class="img-thumbnail"><br/>

<img src="images/react.png" class="img-circle img-responsive"><br/>

  </body>

</html>

 

顺便吐槽下那个stickUp插件,真难用!!!!!

辅助类

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>辅助类</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

<style>

img{

width:600px;

}

.crd{

width:200px;

}

</style>

  </head>

  <body>

<!–情景文本颜色–>

<p class="text-muted">默认文本(柔和灰)</p>

<p class="text-primary">首选文本(主要蓝)</p>

<p class="text-success">成功文本(成功绿)</p>

<p class="text-info">一般文本(信息蓝)</p>

<p class="text-danger">危险文本(危险红)</p>

<p class="text-warning">警告文本(警告黄)</p>

 

<!–情景背景色–>

<p class="bg-primary">首选项情景背景色</p>

<p class="bg-success">成功情景背景色</p>

<p class="bg-info">一般情景背景色</p>

<p class="bg-warning">警告情景背景色</p>

<p class="bg-danger">危险情景背景色</p>

 

<!–关闭按钮–>

<button type="button" class="close" ari-label="Close">

×

</button>

<!–三角符号–>

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

<hr/>

<!–快速浮动–>

<div class="pull-left">左浮动</div>

<div class="clearfix"></div>

<span>crd</span>

<div class="pull-right">右浮动</div>

<div class="center-block bg-primary crd text-center">居中</div>

<hr/>

<!–显示或隐藏内容–>

<span class="show">显示段落</span>

<span class="hidden">隐藏段落</span>

</body>

</html>

 

 

响应式工具

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>响应式工具</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

  </head>

  <body>

<!–注:对于显示的内容,有三种变体,分别为:block、inline-block、inline。

–>

<div class="hidden-xs">超小屏幕时隐藏</div>

<div class="visible-md-block">中等屏幕时显示为块状</div>

<div class="visible-sm-inline">小屏幕时显示为内联</div>

<span>abc<span>

  </body>

</html>

本$文$来$自$博$客$园 fej121!!!

图标

263个图标

可以使用<i>或<span>标签来使用

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>图标</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

  </head>

  <body>

<!–图标–>

<span class="glyphicon glyphicon-user"></span>

<i class="glyphicon glyphicon-user"></i><br/>

<!–按钮上放图标–>

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

<span class="glyphicon glyphicon-star"></span> Star

</button>

  </body>

</html>


下拉菜单

 

声明式用法的关键核心:

1.外围容器使用 class=”dropdown”包裹;

2.内部点击按钮事件绑定 data-toggle=”dropdown”;

3.菜单元素使用  class=”dropdown-menu”。

 

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>下拉菜单</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

  </head>

  <body>

<!–下拉菜单  open打开下拉列表–>

<div class="dropdown open">

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

下拉菜单<span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li>

<li><a href="#">产品</a></li>

<li><a href="#">资讯</a></li>

</ul>

</div>

<br/>

<br/>

<!–下拉菜单  dropup向上弹出列表–>

<div class="dropup">

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

下拉菜单<span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li>

<li><a href="#">产品</a></li>

<li><a href="#">资讯</a></li>

</ul>

</div>

<hr/>

<!–菜单项右对齐–>

<div class="dropup">

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

下拉菜单<span class="caret"></span>

</button>

<ul class="dropdown-menu dropdown-menu-right">

<li><a href="#">首页</a></li>

<li><a href="#">产品</a></li>

<li><a href="#">资讯</a></li>

</ul>

</div>

<hr/>

<!–下拉列表设置标题,设置分割线,禁用–>

<div class="dropup">

<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">

下拉菜单<span class="caret"></span>

</button>

<ul class="dropdown-menu">

<li class="dropdown-header">网站导航</li>

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

<li><a href="#">首页</a></li>

<li><a href="#">产品</a></li>

<li><a href="#">资讯</a></li>

<li class="disabled"><a href="#">关于</a></li>

</ul>

</div>

  </body>

</html>  

按钮组

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>按钮组</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

  </head>

  <body>

  <!–按钮工具栏–>

<div class="btn-toolbar">

<!–按钮组–>

<div class="btn-group btn-group-sm">

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-left"><span>

</button>

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-center"><span>

</button>

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-right"><span>

</button>

</div>

<div class="btn-group">

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-zoom-in"><span>

</button>

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-zoom-out"><span>

</button>

</div>

</div>

<hr/>

<!–按钮组中嵌套下拉菜单–>

<!–按钮组–>

<div class="btn-group">

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-left"><span>

</button>

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-center"><span>

</button>

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-right"><span>

</button>

<div class="btn-group">

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

点我 <span class="caret"><span>

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

</div>

</div>

<hr/>

<!–垂直排列–>

<div class="btn-group btn-group-vertical">

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-left"><span>

</button>

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-center"><span>

</button>

<button type="button" class="btn btn-primary">

<span class="glyphicon glyphicon-align-right"><span>

</button>

</div>

<hr/>

<!–两端对齐排列的按钮组–>

<div class="btn-group btn-group-justified">

<a href="#" class="btn btn-default">左</a>

<a href="#" class="btn btn-default">中</a>

<a href="#" class="btn btn-default">右</a>

</div>

  </body>

</html>

按钮式下拉菜单

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>按钮式下拉菜单</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

  </head>

  <body>

<!–单按钮式下拉菜单–>

<div class="btn-group">

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

点我 <span class="caret"><span>

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

</div>

<hr/>

<!–分裂式按钮下拉菜单–>

<div class="btn-group">

<button class="btn btn-default">Click Me</button>

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

<span class="caret"><span>

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

</div>

<hr/>

<!–向上弹出菜单–>

<!–分裂式按钮下拉菜单–>

<div class="btn-group dropup">

<button class="btn btn-default">Click Me</button>

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

<span class="caret"><span>

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

</div>

  </body>

</html>

输入框组

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>输入框组</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

  </head>

  <body>

<!–输入框组,在左侧添加文字–>

<div class="input-group">

<span class="input-group-addon">@</span>

<input type="text" class="form-control">

</div>

<hr/>

<!–输入框组,在右侧添加文字–>

<div class="input-group">

<input type="text" class="form-control">

<span class="input-group-addon">@163.com</span>

</div>

<hr/>

<!–输入框组,在两侧添加文字–>

<div class="input-group">

<span class="input-group-addon">http://</span>

<input type="text" class="form-control">

<span class="input-group-addon">.com</span>

</div>

<hr/>

<!–左侧使用单选按钮–>

<div class="input-group">

<span class="input-group-addon">

<input type="radio" name="" id="">

</span>

<input type="text" class="form-control">

</div>

<hr/>

<!–右侧使用按钮–>

<div class="input-group">

<input type="text" class="form-control">

<span class="input-group-btn">

<button class="btn btn-primary">提交</button>

</span>

</div>

<!–作为额外元素的按钮式下拉菜单–>

<div class="input-group">

<div class="input-group-btn">

<button class="btn btn-default">Click Me</button>

<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">

<span class="caret"><span>

</button>

<ul class="dropdown-menu">

<li><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

</div>

<input type="text" class="form-control">

</div>

  </body>

</html>

导航

<!DOCTYPE html>

<html lang="zh-CN">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <title>导航</title>

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

    <!–<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">–>

    <!–[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]–>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

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

    <!– Include all compiled plugins (below), or include individual files as needed –>

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

  </head>

  <body>

<!–基本的导航组件 :标签页–>

<ul class="nav nav-tabs">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

<hr/>

<!–基本的导航组件 :胶囊式的标签页–>

<ul class="nav nav-pills">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

<hr/>

<!–基本的导航组件 :胶囊式的标签页,垂直排列–>

<ul class="nav nav-pills nav-stacked">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

<!–基本的导航组件 :胶囊式的标签页,两端对齐–>

<ul class="nav nav-pills nav-justified">

<li class="active"><a href="#">首页</a></li>

<li><a href="#">资讯</a></li>

<li><a href="#">关于</a></li>

</ul>

  </body>

</html>


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图