好好好好好

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。

progress：进度条

div ：dropdown

button: dropdown-toggle

ul: dropdownmenu

li

table-condensed：表格紧凑风格

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

背景色用bg来调节

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>

圆角图片：img-rounded

圆形：img-circle

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

<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的效果也是可以的！

移动端前端面试问题之一

mark

del

ins

strong