bootstrap3 笔记_uncaught in bootstrap version 3 the pagination roo-CSDN博客

本文链接：https://blog.csdn.net/onepunchmen00/article/details/80015843

使用
1.一定要加 <!DOCTYPE html>
2.导入js 导入css

<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

jquery一定要在bootstrap的js前面

3.套用现成的class名

栅格布局
offset-3 代表向右偏移3
超小屏幕手机 (<768px) .col-xs-数字
小屏幕平板 (≥768px) .col-sm-数字
中等屏幕桌面显示器 (≥992px) .col-md-数字
大屏幕大桌面显示器 (≥1200px) .col-lg-数字
offset和pull/push的区别
原理上的区别：
offset是用margin-left实现的所以只能向右偏移 push/pull是通过相对定位实现所以既可以左移也可以右移
表现上的区别：
如果超出了12格 offset会自动换行而pull/push会隐藏掉超出部分

bs模块分类
基础：
标题类 .h1~.h6
突出段落 .lead
按钮

<button type="button" class="btn">默认样式</button>
<button type="button" class="btn disabled">禁止</button>
<button type="button" class="btn active">激活</button>
<button type="button" class="btn btn-block">width100%</button>
<button type="button" class="btn btn-default btn-lg">默认</button>
<button type="button" class="btn btn-primary">首选项</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-link">连接</button>

这里写图片描述

控制大小 btn-lg btn-xs btn-sm

图片
.img-rounded 带圆角的图片
.img-circle 圆形图片
.img-thumbnail 缩略图

文本

<div class="text-primary">aaaaa</div>
<div class="text-muted">aaaaa</div>
<div class="text-success">aaaaa</div>
<div class="text-warning">aaaaa</div>
<div class="text-danger">aaaaa</div>

这里写图片描述

文本对齐
这里写图片描述

关闭图标 .close

小三角 .caret

浮动 pull-left左浮动 pull-right 右浮动
块元素 .content-block

表格
最基本的.table 增加了padding
通过 .table-striped 类可以给之内的每一行增加斑马条纹样式。
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
通过添加 .table-hover 类可以让中的每一行对鼠标悬停状态作出响应。
通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。
响应式表格将任何 .table 元素包裹在 .table-responsive 元素内

组件：
字体图标 .glyphicon

<div>
    <a href="#">
        <span class="glyphicon glyphicon-user"></span> user
        <span class="glyphicon glyphicon-trash"></span> 垃圾
    </a>
</div>

详细图标参考https://v3.bootcss.com/components/

导航：
这里写图片描述

这里写图片描述

表单：
所有设置了 .form-control 类的、和元素都将被默认设置宽度属性为 width: 100%;
输入框：

<div>
    <div>
        <div class="input-group">
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-pencil"></span>
            </span>
            <input type="text" class="form-control">
        </div>
    </div>
</div>

这里写图片描述

下拉菜单：

<ul class="nav navbar-nav">
    <li><a href="#">菜单一</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            菜单二<b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li>子菜单一</li>
            <li class="divider"></li>
            <li>子菜单二</li>
        </ul>
    </li>
    <li><a href="#">菜单三</a></li>
</ul>

这里写图片描述

下拉标题不可点击
标题不可点击

<li role="presentation" class="dropdown-header">Dropdown header</li>

菜单分割线菜单分割线

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

禁选

禁用的菜单项
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Bootstrap(开发中)</a></li>

按钮组

<div class="btn-group" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>

这里写图片描述

垂直排列<div class="btn-group-vertical" role="group" aria-label="web">

按钮工具组

<div class="btn-toolbar" role="toolbar" aria-label="study">
<div class="btn-group" role="group" aria-label="java">
  <button type="button" class="btn btn-default">基础</button>
  <button type="button" class="btn btn-default">中级</button>
  <button type="button" class="btn btn-default">高级</button>
</div>

<div class="btn-group" role="group" aria-label="web">
  <button type="button" class="btn btn-default">Html</button>
  <button type="button" class="btn btn-default">Css</button>
  <button type="button" class="btn btn-default">JS</button>
</div>

<div class="btn-group" role="group" aria-label="framework">
  <button type="button" class="btn btn-default">Hiber</button>
  <button type="button" class="btn btn-default">Struts</button>
  <button type="button" class="btn btn-default">Spring</button>
</div>
</div>

这里写图片描述

按钮下拉菜单

<!-- 按钮下拉菜单 -->
<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        分类 <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li>少儿</li>
        <li>计算机</li>
        <li>社会</li>
    </ul>
</div>
<!-- 
btn-lg/sm/xs
 -->

警告框
这里写图片描述

带关闭按钮的警告框

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  警告提示
</div>

进度条

<div class="progress">
  <div class="progress-bar progress-bar-success"  style="width: 40%">
    40%
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info"   style="width: 20%">
    20%
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning"   style="width: 60%">
    60%
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger"   style="width: 80%">
    80%
  </div>
</div>

这里写图片描述

模态窗

<!-- 
插件名称.js 
bootstrap.js
1 data属性：
2 编程方式
    对象.modal({键:value,键:value,...})
    对象.modal("字符串");

过度效果
模态框：子窗体覆盖 父窗体：
通过data属性来调用
data-toggle="modal" 用于打开modal窗口
data-target="#idName" 打开的目标
modal: 把div元素识别成模态框
fade 当窗口切换，淡入淡出
modal-dialog 对话框
modal-content 内容
modal-header 框内部的头 
close 关闭按钮的样式
data-dismiss="modal" 关闭窗口
modal-body 窗口主要内容
modal-footer 窗口底部区域
-->

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
模态框
</button>
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"> X </button>
                <h4 class="modal-title" id="myModalLabel">
                    标题
                </h4>
            </div>
            <div class="modal-body">
                aaaaaaaaa
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">确认</button>
                <button type="button" class="btn btn-primary">取消</button>
            </div>
        </div>
    </div>
</div>

滚动监听

<!-- 
滚动监听
 -->
<nav id="test" class="navbar navbar-default">
    <div class="container">
        <div>
            <ul class="nav navbar-nav">
                <li><a href="#ios">ios</a></li>
                <li><a href="#php">php</a></li>
                <li><a href="#java">java</a></li>
            </ul>
        </div>
    </div>
</nav>
<!-- 
data-target="#test" 执行滚动监听的目标
data-spy = "scroll" 添加滚动监听
 -->
<div data-target="#test" data-spy="scroll" style="height:200px;overflow:auto;position:relative"> 
    <h4 id="ios">ios</h4>
    <p>
        这是ios的内容这是ios的内容这是ios的内容这是ios的内容这是ios的内容
    </p>
    <h4 id="php">php</h4>
    <p>
        这是php内容
    </p>
    <h4 id="java">java</h4>
    <p>
        这是java内容
    </p>
    <h4 id="java1">java1</h4>
    <p>
        这是java内容
    </p>
    <h4 id="java2">java2</h4>
    <p>
        这是java内容
    </p>
    <h4 id="java3">java3</h4>
    <p>
        这是java内容
    </p>
</div>

选项卡特效

<!-- 
选项卡：
tab-content bs中用来定义选项卡的父级元素
fade 指定透明度 和 渐变效果
fade in 透明度
tab-pane隐藏元素
active 显示元素
 -->
 <ul class="nav nav-tabs">
    <li class="active">
        <a href="#home" data-toggle="tab">aaa</a>
    </li>
    <li>
        <a href="#test" data-toggle="tab">bbbb</a>
    </li>
    <li>
        <a href="#demo" data-toggle="tab">cccc</a>
    </li>
 </ul>
<div class="tab-content">
    <div id="home" class="tab-pane fade in active">
        aaaa
    </div>
    <div id="test" class="tab-pane fade">
        bbbb
    </div>
    <div id="demo" class="tab-pane fade">
        cccc
    </div>
</div>

弹出框

<!-- 
弹出框
data-container 向制定元素添加弹出框
data-toggle =“popover” 制定弹出框执行
data-placement 弹出框的方位 top bottom left right
data-content 弹出框中的内容
data-trigger="focus" 控制弹出框消失
对象.popover();
 -->
<div class="container" style="padding:100px 50px 10px;">
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="弹出框内容" data-trigger="focus">
        弹出框
    </button>
</div>
<script>
    $(function(){
        $("[data-toggle='popover']").popover();
    })
</script>

这里写图片描述

点击后出现的文字

<!-- 
data-loading-text="点击后文字"
 -->
<div id="myButton1">
    <button type="button" class="btn btn-default" data-loading-text="加载...">加载</button>
</div>
<script>
    $(function(){
        $("#myButton1").click(function(){
            $(this).button("loading").delay(1000).queue(function(){});
        })
    })
</script>