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

た入场券 2022-08-29 04:30 156阅读 0赞

### 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

##### 列表 #####