Web前端之移动端课程开发之06.bootstrap

Bootstarp

介绍

bootstarp是Twitter公司开发基于html,css,js的前端框架

为实现web应用程序快速实现开发提供了一套前端工具包 UI（userInterface用户界面）框架

  

 

  
1
  
2
  
3
 

Bootstrap的特性

响应式设计  (css媒体查询 一套样式 实现各个终端尺寸适配) pc  平板  手机端   
栅格布局
完整的类库
jQuery插件
不同的使用场景  移动设备优先 

  

 

  
1
  
2
  
3
  
4
  
5
 

Bootstrap3

IE9以及以上

某些功能性的组件依赖于jQuery

Bootstarp下载地址

// 官方地址
getbootstrap.com
// 中文地址
www.bootcss.com

  

 

  
1
  
2
  
3
  
4
 

前端开发过程中遇到的问题

重复 复杂 无意义的命令
结构冗余  胡乱嵌套
页面错乱

  

 

  
1
  
2
  
3
 

Bootstrap全局样式的特点

代码整洁
风格统一
美观易用

  

 

  
1
  
2
  
3
 

通过class设置样式

排版

标题

h1~h6 / .h1 ~ .h6
副标题 （small）

  

 

  
1
  
2
 

文本

段落 对齐方式 文本标记

// 对齐
.text-left
.text-center
.text-right
.text-lowercase
.text-uppercase
.text-captitalize

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
 

表格

.table-bordered 带边框
.table-striped  条纹状
.table-hover 悬停变色
.table-condensed 紧凑风格

  

 

  
1
  
2
  
3
  
4
 

.info .success .warning .danger 在表格中起作用

.bg-info .bg-warning …

表单

.form-control 表单控件
.form-group 表单组件
.form-inline 表单水平排列

  

 

  
1
  
2
  
3
 

按钮

// 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标签

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

Bootstrap的图片 --形状

圆角 .img-rounded
圆形 .img-circle
带有边框的圆角图形  .img-thumbnail

  

 

  
1
  
2
  
3
 

文本颜色
.text-primary  .text-success .text-info
.text-warning  .text-danger
背景颜色
.bg-primary  .bg-success .bg-info
.bg-warning  .bg-danger
状态设置
	.close 关闭按钮
三角符号
	.caret 三角符号

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

viewport 与bootstrap的响应式开发

@media screen and (min-width:*px) and (max-width:*px) {
  
}

bootstrap内部实现了 css媒体查询（Media Query） 来实现响应式布局（随着屏幕的尺寸变化而变化 rem 响应式布局的方式）
一套 栅格布局（ 12份划分 ）

  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

bootstrap的字体图标

基本使用

  

 

  
1
 

下拉菜单

  

 

  
1
 

控件组

.input-group 表示控件组
.input-group-addon 添加控件组的图标

  

 

  
1
  
2
 

分页

.pagination
,pagination-lg/sm
.active
.pager .previous/.next

  

 

  
1
  
2
  
3
  
4
 

弹出框

.alert  .alert-success
.alert-info  .alert-warning
.alert-danger
.alert-dismissible 可以关闭
.alert-link 弹出框中的链接

  

 

  
1
  
2
  
3
  
4
  
5
 

面板

.panel  .panel-default  
.panel-heading .panel-title 
.panel-body
.panel-footer
// .panel自带的success/warning/info/danger

  

 

  
1
  
2
  
3
  
4
  
5
 

列表

.list-group  .list-group-item

  

 

  
1
 

导航

// .nav 
// .nav-tabs 选项卡式
// .nav-pills 按钮式
// .nav-stacked 垂直方向按钮式
// .nav-justified 两端对齐

  

 

  
1
  
2
  
3
  
4
  
5
 

文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。

原文链接：aaaedu.blog.csdn.net/article/details/119270876