bootstrap3 主题
2018-04-05 14:34:00 weixin_34186128 阅读数 56

bootstrap第三方主题的网站:
Bootswatch: Free themes for Bootstrap https://bootswatch.com/

使用实例:
最好懂的 Bootstrap 实战案例教程 - CSDN博客 https://blog.csdn.net/qq_14991385/article/details/60755620

2015-08-13 15:37:50 javakeffer 阅读数 4110

最近使用bootstrap做前端网页开发,bootsreap自带的颜色不合适,需要使用新的主题颜色方案,在网上搜索后发现一个不错的网站,只需要使用一张图片,便可根据图片中的颜色生成套主题,并可以下载这套主题的css样式问题,替换bootStrap的css文件即可使用,很方便。

链接www.lavishbootstrap.com

2018-03-27 19:03:58 xingxingxingge 阅读数 479

1、登录bootstrap官网,点击下载Bootstrap   https://v3.bootcss.com/getting-started/
2、导入对应的样式文件css
3、导入对应的js,需要导入bootstrap.js或者bootstrap.min.js文件,bootstrap的前提是jquery,所以我们要在导入bootstrap.js前面导入jquery.min.js
对应导入代码:
<!--导入样式-->

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

<!--导入bootstrap.js包-->

<script src="jquery/jquery-3.1.1.min.js"></script>
<script src="Bootstrap/js/bootstrap.min.js"></script>

Bootstrap常用的class:

1、.container 居中的内容展示
2、.row  将容器分为12列

3、.col-xs-4  在.row中的列, 列必须在.row 中   .col-xs-4表示占据屏幕的三分之一 

在不同的屏幕宽度下使用:  col-xs-4 宽度小于768px  、col-sm-4宽度≥768px<992px 、col-md-4 宽度≥992px<1200px 、col-lg-4宽度≥1200px

4丶按钮

添加 .btn-lg.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

按钮组:

<div class="input-group">
    <span  class="input-group-addon">状态</span>
    <select class="form-control">
        <option value="">请选择</option>
        <option value="已审核">已审核</option>
        <option value="未审核">未审核</option>
    </select>
</div>
<div class="input-group">
    <span  class="input-group-addon">备注</span>
    <input class="form-control" type="text">
</div>

5丶pull-left/right  元素浮动到左边/右边 

6丶clearfix  清除浮动

7丶show/hidden 显示/隐藏

8丶divider 分隔线

9丶visible-*  通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容。

10丶.table 基本样式(只有横向分隔线)

.table-striped  条纹状表格、.table-bordered 带边框的表格、.table-hover 对鼠标悬停状态作出响应、.table-condensed 紧缩表格

.table-responsive  将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失

tr/th/td 可以使用.active/.success/.info/.warning/.danger来改变行或者单元格的颜色

更多查看官网 https://v3.bootcss.com/css/

2018-07-17 06:30:04 weixin_42359436 阅读数 114

     1.Bootstrap.

 

2.入门例子创建:

 

 

  1. 引入bootstrap.min.css资源文件 <link rel=”stylesheet” href=”location”>

 stylesheet是外部样式表

  1. <meta name=”viewpoint” content=“width=device-width,initail-scale=1”>  ;宽度=当前物理设备宽度,缩放比例不缩放;为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。
  2. 导航名称:navbar  定义标签<nav></nav>

<nav class=”navbar navbar-default navbar-fixed-top”> //样式:默认样式 位置

  1. 容器:container     <project name>
  2. Class=”active”//当前选中的 <a href=”#”>跳转当前界面
  3. <style></style>样式;padding:50px ;15px; 上下位置 ;text-align:center;文字位置

3.全局css样式—排版

排版:标题,页面主体,内联文本元素,对齐,改大小写,缩略语,地址,引用和列表。

1.标题:

HTML 中的所有标题标签,<h1> 到 <h6> 均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式。

<h1>...</h1>

<h2>...</h2>

<h3>...</h3>

<h4>...</h4>

<h5>...</h5>

<h6>...</h6>

在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题。

h1. Bootstrap heading Secondary text

h2. Bootstrap heading Secondary text

 

<h1>h1. Bootstrap heading <small>Secondary text</small></h1><h2>h2. Bootstrap heading <small>Secondary text</small></h2>
页面主体:
Bootstrap 将全局 font-size 设置为 14pxline-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin);
通过添加 .lead 类可以让段落突出显示

内联文本元素
<mark></mark> 背景文字;对于被删除的文本使用 <del> 标签;为文本添加下划线,使用 <u> 标签;通过增加 <strong>...</strong> 值强调一段文本;斜体<em></em>
对齐:
通过文本对齐类,可以简单方便的将文字重新对齐
<p class="text-left">Left aligned text.</p><p class="text-center">Center aligned text.</p><p class="text-right">Right aligned text.</p>
改变大小写:
通过这几个类可以改变文本的大小写。
<p class="text-lowercase">Lowercased text.</p>//全部小写
<p class="text-uppercase">Uppercased text.</p>//全部大写
<p class="text-capitalize">Capitalized text.</p>//首字母大写
缩略语:
<abbr title="attribute">attr</abbr>
当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap 实现了对 HTML 的 <abbr> 元素的增强样式。缩略语元素带有 title 属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上(对
使用辅助技术的用户也可见), 但需要包含 title 属性。
地址:
<address>
  <strong>Twitter, Inc.</strong>
××××××××××
  <abbr title="Phone">P:</abbr> (123) 456-7890
 <a href="mailto:#">first.last@example.com</a></address>
引用:
 通过赋予 .blockquote-reverse 类可以让引用呈现内容右对齐的效果。
<blockquote class="blockquote-reverse">...</blockquote>
有(无)序列表:
无:
<ul>
  <li>...</li></ul>
有:<ol><li>...</li></ol>

无样式列表:

移除了默认的 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。这是针对直接子元素的,也就是说,你需要对所有嵌套的列表都添加这个类才能具有同样的样式。

<ul class="list-unstyled">
  <li>...</li></ul>

内联列表:

通过设置 display: inline-block; 并添加少量的内补(padding),将所有元素放置于同一行。

  • Lorem ipsu   Phasellus iaculis   Nulla volutpat
  • <ul class="list-inline"> <li>...</li></ul>

描述:

带有描述的短语列表。

Description lists

A description list is perfect for defining terms.

Malesuada porta

Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt>...</dt>
  <dd>...</dd></dl>

水平排列的描述:

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。

Description lists    A description list is perfect for defining terms.

     Euismod    Vestibulum id ligula porta felis euismod semper eget lacini

<dl class="dl-horizontal">

  <dt>...</dt>
  <dd>...</dd></dl>

4.栅格系统(gird system)代码 表格

//为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签。

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

//gird system 中颜色定义两次  rgba 中的代表通道图层里透明度

  1. 布局容器:

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

2 栅格参数:

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


超小屏幕 手机 (<768px)

小屏幕 平板 (≥768px)

中等屏幕 桌面显示器 (≥992px)

大屏幕 大桌面显示器 (≥1200px)

 

栅格系统行为

总是水平排列

开始是堆叠在一起的,当大于这些阈值时将变为水平排列C

.container 最大宽度

None (自动)

750px

970px

1170px

类前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列(column)数

12

Ex:

<div class="row">
  <div class="col-md-1">*******</div>//可以添加12个
  

3.偏移:  使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin)。例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。

4.嵌套列

为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列)。

Ex:

<div class=”row”>

<div class=”col-sm-9”>***

<div class=”row”>

<div class=”col-xs-4”>****</div></div></div></div>

5.列排序:

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>

5.Css代码  

1.内联代码:

通过 <code> 标签包裹内联样式的代码片段。

For example, <section> should be wrapped as inline.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

2.用户输入

通过 <kbd> 标签标记用户通过键盘输入的内容。

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

3.代码块

多行代码可以使用 <pre> 标签。为了正确的展示代码,注意将尖括号做转义处理。

<p>Sample text here...</p>
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

还可以使用 .pre-scrollable 类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条。

4.变量

通过 <var> 标签标记变量。

y = mx + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

5.程序输出

通过 <samp> 标签来标记程序输出的内容。

This text is meant to be treated as sample output from a computer program.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

6.Css表格

  1. 条纹表格:<tatble class=”table table-striped”>
  2. 带边框表格:<tablt class=”table table-bordered”>
  3. 鼠标悬停:<table class="table table-hover">
  4. 紧缩表格:<table class="table table-condensed">

5.状态类:

通过这些状态类可以为行或单元格设置颜色。

 

<tr class="active">...</tr><tr class="success">...</tr>

Class

描述

.active

鼠标悬停在行或单元格上时所设置的颜色

.success

标识成功或积极的动作

.info

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

.warning

标识警告或需要用户注意

.danger

标识危险或潜在的带来负面影响的动作

6.响应式表格:

 将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失

Ex:<div class=”table table-responsive”>

 

7.Css表单 按钮和图片

  1.基本实例

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input><textarea>和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

Ex:

<form >

        <div class="form-group">

            <label>用户名</label>

            <input type="name" class="form-control" placeholder="姓名"><!--placeholder位置标识符-->

</div>

<div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
  1. 内联表单

<!--      label 隐藏:<label class="sr-only">    -->

<!--内联表单  <form class="form-inline"> -->

3.水平排列的表单

通过为表单添加 .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。

 <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
</div>
8.Css表单样式(被支持的控件)
  所有表单宽度都由栅格系统控制
  1. 输入框
包括大部分表单控件,文本输入域,还支持所有HTML5类型的输入控件:
Text,password,datetime,datetims-local,date,month,time,week,number和color.
(必须添加声明类型:type)

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

  1. 文本域:

<textarea class="form-control" rows="3">HelloHello</textarea>

<!--rows:列-->

  1. 多选和单选框

 class="checkbox"<!--复选框-->

 class="radio"<!--单选框-->

    <input  name="sex" type="radio" checked>男

    <!- - 男女name要一样 - ->

  1. 内联单选或者多选

通过将.checkbox-inline或.radio-inline类应用到一系列的多选框(checkbox)或单选框(radio)控件中,可以使这些控件排列在一行

Ex:<label class=”checkbox-inline”>

5.

<!--静态空间-->

<p class="form-control-static"></p>

  1. 下拉列表

<select class="form-control">

    <option>1</option>

    <option>2</option>

    <option>3</option>

</select>

对于标记的multiple属性的<select>控来说,默认显示多选项。

  1. 禁用状态

为输入框设置disabled属性可以禁止与其他用户有任何交互(焦点,输入等)。被禁用的输入框颜色更浅。

<input type="text" class="form-control" placeholder="禁用" disabled>

  1. 只读状态

<input type="text" class="form-control" placeholder="只读" readonly>

8.被禁用的 fieldset

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

<a> 标签的链接功能不受影响)

9.      校验状态

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

10.添加额外的图标

你还可以针对校验状态为输入框添加额外的图标。只需设置相应的 .has-feedback 类并添加正确的图标即可。

反馈图标(feedback icon)只能使用在文本输入框 <input class="form-control"> 元素上。

11.控件尺寸

通过 .input-lg 类似的类可以为控件设置高度,通过 .col-lg-* 类似的类可以为控件设置宽度。

9.Css按钮图片

1.<button>可作为按钮

         <button  type="button" class="btn btn-default">默认</button>

         <button  type="button" class="btn btn-success">成功</button>

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

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

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

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

         <button  type="button" class="btn btn-info">一般信息</button>

</div>

2.设置按钮大小:类.btn-lg/ btn-sm/ btn-xs

3.充满容器:类.btn-block

4.禁用状态:disabled

5.<a>标签可作为按钮

<a href="#" class="btn  btn-default  btn-lg  active" role="button" >default</a>

//active:激活状态

6.<input>标签可用于按钮

<input type="button" class="btn btn-danger" value="names">

  1. 图片:

<img src="" alt="" class="img-circle">//圆

<img src="" alt="" class="img-rounded">//圆方形

<img src="" alt="" class="img-thumbnail">带边框方形

  1. 辅助类:

<span class=”caret”></span>//三角符号

  1. 情景背景颜色

<p class=”bg-primary”>... </p>

<p class=”bg-warning”>... </p>

<p class=”bg-success”>... </p>

<p class=”bg-danger”>... </p>

 

10.组件 (下拉菜单)

  1. 在引用bootstrap.min.js时 必须引用jquery.min.js

<script src="jquery.min.js"></script>//script标签在引入路径时用src

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

  1. 字体图标:

<span class=”代码”></span>

  1. 下拉菜单:

<div class="container">

    <div class="dropdown pull-right//右移"><!--下拉菜单-->

        <button class="btn btn-default dropdown-toggle" >下拉菜单

        <!-- dropdown-toddle"多次点击不同状态-->

        <span class="caret">//三角符号

        </span></button>

        <ul class="dropdown-menu dropdown-menu-right//右移" role="menu"  aria-labelledby="dropdownMenu1" >

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

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

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

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

            <li class="dropdown-header">大写一到四</li>

            <li role="presentation" class="divider"></li>//分割线

            <li><a href="#" role="menuitem">一</a></li>

            <li><a href="#" role="menuitem">二</a></li>

            <li class="disabled">//禁用<a href="#" role="menuitem">三</a></li>

            <li><a href="#" role="menuitem">四</a></li>

</ul>

    </div>

</div>

  1. 按钮工具栏btn-toolbar
  1. 通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用,可以设置为单选框或多选框的样式和行为。
  2. 确保设置正确的 role 属性并提供一个 label 标签

为了向使用辅助技术 - 如屏幕阅读器 - 的用户正确传达一正确的按钮分组,需要提供一个合适的 role 属性。对于按钮组合,应该是 role="group",对于toolbar(工具栏)应该是 role="toolbar"

3.基本实例:

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div></div>
  1. 尺寸
只要给 .btn-group 加上 .btn-group-* 类<div class="btn-group btn-group-lg" role="group"
  1. 嵌套

想要把下拉菜单混合到一系列按钮中,只须把 .btn-group 放入另一个 .btn-group 中。

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

 
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div></div>
  1. 垂直排列<div class="btn-group-vertical">
  2. 按钮在一排并充满屏幕    <div class="btn-group-justified">
  1. 按钮式下拉菜单dropdown-toggle

1.单按钮下拉菜单基本实例:<div class="container">

    <div class="btn-group">

        <button type="button" class="btn btn-info dropdown-toggle btn-lg" data-toggle="dropdown">按钮式下拉菜单

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

        </button>

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

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

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

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

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

        </ul>

    </div>

2.分裂式下拉菜单:<div class="btn-group">

        <button type="button" class="btn btn-info">按钮式下拉菜单</button>

//即再添加一个按钮

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

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

        </button>

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

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

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

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

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

        </ul>

    </div>

3.尺寸大小:在.button类中添加btn-lg、btn-sm、btn-xs

4.向上弹出:<div class="btn-group dropup">
13.组件中输入框input
1.通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮,可以实现对表单控件的扩展。为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类,可以给 .form-control 的前面或后面添加额外的元素。
在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。
<div class="input-group input-group-xs">
<span class="input-group-addon">S</span>      
        <input type="text" class="form-control" >
<span class="input-group-addon input-group-xs">.00</span>    
</div>

2.尺寸:为 .input-group 添加相应的尺寸类input-group-xs
3.作为额外元素的多选框和单选框

<div class="row"><!--可控制大小-->

         <div class="col-lg-6"><!--宽度-->

                  <div class="input-group">

                           <span class="input-group-addon">//换<span class="input-group-btn">-->

                                    <input type="checkbox" >//复选框

                                    <!--input type="radio"-->//单选框

                                    <!--<button class="btn btn-info" type="button">GO!</button>-->

<!--button按钮将换成<span class="input-group-btn">-->

                           </span>

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

                  </div>

         </div>

</div>

4.作为额外元素的按钮式下拉菜单

<div class="row">

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

        <div class="input-group">

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

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

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

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

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

                        <li><a href="#">Hello</a></li></ul></div>

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

        </div>

    </div>

</div>

</div>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="bootstrap.min.js"></script>

5.作为额外元素的分裂式按钮下拉菜单

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="..."></div>

14.组件.导航nav

1.bootstrap中的导航组件都依赖同一个.nav类,状态类也是共用的。改变修饰类可以改变样式。

***在标签页上使用导航需要依赖 JavaScript 标签页插件

由于标签页需要控制内容区的展示,因此,你必须使用 标签页组件的 JavaScript 插件。另外还要添加 role 和 ARIA 属性 – 详细信息请参考该插件的 实例

2.标签页

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

<div class="container">

    <ul id="mytab" class="nav nav-tabs “ role="tablist">

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

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

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

    </ul>

胶囊式标签页

HTML 标记相同,但使用 .nav-pills 类:

胶囊式标签导航    改:

<ul id="mytab" class="nav nav-pills" role="tablist">

垂直展示 改:

<ul id="mytab" class="nav  nav-tabs nav-stacked" role="tablist">

 

两端对齐 改:

    <ul id="mytab" class="nav nav-tabs nav-justified" role="tablist">

禁止点击: <li 中类=disabled>

 

*添加下拉菜单

<div class="container">

    <ul id="mytab" class="nav nav-tabs " role="tablist">

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

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

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

        <a href="#" class="dropdown-toggle" data-toggle="dropdown">

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

    </a>

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

    <li role="presentation"> <a href="#" role="menuitem" tabindex="-1"></a> hello1</li>

    <li role="presentation"> <a href="#" role="menuitem" tabindex="-1"></a> hello2</li>

</ul>

    </li>

    </ul>

</div>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="bootstrap.min.js"></script>

<script>//直接当我们点击这个时切换到当前界面

$("#mytab a").click(function(e)

{

e.preventDefault();

$(this).tab("show");

})

</script>

  1. 导航条:navbar

1.默认样式的导航条:依赖 JavaScript 插件如果 JavaScript 被禁用,并且视口(viewport)足够窄,致使导航条折叠起来,导航条将不能被打开,.navbar-collapse 内所包含的内容也将不可见。响应式导航条依赖 collapse 插件,定制 Bootstrap 的话时候必将其包含。

2.导航条的可访问性务必使用 <nav> 元素,或者,如果使用的是通用的 <div> 元素的话,务必为导航条设置 role="navigation" 属性,这样能够让使用辅助设备的用户明确知道这是一个导航区域。

3.

基本实例:

<nav class="navbar navbar-inverse navbar-top" role="navigation">

    <div class="container-fluid">

        <div class="nav-header">

            <a class="navbar-brand" href="#">

            极客</a>

        </div>

        <div class="collapse navbar-collapse">

        <ul class="nav navbar-nav" id="mytab">

    <li class="active"><a href="#">Link</a></li>

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

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

</ul>

4.<!--导航条中搜索框-->

<form class="navbar-form navbar-left" role="search">

    <div class="form-group">

        <input type="text" class="form-control" placeholder="搜索">

    </div>

    <button type="submit"//提交 class="btn btn-default">搜索</button>

</form>

对于不包含在 <form> 中的 <button> 元素,加上 .navbar-btn 后,可以让它在导航条里垂直居中。有一些对于为辅助设备提供可识别标签的方法,例如, aria-labelaria-labelledby 或者 title 属性。如果这些方法都没有,屏幕阅读器将使用 placeholder 属性(如果这个属性存在的话),但是请注意,使用 placeholder 代替其他识别标签的方式是不推荐的

5.下拉菜单组:

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

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

    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span

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

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

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

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

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

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

     </ul>

</li>

</ul>

  1. 应用底部:

<nav class="navbar navbar-inverse//黑色 反色的导航条 navbar-fixed-bottom//底部" role="navigation">

固定在顶部:

通过添加 .navbar-static-top 类即可创建一个与页面等宽度的导航条,它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器,用于将导航条居中对齐并在两侧添加内补(padding)。

  1. mytab样式:<ul class="nav navbar-nav" id="mytab">

<script>

 

$("#mytab a").click(function(e){

    e.preventDefault();

    $(this).tab("show");

})

</script>

9.

<!--路径导航-->

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">

<ol class="breadcrumb">

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

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

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

 

</nav>

 

16.媒体对象media

1.基本实例:这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等)

<div class="media">

<a href="#" class="media-left">

<img src="C:/Users/ASUS/Desktop/5.jpg" alt=""></a>

<div class="media-body">

    <h2 class="media-heading">bootstrap</h2>

    <p> css组件,导航,导航条,JavaScript插件,定制

    css组件,导航,导航条,JavaScript插件,定制

    <br>

css组件,导航,导航条,JavaScript插件,定制

css组件,导航,导航条,JavaScript插件,定制</p>

</div>

</div>

把文本包裹在 .navbar-text中时,为了有正确的行距和颜色,通常使用 <p> 标签。

2.继承关系:

将下一个<div class=”media”>放到</p>以后

3.图片想放在右边:

将<a>标签放在<div class="media-body">结束位置

  1. 图片居中显示:

Media-left/media-middle/midea-bottom

  1. 媒体对象列表:

<div class="container">

    <ul class="media-list">

       <li class="media">

         <a  class="media-left" href="#">

           <img src="C:/Users/ASUS/Desktop/5.jpg"></a>

        <div  class="media-body">

        <h2 class="media-heading">bootstrap</h2>

        <p>

        css组件,导航,导航条,JavaScript插件,定制

        css组件,导航,导航条,JavaScript插件,定制</p>   

    </div>

</li>

再复制<li>标签

 

17.面板panel

1.基本实例:默认的 .panel 组件所做的只是设置基本的边框(border)和内补(padding)来包含内容

<div class="container">

         <div class="panel panle-default">

         <div class="panel panel-danger">

                  <div class="panel-heading">学习的网站</div>

                  <div class="panel-body">

         HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHell

                  </div>

                  <div class="panel-footer panel-danger">www.bootstrap.com</div>

         </div>

带标题的面版

通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title类的 <h1>-<h6> 标签,添加一个预定义样式的标题。不过,<h1>-<h6> 标签的字体大小将被 .panel-heading 的样式所覆盖。

为了给链接设置合适的颜色,务必将链接放到带有 .panel-title 类的标题标签内。把按钮或次要的文本放入 .panel-footer 容器内。注意面版的脚注不会从情境效果中继承颜色,因为他们并不是主要内容

  1. <!--表格的面板-->

为面板中不需要边框的表格添加 .table 类,是整个面板看上去更像是一个整体设计。如果是带有 .panel-body 的面板,我们为表格的上方添加一个边框,看上去有分隔效果。

<div class="panel panle-default">

         <div class="panel-heading"><h2>卜道师列表</h2></div>

         <div class="panel-body">123  </div>

                  <table class="table">

                  <thead><tr class="active">

                                             <th>a</th>

                                             <th>a</th>

                                             <th>a</th>

                                    </tr>

                           </thead>

                           <tbody>

                                    <tr class="success">

                                             <td>123</td>

                                             <td>123</td>

                                             <td>123</td>

                                    </tr>

                                    <tr class="success">

                                             <td>123</td>

                                             <td>123</td>

                                             <td>123</td>

                                    </tr>

                           </tbody>

                  </table>

3.<!--带列表的面板-->

         <div class="panel panle-default">

                  <div class="panel-heading">Hello</div>

                           <div class="panel-body">World!</div>

                  <ul class="list-group">

                           <li class="list-group-item">hello1</li>

                           <li class="list-group-item">hello2   </li></ul>

         </div>

</div>

 

 

  1. Well的应用

1.缩放屏幕比例:

<!--<div  class="container">

         <div class="embed-responsive embed-responsive-16by9">

                  <iframe src=""></iframe>

         </div>

</div>-->

具有响应式特性的嵌入内容

根据被嵌入内容的外部容器的宽度,自动创建一个固定的比例,从而让浏览器自动确定视频或 slideshow 的尺寸,能够在各种设备上缩放。

这些规则被直接应用在 <iframe>、<embed>、<video> 和 <object> 元素上。如果你希望让最终样式与其他属性相匹配,还可以明确地使用一个派生出来的 .embed-responsive-item 类。

超级提示: 不需要为 <iframe> 元素设置 frameborder="0" 属性

 

2.<div class="container">

<div class="well well-lg">well

         </div>

         <div class="well">well

         </div>

         <div class="well well-sm">well

         </div>

  1. 组件.分页page标签label
  1. 基本实例:

<nav>

         <ul class="pagination pagination-lg">

                  <li><a class="disabled" href="#">&laquo;</a></li>//.disabled 类、给当前页添加 .active 类。

                  <li><a class="active" 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="#">&raquo;</a></li>

         </ul>

  1. 尺寸大小:

<ul class="pagination pagination-sm">

3.<!--翻页-->

<nav>

         <ul class="pager">

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

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

         </ul>

</nav>

<nav>

         <ul class="pager">

                  <li><a class="previous" href="#">&larr;上一页</a></li>

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

         </ul>

</nav>

4.<!--标识-->

<span class="label label-danger">默认</span>

<span class="label label-info">默认</span>

<span class="label label-success">默认</span>

<h2> 这是一个关于<span class="label label-success">标识的标签</span></h2>

  1. 徽章badge和巨幕jumbotron

给链接、导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展示新的或未读的信息条目。

Ex:    <a href="#" > message<span class="badge">30</span></a>

    <button class="btn btn-danger" type="button">Message<span class="badge"></span>60</button>

放在列表里

<ul class="nav nav-pills" role="rablist">

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

        <a href="#">Home<span class="badge">10</span></a>

        <li  role="presentation">

        <a href="#">Profile<span class="badge">100</span></a>

    </li>

    </ul>

<!--巨幕jumbotron-->

    <div class="jumbotron"><div class="container">

        <h1>Hello,World!</h1>

        <p>化欢迎来到辽石化欢迎来到辽石化欢迎来到辽石化欢迎来到辽石

            化欢迎来到辽石化欢迎来到辽石化欢迎来到辽石化欢迎来到辽石化欢迎来到辽石化欢迎来到辽石化欢迎来到辽石化欢迎来到辽石化欢迎来到辽石化欢迎来到辽石化欢迎来到辽石化欢迎来到辽石</p>

        <p><a href="#" class="btn btn-danger btn-lg" role="button">Learn More</a></p>

    </div>

  1. 页头page-heading和缩略图

1.页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果,还支持大部分其他组件(需要增加一些额外的样式)。

<div class="page-header">

    <h2>辽石化</h2><small>欢迎您</small>

</div>

2.<!--缩略图-->

<div class="row">

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

                  <div class="thumbnail">//自定义

                           <img src="5.jpg">

                           <div class="caption">

                                    <h2>Hello</h2>

                                    <p>HelloHelloHelloHe

                                    lloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello</p>

                                    <p><a href="#" class="btn btn-default" role="button">好看</a><a href="#" class="btn btn-danger" role="button" >不好看</a></p>

                           </div>

                  </div>

         </div>

</div>

  1. 警告框alert
  1. 基本实例:

将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框,.alert 类是必须要设置的,另外我们还提供了有特殊意义的4个类(例如,.alert-success),代表不同的警告信息。

<div class="container">

         <div class="alert alert-danger" role="alert">Hello大家好

         </div>

                  <div class="alert alert-warning" role="alert">Hello大家好

         </div>

                  <div class="alert alert-info" role="alert">Hello大家好

         </div>      

2.<!--可关闭-->为警告框添加一个可选的 .alert-dismissible 类和一个关闭按钮

         <div class="alert alert-success" role="alert">

                  <button type="button" class="close" data-dismiss="alert">

                           <span aria-disabled="true">&times;</span>

                  </button><strong>Hello</strong>

         </div>

《script》

  1. 进度条progress

1.      <!-- 提示-->

</div>

<div class="progress">

                           <div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">50%//最小最大值当前值

                  </div>

         </div>

 

2.<!--颜色-->

<div class="progress">

                           <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">50%

                  </div>

         </div>

3.<!--纹理-->

<div class="progress">

                           <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">50%

                  </div>

         </div>

  1. <!--动态-->

<div class="progress">

                           <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">50%

                  </div>

         </div>

4.<!--堆叠-->

<div class="progress">

                           <div class="progress-bar"  style="width:50%">50%

                  </div>

                           <div class="progress-bar  progress-bar-success progress-bar-striped" style="width:20%">20%

                  </div>

         </div>

  1. 列表组list-group
  1. 不可点击的

<ul  class="list-group ">

                  <li class="list-group-item ">

                           <span class="badge">100       </span>欢迎您</li>

                  <li class="list-group-item">

                           <span class="badge">100</span>欢迎您</li>

                  <li class="list-group-item">

                           <span class="badge">100</span>欢迎您</li>

                  </ul>

  1. 可点击的

<div class="list-group ">

         <a href="#" class="list-group-item"><span class="badge">100   </span>欢迎您欢迎您</a>

                  <a href="#" class="list-group-item  active">欢迎您欢迎您</a>

                  <a href="#" class="list-group-item disabled">欢迎您欢迎您</a>

                  <a href="#" class="list-group-item list-group-item-danger">欢迎您欢迎您</a>

         </div>

3.<a href="#" class="list-group-item">

                           <h2 class="list-group-item-heading">Hello</h2>

                           <p class="list-group-item-text">12345678945678912345678945612313

312564654454164531213121321133123331251                            

                           </p>

                  </a>

  1. 模态框modal

1.不支持同时打开多个模态框

模态框的 HTML 代码放置的位置

务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的直接子元素),以避免其他组件影响模态框的展现和/或功能。

2.实例:静态实例

<div class="modal" id="mymodal"  tabindex="-1" role="dialog" aria-labelledby="mymodallable" aria-hidden="true">

         <div class="modal-dialog">

                  <div class="modal-content">

                           <div class="modal-header">

                                    <button type="button" class="close" data-dismiss="modal" aria-close="close">//关闭按钮x

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

                                            

                                    </button>

                                    <h3 class="modal-title" id="mymodallable">modallable

                                            

                                    </h3>

                           </div>

                           <div class="modal-body">

                                    connet

                           </div>

                           <div class="modal-footer">

                                    <button class="btn btn-default" type="button" data-dismisss="modal">close

                                            

                                    </button>

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

                                    save

                                    </button>

                           </div>

                  </div>

         </div>

</div>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="bootstrap.min.js"></script>

<script>

         $("#mymodal").modal("show");

</script>

//展示模态框

  1. 动态模态框 launch demo modal
  1. 模态框的大小尺寸:

<button type="button" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">启动大模态框</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1"aria-labellebdy="mylargemodallabel" aria-hidden="true" role="dialog">

<div class="modal-dialog modal-lg">

<div class="modal-content">这是一个大的模态框

</div>

</div>

</div>

<button type="button" class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-sm">启动小模态框

</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" //fade效果aria-labellebdy="mylargemodallabel" aria-hidden="true" role="dialog">

<div class="modal-dialog modal-sm">//尺寸

<div class="modal-content">这是一个小的模态框

</div>

</div>

</div>

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

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

增强模态框的可访问性

务必为 .modal 添加 role="dialog" 和 aria-labelledby="..." 属性,用于指向模态框的标题栏;为 .modal-dialog 添加 aria-hidden="true" 属性。

另外,你还应该通过 aria-describedby 属性为模态框 .modal 添加描述性信息。

 

  1. 禁止动画效果:删除fade就可以。
  2. 模态框的使用:

 

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="examplemodallable" id="examplemodal" //方便调用

aria-hidden="true" >

         <!-- 承载内容 -->

         <div class="modal-dialog">

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

                                    <h2 class="modal-title" id="examplemodallabel">Hello</h2>

                           </div>

                           <div class="modal-body">

                                    <form>//表单

                                             <div class="form-group">

                                                      <label for="recipient-name" class="control-label">Recipient

                                                      </label>//form中表单一定要有

                                                      <input type="text" class="form-control" id="recipient-name">//调用

                                             </div>

                                    </form>

                           </div>

                                    <div class="modal-footer">

                                             <button class="btn btn-info" type="button" data-dismiss="modal">close</button>

//单独关闭按钮:data-dismiss=”modal”

//关闭窗口:class=”close” data-dismiss=”modal”

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

                          

                           </div>

                  </div>

         </div>

</div>

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

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

<script>

         $("#examplemodal").on("show.bs.modal",function(event){

                  var button =$(event.relatedTarget)

                  var recipient=button.data("whatever")

                  var modal=$(this);

                  modal.find(".modal-title").text("Hello "+recipient)

                  modal.find(".modal-body input").val(recipient);

         })

//使用event.relatedTarget和html数据-*属性(可能通过jquery)来更改根据单击哪个按钮来更改模式内容。有关relatedTarget的详细信息,请参阅“模式事件文档”

4. 点击空白处模态框不消失

          $("#mymodal").modal(

           {

                   backdrop:false;

           })

通过 data 属性或 JavaScript 调用模态框插件,可以根据需要动态展示隐藏的内容。模态框弹出时还会为 <body>元素添加 .modal-open 类,从而覆盖页面默认的滚动行为,并且还会自动生成一个 .modal-backdrop 元素用于提供一个可点击的区域,点击此区域就即可关闭模态框。

5.通过data属性

不需写 JavaScript 代码也可激活模态框。通过在一个起控制器作用的元素(例如:按钮)上添加 data-toggle="modal" 属性

keyboard

boolean

true

键盘上的 esc 键被按下时关闭模态框。

show

boolean

true

模态框初始化之后就立即显示出来。

  1. 方法:

.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')

  1. 事件

事件类型

描述

show.bs.modal

show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素

shown.bs.modal

此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发

hide.bs.modal

hide 方法调用之后立即触发该事件。

hidden.bs.modal

此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发。

loaded.bs.modal

远端的数据源加载完数据之后触发该事件

28.下拉菜单:

<div class="dropdown">

    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">下拉菜单

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

    </button>

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

            <li role="presentation"><a  role="menuitem" tabindex="-1" href="#">Hello</a></li>

            <li role="presentation"><a  role="menuitem" tabindex="-1" href="#">Hello</a></li>

            <li role="presentation"><a  role="menuitem" tabindex="-1" href="#">Hello</a></li>

        </ul>

</div>

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

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

<!-- 禁用.data-api -->

 <script>

     $(document).off(".data-api");

</script>

<!-- 只禁用下拉菜单

 $(document).off(".dropdown.data-api");-->

 

 <!-- 事件 -->

<!-- $('#myModal').on('show.bs.modal', function (e) {

  if (!data) return e.preventDefault() // 阻止模态框的展示

}) -->

<!-- 测试版本号 -->

<!-- $.fn.tooltip.Constructor.VERSION // => "3.3.7" -->

29.过渡效果transition:

<style>

         #mydiv{

                  width:100px;

                  background: red;

                  height: 100px;

                  -webkit-transition: width 2s;

                  /*支持浏览器*/

                  transition: width 2s;

/*效果宽度变为原来的多少*/

         }

/*当鼠标滑过时触发过渡效果*/

#mydiv:hover{

width:400px;

}

</style>

<body>

<div id="mydiv">

        

</div>

<script>

        

                  document.getElementById("mydiv").addEventlistener("transitionend",function(e){

                  this.innerHTML ="过渡事件已触发--过度事件已完成"// 读取当前文档流// 添加 事件

 

         })

</script>

  1. 滚动监听scrollspy.js

滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。如下所示,滚动导航条下面的区域并关注导航项的变化.依赖 Bootstrap 的导航组件.

Resolvable ID targets required

Navbar links must have resolvable id targets. For example, a <a href="#home">home</a>must correspond to something in the DOM like <div id="home"></div>.通过data属性调用

 

2.参数

可以通过 data 属性或 JavaScript 传递参数。对于 data 属性,其名称是将参数名附着到 data- 后面组成,例如 data-offset=""。

 

3.事件

事件类型

描述

activate.bs.scrollspy

每当一个新条目被激活后都将由滚动监听插件触发此事件。

<body  data-spy="scroll" data-target=".navbar" data-offset="30">
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">//导航条
<div class="container-fuild">
<div class="collapse navbar-collapse js-navbar-scrollyspy" id="myscrollspy">
</div>
        <ul class="nav navbar-nav">
                <li><a href="#@iwen">@iwen</a></li>
                <li><a href="#@ime">@ime</a></li>
                <li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<b class="caret"></b></a>
        <ul class="dropdown-menu" role="menu">
        <li><a href="#one" tabindex="-1">one</a></li>
        <li><a href="#two" tabindex="-1">two</a></li>
        <li><a href="#three" tabindex="-1">three</a></li>
        </ul>
        </li>
        </ul>
        </div>  
        </nav>
<h2 id="iwen">@iwen</h2>
<p>hfkdghdiugkheuikgzuruiedghkdjzvhiusEnjsdk</p>
<hr>
<h2 id="ime">@ime</h2>
<p>hfkdghdiugkheuikgzuruiedghkdjzvhiusEnjsdk</p>
<hr>
<h2 id="one">one</h2>
<p>hfkdghdiugkheuikgzuruiedghkdjzvhiusEnjsdk</p>
<hr>
<h2 id="two">two</h2>
<p>hfkdghdiugkheuikgzuruiedghkdjzvhiusEnjsdk</p>
<hr>
<h2 id="three">three</h2>
<p>hfkdghdiugkheuikfkdghdiugkheuikgzuruiedgh</p>
<hr>
</div>
<script  src="jquery.min.js"></script>
<script  src="bootstrap.min.js"></script>
<script> // 事件
$("#myscrollspy").on("activate.bs.scrollspy",function(e)
{
alert(hello);
}
</script>

  1. 标签页tab

1.

<body>

 

 

<div class="container">

 

<ul class="nav nav-tabs" id="mytab">

 

<li class="active">

 

<a href="#home" data-toggle="tab">Home</a></li>

 

<li> <a href="#profile" data-toggle="tab">profile</a></li>

 

<li class="dropdown">

 

<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<b class="caret">

 

</b></a>

 

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

 

<li><a href="#one" tabindex="-1" data-toggle="tab">one</a></li>

 

<li><a href="#two" tabindex="-1" data-toggle="tab">two</a></li>

 

<li><a href="#three" tabindex="-1" data-toggle="tab">three</a></li>

 

 

 

</ul>

 

</li>

 

</ul>

 

<div class="tab-content" id="mytabcontent">

   <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="one">...</div>
    <div role="tabpanel" class="tab-pane" id="two">...</div>
    <div role="tabpanel" class="tab-pane" id="three">...</div>
  </div>

 

<script type="text/javascript" src="jquery.min.js"></script>

 

<script type="text/javascript" src="bootstrap.min.js"></script>

 

<script>

 

// $("#mytab a:last").tab("show"); 选择最后一个

 

// $("#mytab li:eq(1)").tab("show"); 选择哪一个 从0开始

 

// 特效fade in active

 

// fade

 

// 事件:

 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

 

alert("hello");

 

})

 

</script>

事件:

hide.bs.tab

show.bs.tab

hidden.bs.tab

shown.bs.tab

 

     

 

  1. 工具提示 tooltip:

1.<body>

<div class="container">

         <p class="muted" style="margin-bottom:0">

                  欢迎来到<a  id="mytooltip" href="#" data-toggle="tooltip" data-placement="bottom" data-original-title="www.********.com">网址</a>极客学院</p>

         <!-- data-original-title="展示内容" -->

         <!-- data-placement 方向 -->

</div>

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

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

<script>

        

   $('[data-toggle="tooltip"]').tooltip();

  // 初始化

  $("#mytooltip").on("hidden.bs.tooltip",function(e){

       alert("hello");

       // 隐藏事件

  })

</script>

35.弹出框 popover.js

1.<div class="container">

    <!-- button点击触发 -->

    <button class="btn btn-default” id=”js-popover” data-placement="bottom" type="button" data-toggle="popover" title="标题" data-content="这里是内容区域" data-trigger="focus">弹出框

    </button>

    <!-- data-placement="bottom" 在底部 -->

可以四个方向

    <!-- data-trigger="focus"点击空白处消失//焦点 -->

</div>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="bootstrap.min.js"></script>

<script>

    // 初始化

$(".js-popover").popover();

$(".js-popover").popover("show");

// 直接展示

$('.js-popover').on('hidden.bs.popover', function () {

 alert("hello");

})

//同样四个事件   消失就弹出

.popover('toggle')

.popover('hide')
.popover('show')
.popover('destroy')

</script>

36.警告框alert

<body>

<div class="container">

         <div class="alert alert-info fade in" id="myalert">

//为了让警告框在关闭时表现出动画效果,请确保为其添加了 .fade 和 .in 类。

                  <!-- button按钮控制点击x消失 -->

                  <button type="button" class="close" data-dismiss="alert" >&times;

                  </button>

                  <strong>Hello</strong>dguskfgieaulgl

         </div>

                  <div class="alert alert-info fade in" id="myalert">

                  <button type="button" class="close" data-dismiss="alert" >&times;</button>

                  <strong>Hello</strong>dguskfgieaulgl

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

                  关闭

         </button>

         </div>

</div>


1.用法

为关闭按钮添加 data-dismiss="alert" 属性就可以使其自动为警告框赋予关闭功能。关闭警告框也就是将其从 DOM 中删除。

2.

事件类型

描述

close.bs.alert

当 close 方法被调用后立即触发此事件。

closed.bs.alert

当警告框被关闭后(也即 CSS 过渡效果完毕之后)立即触发此事件。

$('#myAlert').on('closed.bs.alert', function () {

Alert(Hello);})

  1. 按钮button.Js

1.跨浏览器兼容性

在页面多次加载之间,Firefox 仍然保持表单控件的状态(禁用状态和选择状态)。一个解决办法是设置 autocomplete="off"。参见 Mozilla bug #654072

2.状态

通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态。

3.实例;

<body><div class="container">

         <button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary"> Loading state

</button>

<!-- data-loading-text="Loading..." 等待时显示 -->

<button class="btn btn-info" type="button" data-toggle="button" autocomplete="off" >levnidsnvdgd

         <!--autocomplete="off" 点击两次有不同的状态 -->

</button>

<script>

4.

  $('#myButton').on('click', function (e) {//点击之后触发

    var btn = $(this).button("loading");//点击之后为loading

  setTimeout(function(e){//添加计时器settimeout

     btn.button("reset")//复原状态reset

},3000)//3000毫秒

  })

</script>

5.多选checkbox单选radio

 

<!-- 多选按钮 按钮组 并且用label代替button -->

<div class="btn-group" data-toggle="buttons">

  <label class="btn btn-primary active">

    <input type="checkbox" autocomplete="off" checked> Checkbox 1

  </label>

  <label class="btn btn-primary">

    <input type="checkbox" autocomplete="off"> Checkbox 2

  </label>

  <label class="btn btn-primary">

    <input type="checkbox" autocomplete="off"> Checkbox 3

  </label>

</div>

<!-- 单选框 radio   //name必须一样 -->

<div class="btn-group" data-toggle="buttons">

                           <label class="btn btn-info active">

                  <input type="radio" name="options" autocomplete="off" checked>单选1

         </label>

                  <label class="btn btn-info">

                  <input type="radio" name="options" autocomplete="off">单选2

         </label>

                  <label class="btn btn-info">

                  <input type="radio" name="options" autocomplete="off">单选3

         </label>

         </label>

</div>

6.<!--  data-complete-text="finsh"改变按钮文字为finish-->

<button type="button" data-complete-text="finsh" id="mybutton" class="btn btn-info" autocomplete="off">hello

</button>

<script>

  $("#mybutton").on("click",function(e){

       $(this).button("complete");//点击事件触发函数更改

  })

</script>

  1. 方法:
    $().button('toggle')

$().button('reset')重置按钮状态

$().button(string)

 

  1. collpase.js

1.例子

单击下面的按钮来显示并隐藏其他元素,通过类更改:

.collapse隐藏内容

.collapsing在转换过程中应用

.collapse.in显示内容

您可以使用href属性或按钮,data-target属性。在这两种情况下,data-toggle="collapse"是必需的。

2.<div class="container">

         <a href="#collapseExample" class="btn btn-info" data-toggle="collapse">点击</a>

         <!-- 当点击这个按钮会打开这个内容

id="collapseExample"和href="#collapseExample"跳转

         <div class="collapse" id="collapseExample">

                  <div class="well">

                           Hello

                  </div>

         </div> -->

2.手风琴范例

使展开/折叠控件可访问

一定要添加aria-expanded对控制元素。此属性显式定义了可折叠元素的当前状态,以筛选阅读器和类似的辅助技术。如果默认的折叠元素关闭,则该元素应该具有aria-expanded="false"。如果您已将可折叠元素设置为默认打开,则使用in类,设置aria-expanded="true"而是控制在控制上。该插件将根据是否打开或关闭折叠元素来自动切换此属性。

此外,如果控件元素针对单个可折叠元素-即data-target属性指向id选择器-您可以添加额外的aria-controls属性设置为控件元素,其中包含id可折叠元件。现代屏幕阅读器和类似的辅助技术利用此属性向用户提供更多快捷方式直接导航到可折叠元素本身。

3.实例:panel面板

<div class="panel-group" id="accordion" role="tablist">

         <div class="panel panel-info">

                  <div class="panel-heading" role="tab" id="headingone">

                           <h2 class="panel-title">

         <a data-toggle="collapse" data-parent="#accordion" href="#collapseone">item2</a></h2>

                  </div>

                  <div id="collapseone" class="panel panel-collpase collapse "  role="tabpanel">

                           <div class="panel-body">duslghdaljkvbfdkjslgbnfskjgfk;dghreuirueoagdkfz  </div>

                  </div>      

         </div>

//    {复制....}

         <div class="panel panel-danger">

                  <div panel-heading role="tab" id="headingtwo">

                           <h2 class="panel-title">

                  <a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo">item3</a>

                           </h2>

                  </div>

                  <div id="collapsetwo" class="panel panel-collpase collapse "  role="tabpanel">

                  <div class="panel-body">duslghdaljkvbfdkjslgbnfskjgfk;dghreuirueoagdkfz</div>        

                  </div>

</div>

</div>

</div>

4.方法:

.collapse(options)

激活您的内容作为可折叠元素。接受可选选项object.

$('#myCollapsible').collapse({

  toggle: false})

.collapse('toggle')

切换可折叠元素以显示或隐藏。返回到调用者之前,可折叠元素实际上已显示或隐藏(即在shown.bs.collapse或hidden.bs.collapse事件发生。

.collapse('show')

显示一个可折叠元素。返回调用者之前,已显示的可折叠元素(即在shown.bs.collapse事件发生。

.collapse('hide')

隐藏一个可折叠元素。在已隐藏元素实际上隐藏之前返回调用方(即在hidden.bs.collapse事件发生。

5.事件

<script>

$('#accordion').on('hidden.bs.collapse', function () {

alert(hello);

</script>

  1. carousel.js轮播

 

1.<style>

                  #mycarousel{

                           width:600px;

                  }

         </style>

2.<div class="container" id="mycarousel">

         <div id="carousel-example-generic" class="carousel slide">

                  <ol class="carousel-indicators">

//滚动屏

                           <li data-target="#carousel-example-generic" data-slide-to="0" class="active" >

                           </li>

                           <li data-target="#carousel-example-generic" data-slide-to="1" class="" >

                           </li>

                           <li data-target="#carousel-example-generic" data-slide-to="2" class="" >

                           </li>

//data-slide接受关键字prev或next它改变了相对于它当前位置的滑动位置。或者,使用data-slide-to将原始幻灯片索引传递到旋转木马上data-slide-to="2"将幻灯片位置转换为特定索引开始,从0.开始

                           <!-- 无序列表ol -->

                  </ol>

                  <div class="carousel-inner">

                           <div class="item active">

                                    <img src="1.jpg">

<div class="carousel-caption">

//可选字幕

将标题添加到幻灯片中,方便地使用.carousel-caption元素内的元素.item。只放置在其中任何可选html,并且它将自动地排列和格式化

         <!-- 默认居中 -->

         <h2>保护地球 </h2>

         <p>保护地球 从你我他做起</p>

</div>

         </div>

         <div class="item">

         <img src="2.jpg">

         <div class="carousel-caption">

         <h2>保护地球 </h2>

         <p>保护地球 从你我他做起</p>

</div>

</div>

<div class="item">

<img src="3.jpg">

<div class="carousel-caption">

         <h2>保护地球 </h2>

         <p>保护地球 从你我他做起</p>

</div>

</div>

</div>       <!-- 左右标签 -->

<a  class="left carousel-control" href="#carousel-example-generic" data-slide="prev">

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

         </span>

</a>

<a  class="right carousel-control" href="#carousel-example-generic" data-slide="next">

//控制方向data-slide

         <span class="glyphicon glyphicon-chevron-right"></span>

</a>

         </div>      

</div>

<script type="text/javascript" src="jquery.min.js"></script>

<script type="text/javascript" src="bootstrap.min.js"></script>

<script>

$(".carousel").carousel({

//手动调用旋转木马:

$('.carousel').carousel()

         interval:2000

//2s后自动跳转

})

</script>

3.方法:

.carousel('cycle')

从左到右循环通过旋转木马项目。

.carousel('pause')

停止旋转木马从自行车穿过物品。

.carousel(number)

将旋转木马循环到特定框架(0基础上,类似于数组)。

.carousel('prev')

循环到上一个项目。

.carousel('next')

循环到下一个项目。

  1. 事件

事件类型

描述

n.slide.bs.carousel

此事件立即触发slide实例方法被调用。

n.slid.bs.carousel

当旋转木马完成幻灯片转换时,此事件将被激发。

Ex:

$('#myCarousel').on('slide.bs.carousel', function () {

  // do something…})

  1. 测边栏停靠

<style>

    /*class用.

    id用#*/

        .affixed-element-top.affix{

            top:10px;

    }

            .affixed-element-top.affix-bottom{

            position:relative;

            /*相对停靠*/

        }

            .affixed-element-bottom.affix{

        bottom:10px;

        /*距离底边10*/

        }

            .affixed-element-bottom.affix-bottom{

            position:relative;

        }

    </style>

2.<div class="container">

         <!-- 左边栏 -->

         <div class="col-lg-3">

                  <!-- 栅格系统 -->

                  <ul class="list-group affixed-element-top js-affixed-element-top">

                           <!-- 左边距顶, id -->

                           <li class="list-group-item">Hello</li>

                           <li class="list-group-item">Hello</li>

                           <li class="list-group-item">Hello</li>

                           <li class="list-group-item">Hello</li>

                  </ul>

         </div>

         <div class="col-lg-6 js-content">//中间

<p>*************************************************************************</p><!--右边栏相同-->

<div class=”col-lg-3”>

<ul class=”list-group  affixed-element-bottom   js-affixed-element-bottom” >

Js:

$(function()// 初始化操作

{

$(".js-affixed-element-top").affix({

         offset:{ }

})

$(".js-affixed-element-bottom").affix({

         offset:{

                  bottom:400}

})

})

2017-10-04 14:51:28 W_jin 阅读数 212
Bootstrap(下拉菜单,导航栏,下拉菜单的滚动监听,轮播
1、下拉菜单:

下拉菜单

按钮点击事件:
show.bs.dropdown 在将要显示时立即触发(点击时)
shown.bs.dropdown 在下拉菜单完全显示出来并且等css动画完成之后触发
hide.bs.dropdown 在将要隐藏时,但是还未关闭隐藏时触发(点击时)
hidden.bs.dropdown 在下拉菜单完全隐藏之后并且等css动画完成之后触发

2、导航栏:
-----基本导航标签
① <ul class=’nav’>
<li><a href=’#’>新闻</a><li>
<li><a href=’#’>产品</a><li>
<li><a href=’#’>关于</a><li>
</ul>
② <ul class=’nav nav-tabs’>
<li class=’active’><a href=’#’>首页</a><li> //active首选状态:就是不能点
<li><a href=’#’>新闻</a><li>
<li><a href=’#’>产品</a><li>
<li><a href=’#’>关于</a><li>
</ul>
-----风格
表格式: <ul class=’nav nav-tabs’>
胶囊式: <ul class=’nav  nav-pills’>
垂直式: <ul class=’nav  nav-stacked >
两端对齐式: <ul class=’nav  nav-justified >
//个别可以嵌套使用: 胶囊垂直式:<ul class=’nav  nav-pills nav-stacked’>
-----禁用导航中的项目(不能点)
<li class=’disabled’><a href=’#’>新闻</a><li>

3、导航条 :
1)条
<nav class=’navbar  navbar-default’>我这里专门放条上的东西</nav>
//navbar- 样式很多,常用default,其他的试一试
2)条上的组件
条内部所有组件,用一个容器 .container 包裹
头部: .navbar-header
头部中一般放 logo:.navbar-brand
内容:.nav .navbar-nav
内容中首选:.active
内容中的禁用:.disabled
内容中的正常:不加样式

-----将导航条固定在顶部(下面的内容会自动上移)
<nav class=’navbar navbar-default navbar-fixed-top’>
XXXXX
</nav>
----将导航条固定在底部
<nav class=’navbar navbar-default navbar-fixed-bottom’>
XXXXX
</nav>
-----静态导航(其实就是和页面等宽,去掉了圆角)
<nav class=’navbar navbar-default navbar-static-top>
XXXXX
</nav>
4、下拉菜单的滚动监听插件:
滚动监听:
滚动到响应位置的时候,导航条的条对应位置以高亮来响应
滚动的盒子加属性:
data-offset:默认值为10,固定内容距滚动容器10px以内,就高亮显示对应菜单
data-spy:设置为scroll,将设置滚动容器监听
data-target:设置对应nav的id选择器,绑定监听的唯一菜单(只有一个容器时不设置,多个时就要设置,不然所有都一起响应了)
5、轮播
将几张同等大小的图片,按照顺序依次播放,就是我们经常看见有些网站的首页上的效果
-----骨架

//说明
骨架中的 ol 就是设置小圆点的 active 默认激活哪一个
div中的img就是要轮播的图片
锚点是按照顺序跳到下(上)一张图片
----data 属性
data-slide:接受关键字prev或者next,用来改变图片
data-slide-to:来给轮播底部创建一个原始滑动索引,索引从0开始计数
data-ride=" carousel ":总容器设置这个属性,用户标记轮播在页面加载时动画播放(默认5秒)
----总容器的自定义属性
data-interval:等待时间,默认5000,如果设置为false就不会自动播放
data-pause:暂停的时间,默认鼠标停留在区域内就暂停播放,离开在开始
data-wrap:默认为true,是否循环播放
设置方式: $(‘#myCarousel’).carousel({
interval:1000, //1秒换图
pause:’hover’, //hover时暂停播放
wrap:false, //只播一次
})
一些方法: pause 停止轮播
$(‘btn’).on(‘click’,function(){ //点击按钮后,停止轮播
$(‘#myCarousel’).carousel(‘pause ’)
})
 
cycle 循环各帧
$(‘btn’).on(‘click’,function(){ //点击按钮后,自动播放
$(‘#myCarousel’).carousel(‘cycle’)
})
  
number  轮播到指定图片,从0开始算
$(‘btn’).on(‘click’,function(){ //点击按钮后,轮播到第三张
$(‘#myCarousel’).carousel(2)
})
 
prev 轮播到上一个
$(‘btn’).on(‘click’,function(){ //点击按钮后,轮播到上一个
$(‘#myCarousel’).carousel(‘prev ‘)
})
 
next 轮播到下一个
$(‘btn’).on(‘click’,function(){ //点击按钮后,轮播到下一个
$(‘#myCarousel’).carousel(‘next ‘)
})
----总容器的两个事件
slide.bs.carousel:当调用 slide 实例方式时(刚要执行滑动时)立即触发
slid.bs.carousel:当完成一个幻灯片触发

bootstrap(3)

阅读数 37

css全局样式——栅格系统(1).响应式,移动设备优先,流式(2).把一个容器或整个网页平均分成了12列。(3).Bootstrap的栅格系统,由一个行和多个列构成。(4).栅格系统通过行列的形式来创建网页布局,把具体的数据放入列当中。&gt;####注意:栅格系统,必须放在.container和.container-flu...

博文 来自: weixin_33969116

bootstrap主题样式替换

阅读数 1356

发现了一个好网站:http://bootswatch.com里面有很多主题可以选然后下载对应主题的bootstrap.min.css文件直接进行替换就可以了,然后网站就可以应用新的主题了可以直接看效果,也可以直接复制代码,真的很方便

博文 来自: qq_29204365

自定义bootstrap 的主题色

阅读数 225

基于Bootstrap4.3.1版本:https://getbootstrap.com/docs/4.3/getting-started/introduction/基于react脚手架来进行说明!基础知识,针对bootstrap使用有一定了解的人群,对webpack有一定了解的人群,对react脚手架有了解。一步步来,不要急,一口吞不了象。运行终端:1.cd到一个目录。...

博文 来自: fengsh998

关于Bootstrap主题模板

阅读数 127

无论Bootstrap还是其他衍生的模板大部分都是以英文为内容而设计的,对于中文日文等语种来说都是不适合的,所以要修改一些基本设置。当然也有一些优化好的现成模板,比如日文的可以参考[url=https://github.com/windyakin/Honoka]Honoka[/url],中文也有(但好像是收费的)。以下是常见的需要修改的地方:[b](1)字库及字体大小[/b]...

博文 来自: wayne_ren

DevExpress 使用BootStrap主题

阅读数 147

DevExpress使用BootStrap主题Dev在16.2.4之后的版本中发布了对BootStrap主题的支持。但是采用的方式是剥离开的,也就是说Dev并没有将BootStrap的主题集成进去。在使用往常的方式直接拖拽控件空,其样式并不会显示出来。参照官方的文档,需要进行下一步的处理。第一步使用以下步骤将DevExpressBootstrap控件集成到您的应用程序中:下载并安装...

博文 来自: geliang0021
没有更多推荐了,返回首页