Bootstrap知识点整理
2017-02-22 18:07:40 0 举报
AI智能生成
Bootstrap是一款开源的前端框架,主要用于快速开发响应式布局、移动设备优先的网页。它包含HTML、CSS及JavaScript组件,支持栅格系统、表单、导航、按钮、弹出框等常用组件。通过引入CSS文件,可以一键生成漂亮的界面风格。Bootstrap还提供了丰富的插件,如轮播图、模态框、下拉菜单等,方便开发者快速实现功能需求。同时,Bootstrap具有良好的兼容性和扩展性,可以与其他前端框架(如jQuery)无缝集成。总之,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 条评论
下一页