码迷，mamicode.com
首页 > Web开发 > 详细

CSS组件

时间：2016-06-21 23:56:55      阅读：546      评论：0      收藏：0      [点我收藏+]

标签：

下拉菜单

  • .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-group把input和input-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组件

标签：

原文地址：http://www.cnblogs.com/black-humor/p/5605245.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！