Bootstrap知识点整理
2017-01-24 15:23:28 0 举报
AI智能生成
Bootstrap是一个用于快速开发响应式网页的开源工具集,它包含了HTML、CSS和JavaScript等组件。Bootstrap提供了丰富的预设样式和布局,使得开发者能够轻松地创建出美观且适应不同设备屏幕的网页。此外,Bootstrap还提供了许多实用的组件,如导航栏、下拉菜单、弹出框等,这些组件可以帮助开发者提高开发效率。Bootstrap采用了模块化的设计思想,使得开发者可以根据自己的需求选择合适的组件进行组合。总之,Bootstrap是一个功能强大且易于上手的工具,对于前端开发者来说具有很高的实用价值。
作者其他创作
大纲/内容
组件
图标字体
span.glyphicon.glyphicon-*
下拉菜单
.dropdown
a[data-toggle="dropdown"]
.dropdown-menu
导航
标签页式导航
ul.nav.nav-tabs > li > a[data-toggle="tab"]
胶囊式导航
ul.nav.nav-pills > li > a[data-toggle="tab"]
导航条中的导航
面包屑
.breadcrumb
分页条
.pagination
分页器
.pager
标签
.label.label-颜色
徽章
.badge
巨幕
.jumbotron
水井
.well
页头
.page-header
按钮组
.btn-group
.btn
警告框
.alert.alert-颜色
媒体对象
.media
.media-left
.media-body
.media-right
列表组
.list-group
.list-group-item
缩略图
.thumbnail
面板
.panel.panel-颜色
.panel-heading
.panel-body
.panel-footer
响应式导航条
.navbar.navbar-default/inverse
.container
.navbar-header
.navbar-brand
.navbar-toggle
.icon-bar
.icon-bar
.icon-bar
.navbar-collapse
.nav.navbar-nav
.navbar-form
.navbar-btn
.navbar-text
.navbar-link
jQuery插件
下拉菜单
标签页
警告框
模态框
.modal
.modal-dialog
.modal-content
.modal-header
.modal-body
.modal-footer
起步
概述
Bootstrap是一个HTML/CSS/JS框架
适用于响应式Web项目
内容涉及到
HTML
data-*=""
CSS
CSS Reset
千个class
JS
基于jQuery提供了十几个插件函数
下载
基本模板
viewport
html5shiv.js
respond.js
Bootlint
示例程序
兼容性
Windows下的Safari
全局CSS样式
按钮
.btn
.btn-default
.btn-danger/success/warning/info/primary
.btn-lg/sm/xs
.btn-block
文本
.text-danger/success/warning/info/primary
.bg-danger/success/warning/info/primary
.text-left/right/center/justify
.text-uppercase/lowercase/capitalize
列表
.list-unstyled
.list-inline
图片
.img-rounded
.img-circle
.img-thumbnail
.img-responsive
辅助类
.pull-left
.pull-right
.clearfix
.caret
.close
表格
.table
.table-bordered
.table-striped
.table-hover
.table-responsive
栅格布局
.container
.container-fluid
.row
.col-lg-1/2/.../12
.col-md-1/2/.../12
.col-sm-1/2/.../12
.col-xs-1/2/.../12
.col-lg-offset-1/2/.../12
.col-md-offset-1/2/.../12
.col-sm-offset-1/2/.../12
.col-xs-offset-1/2/.../12
.hidden
.hidden-lg/md/sm/xs
表单
默认表单
form
.form-group
label.control-label
input.form-control
span.help-block
行内表单
form.form-inline
.form-group
label.sr-only
input.form-control
水平表单
form.form-horizontal
.form-group
div.col-*-*
label.control-label
div.col-*-*
input.form-control
div.col-*-*
span.help-block
定制
0 条评论
下一页