Bootstrap资料整理

淡淡的烟草味﹌ 2022-07-16 13:47 330阅读 0赞

<!DOCTYPEhtml>









输入框和导航组件













1 Bootstrap 介绍

【学习要点：概述、特点、结构】

1.1 Bootstrap 概述

Bootstrap 是由Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于

HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地

构建基于PC 及移动端设备的Web 页面需求。

--为了解决前端开发任务中的协作统一问题，由最初的CSS 驱动项目发展成为内置很多JavaScript 插件和图标的多功能Web 前端

的开源框架。

--Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容PC 端、PAD以及手机移动端的页面访问。

Bootstrap 下载及演示：

国内文档翻译官网：http://www.bootcss.com

瓢城Web 俱乐部官网：http://www.ycku.com

1.2 Bootstrap 特点

【跨设备、跨浏览器】【响应式布局】【提供的全面的组件】【内置jQuery 插件】【支持HTML5、CSS3】【支持LESS 动态样式】

1.3 Bootstrap 结构

主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。

1.css 目录中有四个css 后缀的文件，其中包含min字样的，是压缩版本，一般使用

这个；不包含的属于没有压缩的，可以学习了解css 代码的文件；而map 后缀的文件则是

css 源码映射表，在一些特定的浏览器工具中使用。

2.js 目录包含两个文件，是未压缩和压缩的js 文件。

3.fonts 目录包含了不同后缀的字体文件。

2 排版样式

【学习要点：页面排版】：《学习一下Bootstrap 全局CSS 样式中的排版样式，包括了标题、页面主体、对齐、列表等常规内容。》

2.1 页面排版

2.1.1 页面主体

  1. Bootstrap 将全局font-size 设置为14px，line-height 行高设置为1.428(即20px)；

段落元素被设置等于1/2 行高(即10px)；颜色被设置为#333。

### 2.1.2 标题 ###

2. 从h1 到h6《36px、30px、24px、18px、14px、12px》

并且还支持普通内联元素定义class=(.h1 ~ h6)来实现相同的功能。

//内联元素使用标题字体

Bootstrap

Bootstrap 框架Bootstrap小标题



### 2.1.3 内联文本元素 ###

//添加标记，元素或.mark 类

Bootstrap框架

//各种加线条的文本

Bootstrap 框架//删除的文本

Bootstrap 框架//无用的文本

Bootstrap 框架//插入的文本

Bootstrap 框架//效果同上，下划线文本

//各种强调的文本

Bootstrap 框架//标准字号的85%

Bootstrap 框架//加粗700

Bootstrap 框架//倾斜

2.1.4 对齐

Bootstrap 框架

//居左

Bootstrap 框架

//居中

Bootstrap 框架

//居右

Bootstrap 框架

//两端对齐，支持度不佳

Bootstrap框架

//不换行

### 2.1.5 大小写 ###

//设置英文文本大小写

Bootstrap 框架

//小写

Bootstrap 框架

//大写

Bootstrap 框架

//首字母大写

### 2.1.6 缩略语 ###

//缩略语

Bootstrap框架

### 2.1.7 地址文本 ###

//设置地址，去掉了倾斜，设置了行高，底部20px



Twitter,Inc.


795 Folsom Ave, Suite 600


San Francisco, CA 94107


P: (123) 456-7890



### 2.1.8 引用文本 ###

//默认样式引用，增加了做边线，设定了字体大小和内外边距



Bootstrap 框架



//反向



Bootstrap 框架



### 2.1.9 列表排版 ###

//移出默认样式





//设置成内联





//水平排列描述列表



Bootstrap


Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。




### 2.1.10 代码 ###

//内联代码



//用户输入

press ctrl + ,

//代码块

  1. Pleaseinput…


# 3 表格和按钮 #

【学习要点：表格、按钮】

## 3.1 表格：table ##

【基本格式：class=”table”】

【条纹状表格：class=”table table-striped”】

【带边框的表格：class=”table table-bordered”】

【悬停鼠标：class=”table table-hover”】

【状态类：active、success、info、warning、danger】

//可以单独设置每一行的背景样式



【隐藏某一行：class=”sr-only”】：

【响应式表格：class=”table-responsive”】

//表格父元素设置响应式，小于768px 出现边框



## 3.2 按钮 ##

1.可作为按钮使用的标签或元素

//转化成普通按钮

Link





注意事项有三点：

(1).针对组件的注意事项

虽然按钮类可以应用到 和

## 3.5 激活状态：【active】 ##

//激活按钮



6.禁用状态

//禁用按钮



# 4 表单和图片 #

【学习要点：表单、图片】

《主要学习一下Bootstrap 表单和图片功能，通过内置的CSS 定义，显示各种丰富的效果。》

## 4.1 表单 ##

【1.基本格式：class=”form-control”

//实现基本的表单样式













】

【2.内联表单:其中的内容一行显示，form-inline样式可多用【form-inline】

//让表单左对齐浮动，并表现为inline-block内联块结构



注：当小于768px，会恢复独占样式

】

【3.表单合组：【input-group-addon】

//前后增加片段



￥




.00



】

【4.水平排列【form-horizontal】

//让表单内的元素保持水平排列

















注：这里用到了col-sm 栅格系统，后面章节会重点讲解，而control-label 表示和

父元素样式同步。】

【5.复选框和单选框：

//设置复选框，在一行







//设置禁用的复选框【disabled】







//设置内联一行显示的复选框【checkbox-inline】



体育





//设置单选框：【radio】







】

【6.下拉列表

//设置下拉列表















】

【

7.校验状态【has-error：错误状态、has-success：成功状态、has-warning：警告状态】

//设置为错误状态



】

【8.添加额外的图标【glyphicon-ok：成功状态、glyphicon-warning-sign：警告状态、glyphicon-remove：错误状态】

//文本框右侧内置文本图标











】

【9.控制尺寸

//从大到小







注：也可以设置父元素form-group-lg、form-group-sm，来调整。

】

## 4.2 图片 ##

【Bootstrap 提供了一些丰富的图片样式供开发者使用】

1.图片形状

//三种形状

图片

图片

图片

//响应式图片

图片

# 5 栅格系统 #

【学习要点：移动设备优先、布局容器、栅格系统】

《主要学习一下Bootstrap 的栅格系统，提供了一套响应式、移动设备优先的流式栅格系统。》

## 5.1 移动设备优先 ##

在HTML5 的项目中，我们做了移动端的项目。它有一份非常重要的meta，用于设置屏

幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。

//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放



==布局容器：

//固定宽度



…



//100%宽度



…



栅格系统中，浏览器会随着屏幕的大小的增减自动分配最多12 列。通过一系列的行(row)

与列(column)的组合来创建页面布局。工作原理如下：

1.“行（row）”必须包含在.container（固定宽度）或.container-fluid （100%

宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

2.通过“行（row）”在水平方向创建一组“列（column）”。

3.你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为

行（row）”的直接子元素。

4.类似.row 和.col-xs-4 这种预定义的类，可以用来快速创建栅格布局。

Bootstrap 源码中定义的mixin 也可以用来创建语义化的布局。

5.通过为“列（column）”设置padding 属性，从而创建列与列之间的间隔（gutter）。

通过为.row 元素设置负值margin 从而抵消掉为.container 元素设置的padding，

也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

6.负值的margin 就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成

一行。

7.栅格系统中的列是通过指定1 到12 的值来表示其跨越的范围。例如，三个等宽的列

可以使用三个.col-xs-4 来创建。

8.如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”

所在的元素将被作为一个整体另起一行排列。

9.栅格类适用于与屏幕宽度大于或等于分界点大小的设备， 并且针对小屏幕设备覆

盖栅格类。因此，在元素上应用任何.col-md-* 栅格类适用于与屏幕宽度大于或等于分

界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*

不存在，也影响大屏幕设备。

//创建一个响应式行





…





//为了显示明显的CSS

.a {

height: 100px;

background-color: #eee;

border:1px solid #ccc;

}

//总列数都是12，每列分配多列





1-4


5-8


9-12






1-8


9-12






## 5.2 栅格参数表 ##

如上图所示，栅格系统最外层区分了四种宽度的浏览器：

【超小屏(<768px)《自动》：col-xs-】《超小屏幕-手机（<768px）》：最大列宽-自动 【小屏(>=768px)《阀值：750px》：col-sm-】《小屏幕：平板(>=768px)》：最大列宽-~62px;

【中屏(>=992px)《970px》：col-md-】《中屏：桌面显示器(>=992px)》：最大列宽-~81px;

【大屏(>=1200px)《1170px》：col-lg-】《大屏:大桌面显示器(>=1200px)》：最大列宽-~97px;

《而内层.container 容器的自适应宽度为：自动、750px、970px 和1170px。自动的意思为，如果你是手机屏幕，则全面独占一行显示。》

【公共属性：《列数(column:12)》、槽(gutter)宽:30px(左右15px)、可嵌套:是、偏(offsets)移:是、列排序:是】

//四种屏幕分类全部激活





4


4


4


4


4


4


4


4


4


4


4


4






//有时我们可以设置列偏移，让中间保持空隙【col-md-offset-1】





8


3






//也可以嵌套，嵌满也是12 列







1-8


9-12






11-12







//可以把两个列交换位置，push 向左移动，pull 向右移动【col-md-push-3】





9


3






# 6 辅组类和响应式工具 #

【学习要点：辅组类、响应式工具】

《主要学习一下Bootstrap 的辅组类和响应式工具，辅助类提供了一组类来辅组页面设计，而响应式工具则利用媒体查询显示或隐藏某些内容。》

==辅助类：《Bootstrap 在布局方面提供了一些细小的辅组样式，用于文字颜色以及背景色的设置、显示关闭图标等等。》

## 6.1 情景文本颜色 ##

【text-muted：柔和灰】

【text-primary：主要蓝】

【text-success：成功绿】

【text-info：信息蓝】

【text-warning：警告黄】

【text-danger：危险红】

## 6.2 情景背景色 ##

【bg-primary：主要蓝】

【bg-success：成功绿】

【bg-info：信息蓝】

【bg-warning：警告黄】

【bg-danger：危险红】

## 6.3 关闭按钮 ##



## 6.4 三角符号 ##



## 6.5 快速浮动 ##

左边


右边


注：这个浮动其实就是float，只不过使用了!important 加强了优先级。

## 6.6 块级居中 ##

居中


注：就是margin:x auto；并且设置了display:block;。

## 6.7 清理浮动 ##



注：这个div 可以放在需要清理浮动区块的前面即可。

## 6.8 显示和隐藏 ##

show


hidden

==响应式工具：

《在媒体查询时，针对不同的屏幕大小，有时需要显示和隐藏部分内容。响应式工具类，就提供了这种解决方案。》

//超小屏幕激活显示

Bootstrap


//超小屏幕激活隐藏

Bootstrap


注：对于显示的内容，有三种变体，分别为：block、inline-block、inline。

【display 属性：block—此元素将显示为块级元素，此元素前后会带有换行符。】

【display 属性：inline-block—行内块元素】

【display 属性：inline—默认。此元素会被显示为内联元素，元素前后没有换行符。】

# 7 图标菜单按钮组件 #

【学习要点：小图标组件、下拉菜单组件、按钮组组件、按钮式下拉菜单】

## 7.1 小图标组件 ##

《Bootstrap 提供了免费的263 个小图标（数了两次），具体可以参考中文官网的组件链接：

http://v3.bootcss.com/components/\#glyphicons。部分图标如下：》

可以使用或标签来配合使用，具体如下：

//使用小图标





//也可以结合按钮



## 7.2 下拉菜单组件 ##

《下拉菜单，就是点击一个元素或按钮，触发隐藏的列表显示出来。》









按钮和菜单需要包裹在.dropdown 的容器里，而作为被点击的元素按钮需要设置

data-toggle=”dropdown”才能有效。对于菜单部分，设置class=”dropdown-menu”才能

自动隐藏并添加固定样式。设置class=”caret”表示箭头，可上可下。

//设置向上触发



//菜单项居右对齐，默认值是dropdown-menu-left



    //设置菜单的标题，不要加超链接

    网站导航

    //设置菜单的分割线



    //设置菜单的禁用项

  • 产品


    • //让菜单默认显示



    ## 7.3 按钮组组件 ##

    《按钮组就是多个按钮集成在一个容器里形成独有的效果。》

    //基本格式











    //将多个按钮组整合起来便于管理























    //设置按钮组大小



    <div class=”btn-group>







    //嵌套一个分组，比如下拉菜单



















    注意：这里
    中并没有实现class=”dropdown”，通过源码分析知道嵌套本身已经

    有定位就不需要再设置。而右边的圆角只要多加一个class=”dropdown-toggle”即可。

    //设置按钮组垂直排列



    //设置两端对齐按钮组，使用标签



    左

    中

    右



    ## 7.4 按钮式下拉菜单 ##

    这个下拉菜单其实和第二个知识点一样，只不过，这个是在群组里，不需要
    声明

    class=”dropdown”。

    //群组按钮下拉菜单









    //分裂式按钮下拉菜单











    //向上弹出式



    # 8 输入框和导航组件 #

    【学习要点：输入框组件、导航组件、导航条组件】：《主要学习一下Bootstrap 的两个个组件功能：输入框组件和导航导航条组件。》

    ## 8.1 输入框组件 ##

    《文本输入框就是可以在元素前后加上文字或按钮，可以实现对表单控件的扩展。》

    //在左侧添加文字



    @





    //在右侧添加文字





    @163.com



    //在两侧添加文字



    $



    .00



    //设置尺寸，另外三种分别是默认、xs、sm



    //左侧使用复选框和单选框

















    //左侧使用按钮













    //左侧使用下拉菜单或分列式















    ## 8.3 导航组件 ##

    Bootstrap 提供了一组导航组件，用于实现Web 页面的栏目操作。

    //基本导航标签页



    //胶囊式导航



      //垂直胶囊式导航



        //导航两端对齐



          //禁用导航中的项目

        • 关于


          • //带下拉菜单的导航



          ## 8.4 导航条组件 ##

          导航条是网站中作为导航页头的响应式基础组件。

          //基本格式



          //反色调导航



          //基本导航条，包含标题和列表



          //导航条中使用表单

















          //导航中使用按钮



          //导航中使用对齐方式，left 和right



          //导航中使用一段文本

          我是一段文本

          //非导航链接，一般需要置入文本区域内

          非导航链接

          //将导航固定在顶部，下面的内容会自动上移

发表评论

表情：
评论列表 （有 0 条评论，330人围观）

还没有评论，来说两句吧...

相关阅读

    相关 抽奖资料整理

    一、关于介面 1、[原生JS之实现九宫格抽奖效果，从此百分之百中奖不是梦！！！][JS] 了解如何加速、减速，停到中奖位置 ![20190518141309382

    淩亂°似流年淩亂°似流年/ 0 赞/ 287 阅读

    相关 Android学习资料整理

    Android学习资料整理，希望对你有用！ 1.书籍（只罗列了我自己买的并且是比较好的书）   (1).第一行代码(适合初级人员,入门级)  作者郭霖，江湖人称郭神，csd

    旧城等待，旧城等待，/ 0 赞/ 327 阅读

    相关 资料整理

    [2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] tensorflow官网：[https://tensor

    朱雀朱雀/ 0 赞/ 444 阅读