Bootstrap之样式风格与下拉菜单
背景颜色 bg-primary
字体颜色 text-primary
文字居中 text-center
按钮 btn btn-primary btn-default默认 btn-link链接
按钮大小 默认md btn btn-lg/sm/xs
输入框大小 input-lg/sm/xs
状态 active/disabled
框 alert alert-primary
面板
面板框架 panel panel-primary
面板标题 panel-heading
面板主体 panel-body
面板脚步 panel-footer
<div class="panel panel-primary center">
<div class="panel-heading">
<h4 class="center">我是面板的标题</h4>
</div>
<div class="panel-body center">
<span class="text-primary center">我是面板的主体</span>
</div>
<!--
按钮默认行内样式display:inline-block
btn-block使其变为块级
-->
<div class="btn btn-primary">我是面板的按钮</div>
<div class="panel-footer center">我是面板的脚部</div>
</div>
表单
form-group
form-control 使label与表单换行对齐
按钮 input button a
btn-group 按钮组 将多个按钮变为一个整体
btn-group-justified 根据父容器的宽度自适应大小 端点对齐(适用于a) 如果是input/button则须给各个元素加个class为btn-group的父级元素
btn-group-vertical 将横向的按钮组改为纵向
大小 btn-group-lg/sm/xs
下拉菜单
属性
data- 用于与js交互的触发器 data-toggle="dropdown"切换
aria- role- 对于特殊人群的应用
aria-haspopup 屏幕阅读器读到此处 提示是否弹出下面菜单
aria-expanded是否展开状态
role 描述当前状态
<!-- 下拉菜单箭头图标caret(默认向下) 不适用于input -->
<a class="btn btn-primary">a按钮<span class="caret"></span></a> <!-- 向上箭头 在父级上加上dropup -->
<!-- 向下箭头 在父级上加上dropdown -->
<div class="group dropup">
<button>按钮<span class="caret"></span></button>
</div>
在下拉菜单的列表类中添加类名dropdown-menu-right使其右浮动 -->
btn-block 与父级同宽
dropdown-header相当于label divider加上分割线
<!-- 在父级类中加上名open使下拉列表显示 -->
<!-- class="dropdown"必须 使菜单列表向下显示
dropup使菜单列表向上显示
--> <div class="dropdown">
<!-- data-target=".dropdown"同时控制一个或多个的行为 -->
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
<!-- data-toggle="dropdown"必须 -->
Dropdown
<span class="caret"></span>
</button>
<!-- 在下拉列表类中添加类名dropdown-menu-right使其右浮动 -->
<!-- btn-block 与父级同宽 -->
<!-- dropdown-header相当于label divider加上分割线 -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<!-- text-center使文字居中 -->
<li role="presentation"><a role="menuitem" tabindex="-1" href="#" class="text-center">Separated link</a></li>
</ul>
</div>
Bootstrap之样式风格与下拉菜单的更多相关文章
- Bootstrap<基础十四> 按钮下拉菜单
使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class=&qu ...
- Bootstrap历练实例:带有下拉菜单的标签和胶囊导航
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 用bootstrap和css3制作按钮式下拉菜单
利用bootstrap框架的字体图标和下拉菜单效果,以及css3的动画效果,可以做出比较优雅的按钮式下拉菜单样式 <style> .myBtnStyle .dropdown-menu sp ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮:内嵌下拉菜单的按钮组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Bootstrap系列 -- 27. 下拉菜单对齐方式
Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在“dropdown-menu”上添加一个“pull-right”或者“dropdown-menu-right ...
- Bootstrap <基础十二>下拉菜单(Dropdowns)
Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...
- 创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Bootstrap是当下流行的前端UI组件库之一.利用Bootstrap,可以很方便的构造美观.统一的页面.把设计师从具体的UI编码中解放出来. Bootstrap提供了不少的前端UI组件.带下拉 ...
- EasyDropDown – 很棒的下拉菜单,含精美主题
EasyDropDown 是一个 jQuery 插件,你可以毫不费力地将简陋的 Select 元素设置为可定制风格的下拉菜单,用于表单或者一般的导航.和著名的下拉插件 Chosen 很像,但是具有自己 ...
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
随机推荐
- 异步方法不能使用ref和out的解决方法
异常处理汇总-后端系列:http://www.cnblogs.com/dunitian/p/4523006.html 应用场景==>后端现在都是用异步方法,那么分页是必不可少的,于是就有了这个问 ...
- 【Win10 应用开发】语音命令与App Service集成
昨天,老周演示了语音命令集成这一高大上功能,今天咱们来点更高级的语音命令. 在昨天的例子中,响应语音命令是需要启动应用程序的,那么如果可以不启动应用程序,就直接在小娜面板上进行交互,是不是会更高大小呢 ...
- 《JS设计模式笔记》 3,观察者模式
<script type="text/javascript"> //挂插着模式又叫发布订阅模式应该是最常用的模式 //1,dom事件就是观察者模式,只要订阅了click ...
- 实践 Neutron 前的两个准备工作 - 每天5分钟玩转 OpenStack(78)
上一节配置了 linux-bridge mechanism driver,本节再做两个准备工作: 1. 检视初始的网络状态.2. 了解 linux bridge 环境中的各种网络设备. 初始网络状态 ...
- 模板引擎Nvelocity实例
前言 最近一直忙于工作,没时间来管理博客,同时电脑也不给力,坏了一阵又一阵,最后还是去给修理了,这不刚一回来迫不及待的就写一篇文章来满足两个月未写博客的紧迫感. Nvelocity 关于nveloci ...
- 借助node实战WebSocket
一.WebSocket概述 WebSocket协议,是建立在TCP协议上的,而非HTTP协议. 如下: ws://127.0.0.1或wss://127.0.0.1就是WebSocket请求. 注:w ...
- Visual Studio 2015 开发 ASP.NET 5 有何变化?
本篇博文目录: ASP.NET 5 模版 ASP.NET 5 目录结构 前端管理工具 无编译开发 Microsoft Git Provider 智能感知和错误信息 Smart Unit Testing ...
- Oracle并行添加主键的方法
环境:Oracle 11.2.0.3 需求:生产一张表由于前期设计不当,没有主键.现需要添加主键,数据量很大,想并行建立. 1.直接添加,提示ora-3001:未实施的功能;只能单线程建立主键 S ...
- 分享一下刚刚HP电话面试。。。。。。。。我估计我挂了,不过还是要来分享一下
面试官是个中国人,给我是全英文面试,总之是做HP的外包业务,说得很好的工作环境,里面都是一些老外在工作. 首先是要用英文介绍了下自己,我自己觉得自己也还是不错的吧,然后就说了一通(其实我好久没说英文了 ...
- 开始编写CSS
本文由大漠根据Krasimir Tsonev的<Starting to Write CSS>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此译文, ...