Bootstrap是一个HTML/CSS/JS框架,简化移动设备优先的响应式页面开发,主要涉及:
HTML:为已有的标签添加了一些新属性 data-*
CSS:重设了HTML标签的属性、声明了很多class
JS:添加了jQuery插件
主要分为四个部分:
(1)全局CSS样式
容器、按钮、图片、文本、背景、浮动、排版、栅格系统、表格、表单
(2)组件
(3)jQuery插件
(4)定制
Bootlint:由Bootstrap官方提供的,一个用于检测Bootstrap使用方式是否正确的小工具,可以用于项目开发阶段。
全局CSS样式——表格
.table
.table-bordered 表格带外框
.table-condensed 表格中的单元格变紧凑
.table-striped 表格中的数据行隔行变色
.table-hover 表格中的数据行悬停变色
.table-responsive 用于<table>的父元素!当表格一行中的内容显示不下时,会显示横向的滚动条。
-------------------------------
.active 用于tr/td,背景色变为“激活色”(浅灰色)
.success 用于tr/td,背景色变为“成功色”(色)
.danger 用于tr/td,背景色变为“危险色”(色)
.warning 用于tr/td,背景色变为“警告色”(色)
.info 用于tr/td,背景色变为“提示色”(色)
全局CSS样式——表单
.form-group 用于input和label的共同父元素 margin-bottom: 15px;
.form-group-lg 大号的输入框
.form-group-sm 小号的输入框
.checkbox 用于<input type="checkbox">的父容器(div)上!对其中的label文字作了设定
.checkbox-inline
.radio 用于<input type="radio">的父容器(div)上!对其
中的label文字作了设定
.radio-inline
.form-inline 用于form元素,实现输入域处于一行内
-----------------------------------------------------
----表单相关class小结--------
<form class="[] |form-horizontal | form-inline">
<divclass="form-group has-error|has-success|has-warning">
<labelclass="control-label col-*-*"for=""></label>
<inputclass="form-control">
<pclass="help-block">用户名已被占用</p>
</div>
</form>
午间练习:
Bootstrap组件(Component)——字体图标
提示:Bootstrap官方借用了Glyphicon Halflings提供的字体图标文件,无需使用图片就可以文字的形式显示出260+图标——可以任意的放大缩小、或者字体颜色。
Bootstrap组件——下拉菜单
注意!下拉菜单必需至少三级结构:
<div id="父级容器">
<button>触发元素</button>
<div>目标元素</div>
</div>
目标元素的隐藏和显示必需要通过JavaScript来实现。
<div class="dropdown">
<buttondata-toggle="dropdown"></button>
<ulclass="dropdown-menu">
<li><a href="#"></a></li>
<li class="dropdown-header">北京市</li>
<li class="divider"></li>
</ul>
</div>
Bootstrap组件——按钮组
有两种按钮组:
.btn-group 水平放置的多个按钮
.btn-group-vertical 竖直放置的多个按钮
每一种按钮组又可以声明大小号:
.btn-group-lg
.btn-group-sm
.btn-group-xs
---------------------------------------
.btn-group.btn-group-justified 对于使用a实现的按钮组可以实现占满一整行的效果。
Bootstrap组件——输入框组
<divclass="input-group">
<spanclass="input-group-addon">请输入:</span>
<inputclass="form-control">
<spanclass="input-group-btn">
<button class="btn btn-default">搜索</button>
</span>
</div>
Bootstrap 组件
最新推荐文章于 2024-03-10 09:15:00 发布