CSS组件

Posted 黑默

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS组件相关的知识,希望对你有一定的参考价值。

下拉菜单

  • .dropdown:将下拉菜单触发器和下拉菜单包含在其中
  • .dropdown-menu:给<ul>制定下拉菜单的样式
  • .dropup:向上弹出菜单
  • .dropdown-menu-left  .dropdown-menu-right:菜单对齐方式
  • Data-toggle属性:下拉菜单触发器,取值“dropdown”
  • .divider:为下拉菜单添加分割线,用于将多个链接分组(增加一个空li,并加类)
  • .disabled:禁用的菜单选项。
    •  <div class="container dropdown" style="margin-bottom: 50px"> // 父元素用.dropdown的类

       <button  type="button" class="btn btn-warning" data-toggle="dropdown">字体 

    • <span class="caret"></span></button>  //给按钮添加触发器,取值“dropdown”,字体后面添加三角符号

    • <ul class="dropdown-menu"> // 使触发器和Ul相关联,并给它制定样式。

                 <li><a href="#">宋体</a></li>

                 <li><a href="#">黑体</a></li>

                 <li><a href="#">楷体</a></li>

             </ul>

      </div>


        • 按钮组

          • .btn-group:给父元素用的。将按钮包住。不加按钮 为分开,加了为合并。
          • .btn-toolbar:将多个按钮组包住,再建个大DIV 加类样式。
          • 按钮尺寸:.btn-group-lg  (sm  xs);
          • .btn-group-vertical:垂直排列的按钮组。

 


 

          

输入框组

  • .input-group:只能用于文本框<input>,不能用于<select><textarea>
  • .input-group-addon:input标记前后添加,用在<span标记内>
  • Input-groupinputinput-group-addon包围
  • .input-group-lg.input-group-sm控制输入框组的尺寸

 


标签页(选项卡)

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

注意 .nav-tabs 类依赖 .nav 基类。


路径导航

 

  • .breadcrumb :赋给<ol>或者<ul>加的类
  • .active 给当前栏目,不加链接

缩略图

  • .thumbnail  :赋给<a>元素,实现缩略图样式
  • .caption 实现缩略图标题及描述

  • 分页

    • .pagination赋给<ul>元素可以实现分页效果
    • &laquo;上一页 &raquo 下一页
    • .disabled 禁用状态
    • .active 激活状态 <li>
    • .pagination-lg :分页尺寸大
    • .pagination-sm :分页尺寸小
    • .page 翻页效果

 

导航栏

用于nav标记的类

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

      1,给nav加类样式(基类,导航栏默认样式,顶端固定)用(1,2,14,19)

      <nav class="navbar navbar-default navbar-inverse navbar-fixed-top">

      2,导航栏内容放入DIV中,所用类样式:container  用(3)

      <div class="container">

      3,写导航栏的头部样式并加入品牌LOGO。用(4,5)

      <div class="navbar-header">

      <a class="navbar-brand" href="#">Book</a>

      <p class="navbar-text">欢迎光临!</p>

      </div>

      4,加导航条链接,用折叠导航样式基及基类()

      <div class="collapse navbar-collapse">  //(6,7)

      <ul class="nav navbar-nav navbar-left">//(8,9)

      <li class="active"><a href="#">看电影</a></li>

      <li><a href="#">看小说</a></li>

      <li><a href="#">看图片</a></li>

      <li><a href="#">听音乐</a></li>

      <li><a href="#">玩游戏</a></li>

      </ul>

      5,引入搜索框,给form加类样式排成一列 并对齐(10,11)

      加入表单组样式

       

      <form class="navbar-form navbar-left">

      <div class="form-group">

      <input type="text" placeholder="Search" class="form-conrol">

      </div>

      <button type="button" class="btn btn-danger"> Search</button>

      </form>

 

以上是关于CSS组件的主要内容,如果未能解决你的问题,请参考以下文章

Bootstrap入门组件4:按钮组与下拉菜单结合

悬停时的 TailWind CSS 下拉菜单

React-Bootstrap 的下拉菜单组件上的自定义样式

html+css下拉菜单怎么制作

vue+css动画实现下拉菜单上、下箭头切换

求助,css下拉菜单怎么设置能默认显示第一条