bootstrap笔记

来源：互联网发布：模板建站系统源码编辑：程序博客网时间：2024/05/08 14:33

nav 做导航要声明的标签
navbar-fixed-top   让导航栏固定在顶部

navbar-inverse    设置默认颜色   默认黑色

navbar    导航类

data-target="#navbar" 当屏幕尺寸小于某个程度时会出现按钮当点击这个按钮的时候就出现消失了的类通过ID选择器来连接

navbar-toggle    设置当屏幕尺寸小于某个程度的时候才出现按钮并设置了样式

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="id">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>   // 设置当屏幕尺寸小于某个程度时出现按钮并设置按钮的样式为三个杠

navbar-brand   设置LOGO字的样式
navbar-collapse（隐藏） collapse（显示）设置当屏幕尺寸小于某个程度时影藏大于某个程度时显示要一起使用

navbar-right   设置在导航栏的右边

placeholder="名字"   设置input标签的默认值

先给form设置navbar-form 类在给input套个div设置form-group类就可以使input在一排
form-control   设置标签的样式
btn-success    设置按钮的颜色
jumbotron      设置内容区的颜色为灰色并且有初始的宽度和高度   宽度为整个屏幕的宽度
btn-default    按钮灰色
btn-success    绿色
btn-primary   蓝色
btn-lg        大按钮
info          天蓝色
warning       黄色
»     》
----------------------------------------------------------------------------------------------------------------
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">点击显示模态框</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">佚站互联</h4>
            </div>
            <div class="modal-body"> 佚站互联-杭州网站建设专家 </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确认</button> </div>
        </div>
    </div>
</div>

-------------------------------------------------------------------------------------------------------------------

0 0