Bootstrap学习手册
来源：互联网 发布：通话声音分析软件 编辑：程序博客网 时间：2024/06/08 08:53
bootstrap 笔记1.css样式 1）栅格系统 2）排版 3）代码 4）表格 5）表单 6）按钮 7）图片 8）辅助类 9）响应式工具2.css组件 1）glyphicons图标 2）下拉菜单 3）按钮组 4）输入框组 5）导航 6）导航条 7）路径导航 8）分页 9）标签 10）徽章 11）巨幕 12）页头 13）缩略图 14）警告框 15）进度条 16）媒体对象 17）列表组 18）面板 19）响应式嵌入内容 20）well3.js插件 1）模态框 2）下拉菜单 3）滚动监听 4）标签页 5）工具提示 6）弹出框 7）警告框 8）按钮 9）折叠效果 10）幻灯片效果 11）固定侧面栏------------------------------------------------1.bootstrap安装2.bootstrap全局CSS样式3.bootstrap CSS组件4.bootstrap javascript插件bootstrap安装:<link rel="stylesheet" href="bs/css/bootstrap.css"><script src="bs/js/jquery.min.js"></script><script src="bs/js/bootstrap.js"></script>html5文档类型:<!doctype html>移动端设备的真实宽度:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">布局容器:.container栅格系统:.row 一行12列.col-md-4 占3列的宽排版:1.标题(.page-header)//标题样式2.段落(.lead)//加粗3.mark标记 <mark></mark>4.del删除线 <del></del>5.small小号字体 <small></small>6.文本对齐 .text-right .text-left .text-center7.文本大小写 .text-lowercase ：小写 .text-uppercase ：大写 .text-capitalize：首字母大写8.无样式列表 .list-unstyled(去除列表前面的序号和点点)9.内联列表10.自定义列表 <dl> <dt>选择题:</dt> <dd>A: linux</dd> <dd>A: linux</dd> <dd>A: linux</dd> <dd>A: linux</dd> </dl11.水平排列列表 .dl-horizontal代码: 1.code 2.pre 3.kbd表格: table table-striped table-bordered table-hover表格颜色: .info .success .active .warning .danger响应式表格： <div class="table-responsive"> <table class="table"> </table> </div>按钮： .btn //灰色按钮 .btn-default //灰色响应按钮 .btn-primary //深蓝色 .btn-success// 绿色 .btn-info //淡蓝色 .btn-warning//橙色 .btn-danger//红色 .btn-link // 超链接按钮大小： .btn-lg .btn-default .btn-sm .btn-xs 块按钮： .btn-block属性： disabled=“disabled”使得它没法点的动（禁用按钮） a链接 <input type="submit"/>, <input type="reset"/> <input type="button"/> 也可以添加这些属性来使得它变成按钮。图片样式： .img-rounded :圆角 .img-circle :圆 .img-thumbnail ：边角白色（图片背景不为白的时候使用） <img src="" class="">辅助类： 文本颜色： .text-muted 灰色 .text-primary 蓝色 .text-success 绿色 .text-info 淡蓝色 .text-warning 橙黄色 .text-danger 红色 文本背景颜色： .bg-primary .bg-success .bg-info .bg-warning .bg=danger关闭按钮： .close更多下三角： .caret(用在按钮上)浮动： .pull-right/ .pull-left清除浮动：.clearfix让内容居中： .center-block(让块标签居中)显示和隐藏： .show .hide---------------------css组件：字体图标： Glyphicons .glyphicons .glyphicon-xxx .glyphicons .glyphicon-triangle-right下拉菜单： .dropdown .dropup .drop-menu date-toggle='dropdown'<div class="dropdown"> <button class="btn btn-primary" date-toggle='dropdown'> 更多信息<span class='caret'></span> </button> <ul class='dropdown-menu'> <li class=‘dropdown-header’><a href="xxx"></a></li> <li class='divider'></li> <li><a href="xxx"></a</li> <li><a href="xxx"></a</li> <li class="disabled"><a>xxx</a></li> </ul></div>.dropdown-header标题.divider 分割线.disabled 禁用按钮组: .btn-group .btn-toolbar：更大的按钮排尺寸： .btn-group-lg .btn-group-sm .btn-group-xs <div class="btn-group"> <button class="btn btn-default"></button <button class="btn btn-default"></button </div>嵌套.dropdown-toggle按钮组垂直排列： .btn-group-vertical两端对齐的按钮组： .btn-group-justified放在外层的div中，然后里面的每个按钮组只有一个按钮按钮组+下拉菜单：<div class="btn btn-group"> <button class="btn btn-primary">Default</button> <button class="btn btn-primary dropdown-toggle" date-toggle="dropdown"><span class="caret"></span></button> <ul class="dropdown-menu"> <li></li> <li></li> <li></li> </ul></div>表单：.form-group +has-success/has-error/has-info(表单框的颜色).from-control.checkbox/.checkbox-inline(这个放在label里，label内放入input和选项).radio.from-inline.input-group.input-group-addon.from-horizontal.control-label.form-control-static 静态的值，这个放在p标签内[disabled]：禁用[readonly]：只读filedset标签，在里面添加以上两个属性，禁用全局。.input-lg(表单框的尺寸).input-sm.help-block 表单下的提示<from action=""> <div class="from-group"> <lable for="">用户名：</lable> <input type="text" class="form-control" placeholder="username"/> </div> <div class="from-group"> <lable for="">密码：</lable> <input type="text" class="form-control" placeholder="password"/> </div> <div class="from-group"> <lable for="">留言：</lable> <textarea name="" id="" cols="" rows="" class="from-control"> </textarea> </div> <div class="from-group"> <select name="" id="" class="from-control"> <option value="">xxx</value> <option value="">xxx</value> <option value="">xxx</value> </select> </div> <div class="from-grop">< <input type="submit" value="提交" class="btn btn-primary"/> <input type="reset" value="重置" class="btn btnprimary"/> /div></from>多选框： <div class="from-group"> <label for="">爱好</lable> <div class="checkbox"> <label> <input type="checkbox" name="" id="">篮球 </label> </div> <div class="checkbox"> <label> <input type="checkbox" name="" id="">篮球 </label> </div>文件上传框：//不建议使用 <div class="form-group"> <label for="">文件上传：</label> <input type="file" name="" id="" class="from-control"/> </div>内联表单：使得表单成为一排 <from action="" class="from-inline">输入框组： <div from-group> <div class="input-group"> <div class="input-group-addon">$</div> <input type="text" class="form-control"/> <div class="input-group-addon">$</div> </div> </div>水平排列的表单：（使得用户名，密码和输入框在同一水平上） <from class="from-horizontal"> <div class="from-group"> <label for="" class="col-sm-2 control-label">用户名</label> <div class="col-sm-10"> <input type="text" class="from control" placeholder="username"/> </div> </div> <div class="from-group"> <label for="" class="col-sm-2 control-label">密码：</label> <div class="col-sm-10"> <input type="password" class="from control" placeholder="password"/> </div> </div> </from>输入框组：.input-group.input-group-btn<from action="" class="from-horizontal"> <div class="input-group"> <div class="input-group-addon">$</div> <input type="text" class="from-control"> </div></from>输入框嵌入按钮： <from action=""> <div class="input-group"> <input type="text" class="from-control"> <div class="input-group-btn"> <button class="btn btn-primary">GO</button> </div> </div> </form>导航： .nav .nav-tabs .nav-pils .nav-stacked 导航堆叠导航条:.navbar.navbar-default.navbar-inverse.navbar-fixed-top.navbar-fixed-bottom.navbar-header.navbar-brand.navbar-nav.navbar-form.navbar-btn.navbar-text.navbar-link.navbar-left.navbar-right路径导航:.breadcrumb分页效果:.pagination上下页:.pager标签:.label.label-primary.label-success.label-info.label-warning.label-danger徽章:.badge巨幕:.jumbotron缩略图:.thumbnail警告框:.alert.alert-success.alert-info.alert-warning.alert-danger进度条:.progress.progress-bar.progress-bar-success.progress-bar-info.progress-bar-warning.progress-bar-danger.progress-bar-striped.active 使得条纹动<div class="progress"> <div class="progress-bar progress-bar-success" style='width:90%'> 90% </div></div>媒体对象:.media.media-left.media-object.media-body.media-heading.media-right.media-top|middle|bottom列表组:.list-group.list-group-item面板:.panel.panel-primary.panel-heading.panel-title.panel-body.panel-footer内嵌框架:.embed-responsive.embed-responsive-16by9.embed-responsive-4by3.embed-responsive-itemwell:.well.well-lg.well-smbs jquery插件:-----------------------------------------------------------弹框:.modal.modal-dialog.modal-lg.modal-sm.modal-content.modal-header.modal-body.modal-footer滚动监听:data-spy='scroll' data-target='#mynav' data-offset='150'[自定义滚动监听实例]标签页:[data-toggle='tab'].tab-content.tab-pane.active.fade.in折叠效果:[data-toggle="collapse"][data-parent='#accordion'].panel-collapse.collapse.panel-group幻灯片:.carousel.slide[data-ride='carousel'].carousel-inner.item.active.carousel-indicators[data-slide-to='0'].left.carousel-control[data-slide='prev'][data-slide='next']affix固定:[data-spy="affix"]阅读全文
0 0
- BootStrap学习手册
- Bootstrap学习手册
- Bootstrap学习记录，快速手册
- bootstrap手册
- bootstrap datepicker手册
- Bootstrap学习--初识Bootstrap
- Bootstrap学习--初识Bootstrap
- bootstrap学习
- Bootstrap 学习
- bootstrap学习
- bootstrap学习
- Bootstrap 学习
- bootstrap学习
- bootstrap学习
- Bootstrap学习
- Bootstrap 学习
- BootStrap学习
- Bootstrap学习
- python3.5爬虫实例：根据城市名称来获取该城市最近七天的天气预报
- python的异常
- xslt导入excel
- Linux安装Tomcat
- 对拍bat代码及实现
- Bootstrap学习手册
- leetcode 563. Binary Tree Tilt
- javap的认识
- frame操作
- Gaby Ivanushka
- linux常用命令大全
- Angular 组件之间如何通信？
- Java代码质量检查工具及使用案例
- JavaScript 实例：点击漫天小星星 创建标签元素并加到父标签下
