bootstrap --Jetstrap
官网地址：http://getbootstrap.com
中文地址：www.bootcss.com

图片：

圆角 .img-rounded

圆形 .img-circle

带有边框的圆角图形  .img-thumbnail

div ：dropdown

button: dropdown-toggle

ul: dropdownmenu

li

form-inline ：表单元素一行显示

input-lg：输入框更大

inout-sm：输入框更小

bootstrap4.0写法
<div >

    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">弹窗</button>

</div>

<div class="modal fade" id="myModal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title " id="myModalLabel">标题</h4>

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

                    <span>&times;</span><span class="sr-only justify-content-center">关闭弹窗</span>

                </button>

            </div>

            <div class="modal-body">慕课网</div>

            <div class="modal-footer">

                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>

                <button type="button" class="btn btn-primary">保存</button>

            </div>

        </div>

    </div>

</div>
<button class="btn btn-danger btn-lg " data-toggle="modal" data-target="#danger">
    这是测试按钮
</button>
<div  id="danger">
    这是内容
</div>

Bootstrap4.0写法
<nav>
    <ul class="pagination justify-content-center">
        <li class="page-item ">
            <a class="page-link" href="#">
                向左
            </a>
        </li>
        <li class="page-item ">
            <a class="page-link" href="#">
                向右
            </a>
        </li>
    </ul>
    <ul class="pagination">
        <li class="page-item active">
            <a  href="#" class="page-link" >1</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">2</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">3</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">4</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">5</a>
        </li>
    </ul>
</nav>
4.0之后使用justify-content来调节位置

Bootstrap4.0写法

<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" href="http://www.imooc.com">慕课网</a></li>
    <li class="nav-item"><a class="nav-link" href="http://www.imooc.com">慕课网</a></li>
    <li class="nav-item"><a class="nav-link" href="http://www.imooc.com">慕课网</a></li>
</ul>
<ul class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="http://www.imooc.com">慕课网</a></li>
    <li class="nav-item"><a class="nav-link" href="http://www.imooc.com">慕课网</a></li>
    <li class="nav-item"><a class="nav-link" href="http://www.imooc.com">慕课网</a></li>
</ul>
<ul class="nav nav-pills flex-column">
    <li class="nav-item"><a class="nav-link active" href="http://www.imooc.com">慕课网</a></li>
    <li class="nav-item"><a class="nav-link" href="http://www.imooc.com">慕课网</a></li>
    <li class="nav-item"><a class="nav-link" href="http://www.imooc.com">慕课网</a></li>
</ul>

Bootstrap4.0写法
<div class="input-group">
    <span class="input-group-text" >$</span>
    <input type="text" class="form-control" >
</div>

<button class="btn btn-default">这是一个按钮</button>

btn-default按钮圆角

改变按钮颜色的类名：btn-success,btn-primary,btn-info,btn-warning,btn-danger

改变按钮字体颜色:btn-link（链接效果）

改变按钮大小：btn-lg,btn-sm

按下按钮的状态效果:在类名里面加入active 

按钮变为全屏大小，就是宽度是全屏的，：btn-block

禁用按钮状态:disabled="disabled"

然后在a标签的类名里面加入btn的效果也是可以的！

插件引用：

1、bootstrap插件依赖bootstrap.js

2、bootstrap.js基于jQuery（引用jQuery之后才能引入bootstrap.js，注意先后顺序不能搞反）

注意：不同版本的bootstrap.js依赖的jQuery版本不一样

data属性：

1、通过data属性控制页面交互

2、$(document).off('.data-api')解除属性绑定

data-target="" 指定相应内容的位置

data-toggle=""绑定方法

data-dismiss=""关闭方法

列表组组件

列表--------list-group list-group-item active   选中 disabled  禁用 badge   状态数（例如点赞的人数）

分页：

1、.pagination在父元素中添加表示分页

2、.pager放置在翻页区域

3、.previous把链接向左对其，.next把链接向右对齐

input控件组.input-group <div class="input-group"> <span class="input-group-addon">放置额外的内容及图标</span> <input type="text" class="form-control "> </div> 按钮控件组 <div class="btn-group"> <button class="btn btn-default"></button> </div>

form->form-inline 它的所有元素是内联的，向左对齐的，标签是并排的,水平排版 div->form-group  将label和input(或其他)组合成一个组件 input->input-lg/sm 改变输入框大小 html5特性: placeholder 给用户输入一个提示 input->form-control 圆角方框发光 label->sr-only  取消提示信息 label-> control-label 可更改相关样。

bootstrap中的表达：

bootstrap给HTML大部分表单都设置了默认样式，我们可以给表单添加相应类名，以实现表单的水平排列，个性化定制等。

<form class="form-inline">

    <div class="form-group">

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

    </div>

     <div class="form-group">

        <select class="form-control"></select>

       </div>

     <div class="form-group">

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

     </div>

</form>

jsp中input-lg、input-sm类不明显或不起作用

给类名form-group的div添加类has-error等类，并给label标签添加control-label类名后，jsp不起作用

Bootstrap中的表格： .table-bordered 带边框 .table-striped 条纹 .table-hover 悬停变色 .table-condensed 紧凑 .danger 红色 .warning 黄色 .info 蓝色 .success 绿色 .active 悬停时颜色