为了账号安全,请及时绑定邮箱和手机立即绑定

前端Bootstrap笔记(二)

2016.12.09 12:07 3218浏览

一.按钮式下拉菜单的使用
<!-- 使用一个名为dropdown的容器包裹整个下拉菜单元素 -->
<!-- dropdown按钮的方向是向下的,dropup按钮的方向向上 -->
<div class="dropdown">
<!-- 使用了一个<button>按钮做为父菜单,并且定义类名dropdown-toggle和自定义data-toggle属性,且值必须和最外容器类名一致 -->
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单的名字
<span class="caret"></span>
</button>
<!-- 下拉菜单项使用一个ul列表,并且定义类名为dropdown-menu,Bootstrap框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在dropdown-menu上添加一个dropdown-menu-right类名,右对齐是dropdown-menu-left -->
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
<!-- 为了让下拉菜单分组更明显,还可以给每个组添加一个头部(标题) -->
<li role="presentation" class="dropdown-header">第一部分菜单头部</li>
<!-- 下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus),设置该项为当前状态,在li标签里面加上类名.active -->
<li role="presentation" class="active"><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>
<!-- 下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的<li>,并且给这个<li>添加类名“divider”来实现添加下拉分隔线的功能 -->
<li role="presentation" class="divider"></li>
<!-- 设置该项为当前状态,在li标签里面加上类名.disable -->
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
<!-- 下拉菜单原理分析
.dropdown-menu {
position: absolute;/设置绝对定位,相对于父元素div.dropdown/
top: 100%;/让下拉菜单项在父菜单项底部,如果父元素不设置相对定位,该元素相对于body元素/
left: 0;
z-index: 1000;/让下拉菜单项不被其他元素遮盖住/
display: none;/默认隐藏下拉菜单项/
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
} -->

二.按钮组的使用
<!-- 除了第一个和最后一个具有边上的圆角之外,其他的按钮没有圆角 -->
<div class="btn-group">
<!-- 使用一个名为“btn-group”的容器,把多个按钮放到这个容器中 -->
<!-- 除了可以使用<button>元素之外,还可以使用其他标签元素,比如<a>标签。唯一要保证的是:不管使用什么标签,.btn-group容器里的标签元素需要带有类名.btn -->
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>

三.按钮工具栏
<!-- 在富文本编辑器中,将按钮组分组排列在一起,比如说复制、剪切和粘贴一组;左对齐、中间对齐、右对齐和两端对齐一组 -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>

四.按钮嵌套分组
<!-- 把下拉菜单和普通的按钮组排列在一起,实现类似于导航菜单的效果 -->
<!-- 默认按钮组是水平显示的,如果垂直显示的,把最外边的btn-group改为btn-group-vertical即可 -->
<div class="btn-group">
<button class="btn btn-default" type="button">首页</button>
<button class="btn btn-default" type="button">产品展示</button>
<button class="btn btn-default" type="button">案例分析</button>
<button class="btn btn-default" type="button">联系我们</button>
<!-- 使用的时候,只需要把当初制作下拉菜单的dropdown的容器换成btn-group,并且和普通的按钮放在同一级,在外面加上一个div的按钮组类包裹起来,在一个下拉列表 -->
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="##">公司简介</a></li>
<li><a href="##">企业文化</a></li>
<li><a href="##">组织结构</a></li>
<li><a href="##">客服服务</a></li>
</ul>
</div>
</div>

五.等分按钮,自适应分组按钮,也即是说按钮大小会随着屏幕大小而改变
<div class="btn-wrap">
<!-- 需要在按钮组btn-group上追加一个btn-group-justified类名 -->
<div class="btn-group btn-group-justified">
<a class="btn btn-default" href="#">首页</a>
<a class="btn btn-default" href="#">产品展示</a>
<a class="btn btn-default" href="#">案例分析</a>
<a class="btn btn-default" href="#">联系我们</a>
</div>
</div>

六.导航的基础样式
<!-- Bootstrap框架中制作导航条主要通过.nav样式。默认的.nav样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如nav-tabs、nav-pills之类 -->
普通的标签页导航
<ul class="nav nav-tabs" role="tablist">
<!-- 设置当前项,可以加一个在li标签里面加上一个active类名 -->
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
胶囊式标签页导航
<ul class="nav nav-pills" role="tablist">
<!-- 上面这样写是水平导航,如果想垂直导航,需要在外面的ul里面nav-pills后面加上nav-stacked -->
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li class="nav-divider"></li><!-- 分割线 -->
<li role="presentation" class="disabled"><a href="#">Messages</a></li>
</ul>
面包屑式导航
<!-- 可以用来告诉用户当前页面所处的位置,低版本的IE不支持这个 -->
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">我的书</a></li>
<li class="active">《图解CSS3》</li>
</ol>
自适应导航
<!-- 菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。 -->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
导航加下拉菜单(二级导航)
<ul class="nav nav-pills">
<li class="active"><a href="##">首页</a></li>
<!-- 需要将li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul -->
<li class="dropdown">
<a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
</li>
<li><a href="##">关于我们</a></li>
</ul>

七.导航条
<!-- 整个导航条的内容要放在一个nav或者div的容器里面,并使用类名navbar -->
<!-- 添加 .navbar-fixed-top 类可以让导航条固定在顶部,还可包含一个 .container 或 .container-fluid 容器,(但此时应注意给body加上上下padding的值,便于右顶部导航条和底部导航条设置时,导航条不会遮住页面的内容)从而让导航条居中,并在两侧添加内部(padding),导航条默认的颜色是淡灰色,如果想要黑色的,只需要加上类名.navbar-inverse -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 图标logo和导航切换键更好的适应手机小屏幕 -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<!-- 下面这行代码是适合盲人使用屏幕阅读器使用的 -->
<span class="sr-only">导航切换</span>
<!-- 下面是一个显示为三行的收纳小图标 -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand也可以是一张logo图片,使用时只需要在a标签里面嵌套一个img标签即可 -->
<!-- 放在navbar-header里面,确保无论是屏宽还是窄屏,Brand都显示 -->
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- 屏幕宽度小于768px时,div.navbar-responsive-collapse容器里的内容都会隐藏,显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 -->
<!-- 导航上面的子链接 -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- 下面就是导航栏上的内容,放在一个列表里面,ul标签用navbar-nav类名 -->
<ul class="nav navbar-nav">
li里面的链接数量
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<!-- 下面是一个搜索框组件 -->
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<!-- 下面又是一个页面右边的导航菜单 -->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

八.分页导航
1.带页码的分页导航
<!-- 可以通过加上类名pagination-lg(变大),pagination-sm(变小) -->
<ul class="pagination">
<li><a href="#">«第一页</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li class="active"><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li class="disabled"><a href="#">最后一页»</a></li>
</ul>
2.翻页导航
<nav>
<ul class="pager"><!-- ←代表左右箭头 -->
<!-- 如果不给li标签加上类名.previous和.next,则翻页导航默认居中显示,加上这两个类名后,一个居左,一个居右 -->
<li class="previous"><a href="#">←上一页</a></li>
<li class="next"><a href="#">下一页→</a></li>
</ul>
</nav>

九.标签和徽章
适合告诉用户一些额外的信息
<h3>标签演示<span class="label label-default">New</span></h3>
各个标签的颜色不一样
<span class="label label-default">默认标签,深灰色</span>
<span class="label label-primary">主要标签,深蓝色</span>
<span class="label label-success">成功标签,绿色</span>
<span class="label label-info">信息标签,浅蓝色</span>
<span class="label label-warning">警告标签,橙色</span>
<span class="label label-danger">错误标签,深红色</span>

给链接、导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展示新的或未读的信息条目
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>

十.缩略图
<!-- 缩略图的默认设计仅需最少的标签就能展示带链接的图片,还可以让缩略图配合标题、描述内容,按钮等 -->
<div class="row">
<div class="col-sm-6 col-md-4">
<!-- 增加一个thumbnail类名 -->
<div class="thumbnail">
<img data-class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="holder.js/300x300" alt="...">
<!-- 在caption容器里面放置其他内容 -->
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>

十一.警示框
<!-- 警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息 -->
1.默认警示框
<!-- 成功警示框:告诉用用户操作成功,在“alert”样式基础上追加“alert-success”样式,具体呈现的是背景、边框和文本都是绿色 -->
<div class="alert alert-success" role="alert">...</div>
<!-- 信息警示框:给用户提供提示信息,在“alert”样式基础上追加“alert-info”样式,具体呈现的是背景、边框和文本都是浅蓝色 -->
<div class="alert alert-info" role="alert">...</div>
<!-- 警告警示框:提示用户小心操作(提供警告信息),在“alert”样式基础上追加“alert-warning”样式,具体呈现的是背景、边框、文本都是浅黄色 -->
<div class="alert alert-warning" role="alert">...</div>
<!-- 错误警示框:提示用户操作错误,在“alert”样式基础上追加“alert-danger”样式,具体呈现的是背景、边框和文本都是浅红色 -->
<div class="alert alert-danger" role="alert">...</div>
2.可关闭的警告框
<!-- 1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式 -->
<div class="alert alert-warning alert-dismissible" role="alert">
<!-- 2、在button标签中加入class="close"类,实现警示框关闭按钮的样式 -->
<!-- 3、要确保关闭按钮元素上设置了自定义属性:“data-dismiss="alert"”(因为可关闭警示框需要借助于Javascript来检测该属性,从而控制警示框的关闭) -->
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<!-- 警告框中的内容 -->
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
3.警告框中的链接
<div class="alert alert-success" role="alert">
<!-- 加上一个alert-link的类名,有链接的内容放在a标签里面 -->
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

3人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消