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的主要内容,如果未能解决你的问题,请参考以下文章

web前端移动端课程之canvas教程系列

web前端移动端课程之canvas教程系列

web前端课程技术内容之如何做一个简单的手机端页面的翻页

web前端课程技术内容之如何做一个简单的手机端页面的翻页

移动端web开发初探之Vuejs的简单实战

第139期移动web前端开发之常见bug解决