美文网首页
bootstrap(6)

bootstrap(6)

作者: OldSix1987 | 来源:发表于2016-08-27 00:51 被阅读17次

    1输入框组

    • input-group:只能用于文本框<input>,不能用于<select>和<textarea>。
    • input-group-addon:用于在<input>前后添加额外元素,赋给一个<span>元素即可,注意:将input-group-addon和<input>元素包在input-group之中。
    • input-group-lg 和 input-group-sm可以改变输入框组的尺寸。
    • input-group-btn:可以作为额外的元素的按钮,应该是作为<button>的父元素。
    Paste_Image.png Paste_Image.png

    2标签页组

    • nav:标签页的基类
    • nav-tabs:是标签页的样式
    • active:是标签页的状态类(当前样式)
    • nav-pills:胶囊式标签页
    • nav-stacked :胶囊式标签页堆放排列(垂直排列)
    Paste_Image.png Paste_Image.png

    3路径导航

    • breadcrumb 赋给ol、ul可以实现面包屑效果
    • active 赋给当前栏目,当前栏目不加链接
    Paste_Image.png Paste_Image.png

    4缩略图

    • thumbnail:赋给a元素,可以实现缩略图样式
    • caption:可以实现缩略图标题及描述
    Paste_Image.png Paste_Image.png

    5分页

    .pagination:赋给ul元素可以实现分页
    .&laquo:上一页
    .&raquo:下一页
    .disabled:禁用状态
    .active:激活状态
    .pagination-lg:分页大尺寸
    .pagination-sm:分页小尺寸
    .pager:可以实现翻页效果,上一页、下一页效果。

    Paste_Image.png Paste_Image.png

    6导航栏

    • navbar:导航栏的基类,用于<nav>元素
    • navbar-default:导航栏默认样式,用于<nav>元素
    • container:是<nav>的子元素,导航栏内容都放入其中
    • navbar-header:导航栏头部样式
    • navbar-brand:设置品牌图标样式
    • collapse:是折叠导航栏的样式的基类
    • nav-collapse:是折叠导航栏样式
    • nav:是导航栏的链接基类
    • navbar-nav:是导航栏的链接样式
    • navbar-form:导航栏表单,可以使表单元素排在同一行
    • navbar-left 或 navbar-right:组件排列。导航链接、表单,按钮或文本对齐
    • navbar-btn:对于不在<form>中的<button>元素,实现垂直对齐
    • navbar-text:对于导航栏的普通文本有了行距和颜色,通常用于<p>元素
    • navbar-fixed-top:导航栏固定在顶部,用于<nav>元素,需要为<body>设置padding-top:70px
    • navbar-fixed-bottom:导航栏固定在底部,用于<nav>元素,需要为<body>设置padding-bottom:70px
    • navbar-static-top:导航栏静止在顶部,用于<nav>元素,会随着滚动条移动而消失
    • navbar-inverse:可以实现反色导航栏,用于<nav>元素
    Paste_Image.png Paste_Image.png

    相关文章

      网友评论

          本文标题:bootstrap(6)

          本文链接:https://www.haomeiwen.com/subject/snwzsttx.html