-
bootstrap_study
bootstrap为移动优先前端框架，带有很多的样式，可以简化css的编写
开发bootstrap页面需要引入一下css、js- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
超小设备手机(<768px) 小型设备平板电脑(>=768px) 中型设备台式电脑(>=992px) 大型设备台式电脑(>=1200px) .col-xs- .col-sm- .col-md- .col-lg- 表格
基本结构
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- table-striped:带条纹
- table-bordered:带边框
- table-hover:悬停带浅灰色背景
- table-condensed:精简表格
- 响应式表格
- 1
表单
form-horizontal:水平表单
- form元素添加class .form-horizontal
- 把标签和控件放在带有class .form-group的div中
- 向标签添加class .control-label
表单类型
- input: 输入框
- textarea：文本框
- checkbox：复选框
- radio：单选框
- select ：选择框
表单布局
可以使用col-sm-*来规定控件的大小
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
按钮
以下class属性可以用于a,button,input
- btn-default:默认
- btn-promary:原始
- btn-link:链接按钮
- btn-success:成功按钮
- btn-danger:危险按钮
- btn-warning:警告按钮
- btn-info：信息按钮
- btn-lg:制作大按钮
- btn-sm：制作小按钮
- btn-xs:制作超小按钮
- active:激活状态
- disabled:禁用
按钮组
div中使用.btn-group创建按钮组
- btn-group-lg|sm|xs：控制按钮组的大小
- btn-group-vertical:设置垂直方向的按钮
- btn-group-justified:设置自适应大小的按钮组
-- 下拉- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
下拉菜单
创建下拉菜单
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- dropdown-menu-right:下拉菜单右对齐
- dropdown-header:下拉菜单中添加标题
- dropup:指定向上弹出的下拉菜单
- disabled:下拉菜单中的禁用项
- divider:下拉菜单中的分割线
按钮
- btn-group:按钮组
- btn-toolbar:按钮工具栏
- btn-group-lg，btn-group-sm，btn-group-xs：调整按钮大小
- btn-group-vertical:垂直按钮
- spn.caret 下拉箭头
折叠
- data-toggle=“collapse” :添加到控制下拉的组件之中
- href或data-target: 添加到控制下拉的组件之中，它的值是子组件的id
- data-parent：把折叠面板（accordion）的id添加到要展开或折叠的组件的链接上
- collapse(options):激活内容为可折叠元素,$(‘selector’).collapse({toggle:false})
- collapse(‘toggle’):切换显示/隐藏可折叠元素,$(‘selector’).collapse(‘toggle’)
- collapse(‘show’):显示可折叠元素,$(‘selector’).collapse(‘show’)
- collapse(‘hide’):隐藏可折叠元素，$(‘selector’).collapse(‘hide’)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
导航元素
创建一个标签式的导航菜单
- 以一个带有class.nav的无序列表开始
- 添加class.nav-tabs
- class.nav-pills替换nav-tabs :把标签改成胶囊的样式
- class.nav-stacked：同class.nav,.nav-pills同时使用，让胶囊垂直堆叠
- nav-justified:让标签或者胶囊式导航菜单与父元素等宽
- disabled：创建灰色链接，并禁用该链接的:hover状态
- 下拉菜单
- 以一个带有class.nav的无序列表开始
- 添加class.nav-tabs
- 添加带有.dropdown-menu class的无序列表
- 点击标签切换显示内容
- data-toggle=“tab”:放在需要切换的标签上
- .tab-content：放在展示的元素上
- .tab-pane:放在需要具体展示的元素上
动态标签
首页
菜鸟教程 —— 学的不仅是技术，更是梦想！！！
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
导航栏
创建导航栏
- 向nav标签添加class.navbar，.navbar-default
- 向上面的元素添加role=“navigation”,有助于增加可访问性
- 向div元素添加一个标题class.navbar-header,内部包含了带有class navbar-brand的a元素
- 为了向导航栏添加链接，只需要简单的添加带有class.nav,.navbar-nav的无序列表即可
相关属性
- .navbar-form:导航栏表单
- navbar-button:导航栏按钮
- navbar-text:导航栏文本
- class glyphicon glyphicon-*来设置图标，放到span元素中
- .navbar-left或navbar-right向左或向右对齐
- .navbar-fixed-top ,navbar-fixed-bottom 固定到顶部或底部
- .navbar-static-top：创建能随着页面一起滚动的导航栏
- .navbar-inverse:创建带有黑色白色文本的反色导航栏
响应式导航栏
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
面包屑导航：.breadcrumb class的无序列表
分页
- .pagination
- 分页大小.pagination-*(pagination-lg pagination pagination-sm)
- “«” "»"分页左右的方向标
徽章：badges 放在span元素上
胶囊式导航中的激活状态
列表导航中的激活状态
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
缩略图
缩略图创建步骤：
- 在图像周围添加带有class.thumbnail的标签
- 这会添加四个像素的内边距（padding）和一个灰色的边框
- 当鼠标悬停在图像上时，会动画显示出图像的轮廓
缩略图标签
一些示列文本
缩略图标签
一些示列文本
缩略图标签
一些示列文本
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
警告 .alert
- .alert-success,alert-info,alert-warning,alert-danger
- .alert-dismissable可取消警告
成功！很好地完成了提交。信息！请注意这个信息。警告！请不要提交。错误！请进行一些更改。- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
进度条 .progress
面板 class.panel 和class.panel-default
模态框（Modal）插件
用法：
- 通过data属性：在控制器元素（比如按钮或者链接）上设置属性data-toggle=“modal”,同时设置data-target=“#identifier"或href=”#identifier"来指定要切换的特定的模态框
- 通过JavaScript：调用带有id="identifier"的模态框 $(‘#identifier’).modal(options)
- show.bs.modal:在调用show方法后触发
- shown.bs.modal:当模态框对用户可见是触发
- hide.bs.modal:当调用hide实例方法时触发
- hidden.bs.modal：当模态框完全对用户隐藏时触发
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
轮播
carousel是一种灵活的响应式的向站点添加滑块的方式
- data-interval,自动循环每个项目之间延迟的时间量。如果为false,轮播将不会自动循环。
- data-pause:鼠标进入时暂停轮播循环，鼠标离开时恢复轮播循环
- data-wrap：轮播是否连续循环
- .carousel(options):初始化轮播为可选的 options 对象，并开始循环项目。
- .carousel(‘cycle’):从左到右循环轮播项目
- .carousel(‘pause’):停止轮播循环项目
- .carousel(‘number’):循环轮播到某个特定的帧
- .carousel(‘prev’):循环轮播到上一个项目
- .carouse(‘next’):循环轮播到下一个项目
- slide.bs.carousel:当调用slide实例方法时立即触发该事件
- slide.bs.carousel:当轮播完成幻灯片过渡效果时触发该事件
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
-
相关阅读:
Go内存分配
MySQL数据类型
【PHP代码审计】——开启你的代码审计生涯
机器学习基础16-建立预测模型项目模板
RabbitMQ —— 理解及应用场景
【数据结构(三)】双向链表（2）
CocosCreator3.8研究笔记（四）CocosCreator 脚本说明及使用（上）
PostgreSQL基础入门
相控阵天线（二）：非规则直线阵列天线（稀布阵列、稀疏阵列、平方率分布阵列、含python代码）
java:Java中的函数和函数重载
- 原文地址：https://blog.csdn.net/weixin_45146962/article/details/134034877
