前端框架之bootstrap
2017-08-12 21:23
453 查看
一、bootstrap按钮
1、按钮
<button class="btn btn-default">按钮</button> <button class="btn btn-primary">button按钮</button> <button class="btn btn-info">按钮</button> <button class="btn btn-success">按钮</button> <button class="btn btn-warning">按钮</button> <button class="btn btn-danger">按钮</button> <a class="btn btn-danger" href="#">a标签按钮</a>
2、按钮组
<div class="btn-group"> <button class="btn btn-default">button按钮</button> <button class="btn btn-primary">button按钮</button> <button class="btn btn-info">button按钮</button> <button class="btn btn-success">button按钮</button> <button class="btn btn-warning">button按钮</button> <button class="btn btn-danger">button按钮</button> </div>
3、通栏按钮
<button class="btn btn-success btn-block">通栏按钮</button>
4、通栏按钮组
a、通栏按钮组,如果用input标签或者button标签,需要将它用btn-group的容器包起来。b、如果用a标签做按钮,就不用上面的结果,直接写
二、 bootstrap表单
1、表单
<form class="form"> <div class="form-group"> <label for="username">用户名:</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" class="form-control"> </div> </form>
2、内联表单
为<form>元素添加
.form-inline类可使其内容左对齐并且表现为
inline-block级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
可能需要手动设置宽度、一定要添加 label
标签(如果不想让其显示,可以通过为 label
设置 .sr-only
类将其隐藏。)
3、水平排列的表单
通过为表单添加.form-horizontal类,并联合使用 Bootstrap 预置的栅格类,可以将
label标签和控件组水平并排布局。这样做将改变
.form-group的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加
.row了。
4、表单控件组
三、bootstrap图片
1、响应式图片:img-responsive
通过给图片添加.img-responsive类可以让图片支持响应式布局。其实质上是为图片设置了max-width:100%;和height:auto;属性,从而让图片在其父元素中更好的缩放。
2、图片形状
通过为<img>元素添加以下相应的类,可以让图片呈现不同的形状跨浏览器兼容性请时刻牢记:IE8不支持CSS3中的圆角属性。四、bootstrap字体图标
通过字体代替图标,font文件夹需要和css文件夹在同一目录<button class="btn btn-danger"><span class="glyphicon glyphicon-music"></span>音乐</button>
五、bootstrap导航条
1、声明导航条:navbar2、声明默认的导航条:navbar-default
3、声明反白的的导航条样式 navbar-inverse
4、去掉导航条的圆角: navbar-static-top
5、固定到顶部的导航条:navbar-fixed-top
6、固定到底部的导航条:navbar-fixed-bottom
7、申明logo容器:navbar-header
8、针对logo等固定内容的样式:navbar-brand
9、定义导航条中的菜单:nav navbar-nav
10、定义导航条中的表单:navbar-form
<div class="navbar navbar-default navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <div class="navbar-toggle" data-toggle="collapse" data-target="#togglemenu"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </div> <a href="" class="navbar-brand"> LOGO </a> </div> <div class="collapse navbar-collapse" > <ul class="nav navbar-nav"> <li><a href="javascript:void(0);">首页</a></li> <li><a href="javascript:void(0);">公司新闻</a></li> <li><a href="javascript:void(0);">行业动态</a></li> <li><a href="javascript:void(0);">招贤纳才</a></li> <li><a href="javascript:void(0);">关于我们</a></li> </ul> <form class="navbar-form navbar-right"> <div class="form-group"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div> </div> </form> </div> </div> </div>
路径导航
<ol class="breadcrumb"> <li><a href="#">首页</a></li> <li><a href="#">新闻动态</a></li> <li class="active">新闻详情</li> </ol>
巨幕(类似于banner图)jumbotron
六、bootstrap模态框
1、声明一个模态框:modal2、定义模态块的尺寸:modal-dialog
3、定义大尺寸的模态框:modal-lg
4、定义小尺寸的模态框:modal-sm
5、modal-header
6、modal-body
7、modal-footer
<button class="btn btn-danger" data-toggle="modal" data-target="#modal1">大模态框</button>
<div class="modal" > <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Close</span> </button> 提示 </div> <div class="modal-body"> <p>姓名不能为空</p> </div> <div class="modal-footer"> <button class="btn">确定</button> <button class="btn btn-warning " data-dismiss="modal">取消</button> </div> </div> </div> </div>
七、bootstrap下拉菜单
用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。
<div class="dropdown"> <div class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 请选择城市 <span class="caret"></span> </div> <ul class="dropdown-menu"> <li><a href="javascript:void(0);">北京</a></li> <li><a href="javascript:void(0);">上海</a></li> <li><a href="javascript:void(0);">杭州</a></li> </ul> </div>
八、bootstrap隐藏类
1、hidden-xs2、hidden-sm
3、hidden-md
4、hidden-lg
详细内容请见官网文档:http://v3.bootcss.com/
相关文章推荐
- 【0030】bootstrap前端框架使用教程
- Bootstrap响应式前端框架笔记十——导航栏相关组件
- Bootstrap——优秀的开源前端框架
- 学习前端框架Bootstrap
- 前端框架Bootstrap的使用
- 前端框架Bootstrap的使用
- 响应式前端框架Bootstrap系列(17)滚动监听(Scrollspy)插件
- 一个非常优秀的前端框架--BootStrap
- 前端开发框架Bootstrap和KnockoutJS
- 前端开发框架Bootstrap和Knockout.js
- metro ui,跟bootstrap差不多,一个很不错的前端框架,
- 【前端框架之Bootstrap 02】布局与导航
- Bootstrap响应式前端框架笔记七——下拉菜单
- 引用bootstrap前端框架的table样式类class="table-striped"后,如何点击tr改变背景色?
- 在线Bootstrap(前端框架)编辑器
- LESS CSS 框架简介////Bootstrap 简洁、直观、强悍的前端开发框架,
- 前端框架Bootstrap的使用
- 前端框架Bootstrap的使用
- 响应式前端框架Bootstrap系列(14)列表组
- bootstrap( web 前端框架 )