Web前端之移动端课程开发之06.bootstrap
Posted tea_year
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Web前端之移动端课程开发之06.bootstrap相关的知识,希望对你有一定的参考价值。
Bootstarp
介绍
bootstarp是Twitter公司开发基于html,css,js的前端框架
为实现web应用程序快速实现开发提供了一套前端工具包 UI(userInterface用户界面)框架
Bootstrap的特性
响应式设计 (css媒体查询 一套样式 实现各个终端尺寸适配) pc 平板 手机端
栅格布局
完整的类库
jQuery插件
不同的使用场景 移动设备优先
Bootstrap3
IE9以及以上
某些功能性的组件依赖于jQuery
Bootstarp下载地址
// 官方地址
getbootstrap.com
// 中文地址
www.bootcss.com
前端开发过程中遇到的问题
重复 复杂 无意义的命令
结构冗余 胡乱嵌套
页面错乱
Bootstrap全局样式的特点
代码整洁
风格统一
美观易用
通过class设置样式
排版
标题
h1~h6 / .h1 ~ .h6
副标题 (small)
文本
段落 对齐方式 文本标记
// 对齐
.text-left
.text-center
.text-right
.text-lowercase
.text-uppercase
.text-captitalize
表格
.table-bordered 带边框
.table-striped 条纹状
.table-hover 悬停变色
.table-condensed 紧凑风格
.info .success .warning .danger 在表格中起作用
.bg-info .bg-warning …
表单
.form-control 表单控件
.form-group 表单组件
.form-inline 表单水平排列
按钮
// btn
//样式: btn-default btn-primary btn-success
// btn-info btn-warning btn-danger btn-link
//更改大小 btn-lg btn-sm md xs
// 激活 active 块级化 btn-block
可以给其他标签套用这些类 比如a标签
Bootstrap的图片 --形状
圆角 .img-rounded
圆形 .img-circle
带有边框的圆角图形 .img-thumbnail
文本颜色
.text-primary .text-success .text-info
.text-warning .text-danger
背景颜色
.bg-primary .bg-success .bg-info
.bg-warning .bg-danger
状态设置
.close 关闭按钮
三角符号
.caret 三角符号
viewport 与bootstrap的响应式开发
@media screen and (min-width:*px) and (max-width:*px) {
}
bootstrap内部实现了 css媒体查询(Media Query) 来实现响应式布局(随着屏幕的尺寸变化而变化 rem 响应式布局的方式)
一套 栅格布局( 12份划分 )
bootstrap的字体图标
基本使用
下拉菜单
控件组
.input-group 表示控件组
.input-group-addon 添加控件组的图标
分页
.pagination
,pagination-lg/sm
.active
.pager .previous/.next
弹出框
.alert .alert-success
.alert-info .alert-warning
.alert-danger
.alert-dismissible 可以关闭
.alert-link 弹出框中的链接
面板
.panel .panel-default
.panel-heading .panel-title
.panel-body
.panel-footer
// .panel自带的success/warning/info/danger
列表
.list-group .list-group-item
导航
// .nav
// .nav-tabs 选项卡式
// .nav-pills 按钮式
// .nav-stacked 垂直方向按钮式
// .nav-justified 两端对齐
以上是关于Web前端之移动端课程开发之06.bootstrap的主要内容,如果未能解决你的问题,请参考以下文章