bootstrap自学总结不间断更新

时间:2020-12-22 00:16:32

2.栅格系统

container-fluid 自适应宽度100%

container 固定宽度(适应响应式)

屏幕宽度=x     x>=1200            1170

992<=x<1200   970

768<=x<992     750

x<=768              auto

注意这俩个class不能放在一起,也就是说不能相互嵌套

如果不想让宽度随着屏幕而变化,可以给他一个!important来提高优先级这样在所有尺寸下都是一个值

3.栅格布局

row  代表一行,并且自带清除浮动

col-lg/md/sm/xs 代表列

数字         不能超过12,

如果列的和超过12,那就会换行

如果一列数字超过12,那就按12显示

4.屏幕尺寸

lg      宽度>1200

表现形式:并木的宽度大于1200,一行显式n列

屏幕的宽度小于1200,一行显式一列

md   宽度大于992小于1200同理

sm    宽度大于768小于992同理

xs     跨度小于768 一行永远显示n列

5.列偏移

col-lg-offset-(偏移的格子数量)

当偏移的格子数量超过12时会不起作用

------------------------------------------

6.列排序与嵌套

列排序

col-lg-push-10  列往右走

push 往右走

数字 往右走的格子数

数量超过12时会不起作用

col-lg-pull-10  列往左走

pull 往左走

数字 往左走的格子数

数量超过12时会不起作用

列偏移与列排序的区别

1.列偏移只能向右走,列排序可以向右走也可以向左走

2.当offset偏移后其位置超过12列,则会跳到下一行在下一行进行相同的偏移。而push不会换行。

嵌套

每一列里都可以嵌套一行和最对12列,嵌套的元素以父级的宽度为基准,在分12个格子。

------------------------------------------

7.特殊标签以及样式

------------------------------------------

8.表格相关样式

table table-triped table-bordered table-condensed table-hover

table-responsed

active success warning danger info

------------------------------------------

9.表单

form-control form-inline form-group form-horizontal control-label checkbox checkbox-inline rodio-inline

12.按钮

<button type="button"></button>

<a href="#"></a>

尺寸和颜色

class="btn btn-default btn-lg"

class="btn btn-primary btn-md"

class="btn btn-success btn-sm"

class="btn btn-info btn-xs"

让按钮宽度变为100%,并成为块级元素

btn-block

让按钮成为激活状态,就是有一个内影。

active

让按钮成为激活状态,就是有一个内影。

disabled

关闭按钮

<button class="close">&times;</button>

13.响应式图片

img-responsive         响应式图片

img-rounded    图片变成有小圆角

img-circle          裱成圆形

img-thumbnail 带圆角边框

14.辅助类样式

字体颜色

text-muted       变成微灰色

text-primary    变成淡蓝色

text-success    变成绿色

text-info   变成深蓝色

text-warning    变成橘黄色

text-danger      变成红色

字体的背景

bg-primary

bg-success

bg-info

bg-warning

bg-danger

三角符号

caret

左浮动

pull-left

右浮动

pull-right

居中对齐

center-block

隐藏于显示

show

hidden

invisible

15响应式工具

针对不同的宽度,展示或隐藏相关内容

visible-lg/md/sm/xs-block/inline-block/inline

hidden-lg/md/sm/xs-block/inline-block/inline

16.打印样式

<只>在打印的时候显示

visible-print-block/inline/inline-block

打印的时候隐藏

hidden-print-block/inline/inline-block

注意:

17.按钮组

btn-group         按钮组

btn-group-lg/md/sm/xs   改变按钮的尺寸

btn-group-vertical 按钮竖着排

btn-group-justified  让按钮俩端对其

注意:如果btn-group-vertical的子元素如果是button标签或者是input标签需要加一个带btn-group的div,不然会出问题。不过a标签就不会。

给按钮添加三角形

<a href="#" class="btn btn-primary">按钮<span class="caret"></span></a>

dropup     倒置三角也就是变成上拉菜单。

18.下拉菜单

1.给父级添加一个dropdown,或者给父级添加定位属性

2.给button添加一个data-toggle="dropdown"的属性,并且加一个dropdown-toggle的class

3.ul需要添加一个dropdown-menu的class

19.下拉菜单样式

open:默认菜单时展开的,给dropdown添加

pull-right/left

btn-block:让btn铺满。

dropup:让菜单在上面显式。

dropdown-header:菜单里的标题,给li添加

text-center:居中

divider:分割线

disabled

20.导航

nav   导航的基础样式

nav-tabs  table标签页

nav-pills   胶囊式

nav-stacked     让导航竖着排并沾满基于pills

nav-justified     一行铺满基于pills

21.选项卡

1.导航对应的所有内容需要放到一个class为tab-content的层理面

2.每一个内容块都要加上一个名为tab-pane的class,并且给对应的默认显示的内容添加一个active的class

3.给每一个导航的a标签加一个data-toggle="tab"

4.给每一个内容添加一个id

5.给每一个导航的a标签添加一个锚点。

22.导航条

navbar      导航条的基础样式,给nav标签

nav navbar-nav       导航条里菜单的固定样式组合class,给ul标签

navbar-default          导航条的默认样式,给nav标签          navbar-inverse         与navbar-default相对,它是黑色的样式。

navbar-static-top     使导航条变成直角,给nav标签

navbar-fixed-top/bottom         使导航条固定在窗口上,给nav标签,需要给body设一个padding,让出上面的位置。

navbar-header          导航的头部,一般情况下来访logo,作为a标签的外包div

navbar-brand   用来放logo的,给a标签用需要配合navbar-header来使用。

注意:需要把nav标签放在container的外面。防止在缩小页面的时候会出现变长的情况。

navbar-left:表示内容左对齐

navbar-right:表示内容右对齐

navbar-link:针对导航条中的链接,让链接中的文字颜色变得和导航颜色一致。给a标签使用

navbar-text:在导航当中加入一段文字,但是文字没有垂直居中,这时候使用它。用于a,p标签

navbar-btn:如果导航里只有一个按钮,那给他加一个navbar-btn,才能使他居中。

注意:如果导航中有form,那就需要给form添加一个navbar-form,想让他们在一行显示,就要添加一个navbar-left

23.路径导航与分页

breadcrumb:面包屑导航,给ul标签呈现html\css\js这种样式。

分页:

pagination:给ul标签pagination-lg/md/sm,没有xs的。

翻页:

pager:给ul标签

&larr;上一页&rarr;下一页                       previous:在右侧,表示上一页,给li

next:在左侧,表示下一页,给li

24.标记与巨幕

标记:

badge:有一个背景色,用于数字,给span标签

巨幕:

jumbotron:有巨大的背景图,和导航一样,如果想让巨幕铺满整个屏幕,让jumbotron在container外面就行了。用于div

25.缩略图与警告框

缩略图:

thumbnail:给a标签,一般是a中有一个很大的img,用过之后给图片加上圆的白色边框和边距。

caption:给div,可以加一些内边距。

警告框:alert:给p标签使用,加背景颜色用alert-success/info/warning/danger

<button class="close" data-dismiss="alert">&times;</button>

26.进度条

progress:外面的div用

progress-bar:里面的div用,但是需要给他一个宽度,progress-bar-info/warning/success

注意:想有动态的进度条给里面的div加progress-bar-striped(这是一个样式)和active就ok了。

27.图文混排

media       图文混排 外层div

media-left         图片在左侧显示 带img的a标签

media-right      图片在右侧显示     带img的a标签

media-middle  图片垂直中间对齐 带img的a标签

media-bottom 图片垂直底部对齐  带img的a标签

media-body      内容区域

media-heading         内容区域的标题黑h1等标签使用。

28.列表组

list-group:列表组,给ul添加

list-group:列表项,给li添加

注意:给每个列表项添加一个标记,那这个标记就会自动跑到右侧。

用a标签做的列表组,可以添加激活状态,禁用状态,背景色都可以添加

添加标题与段落的列表组

列表则标题:list-group-item-heading

列表组内容:list-group-item-text

29.面板

panel:面板

panel-heading:面板的头部

panel-body:面板的内容

panel-default:面板默认样式

panel-title:面板头部区域标题的样式

panel-primary:蓝色的头部

panel-success:绿色的头部

30.弹出层

注意:

1.弹出层必须放在body里

2.弹出层里面不能在嵌套别的层

3.弹出层出来以后,页面的滚动条会被覆盖。

结构

modal弹出层父级

modal-dialog弹出层

modal-content弹出层内容区域

modal-header弹出层头部

modal-body弹出层主体

modal-footer弹出层底部

fade 让弹出层有一个运动的效果,给modal添加

modal-lg/md/sm/xs是用来设置弹出层的尺寸,他必须给modal-dialog的层。

31.滚动监听

1.谁要滚动就要给他添加data-spy="scroll"

并且需要添加一个data-target,这个值要与导航的父级相关联

2.给导航的父级添加一个id或者class,要与要滚动的元素的data-target相关联,并且要添加一个navbar-collapse

3.导航里面的每个a标签都需要添加上一个锚链接,这样的话,才能与滚动对上号。

4.果冻区域的内容的标题要添加上相应的id,用于导航的锚链接对应。

32.提示标签

a标签class='tool' data-placement='left/right/botton/top' title='要显示的内'

js

$('.tool).tooltip();

$('.tool).tooltip('show');想让他之前就显示出来

32.提示框

1.给要点击的那个元素添加一个data-toggle=‘collapse’,并且需要给他添加一个data-target,让他的值与对应的内容区域的id或者class相同

2.给对应的内容区域加一个id或者class,与点击的元素相对应

3.注意

1.内容区域不能有padding的值,

33.提示框组

1.把所有的面板都放在一个父级里,并且给父级添加一个panel-group,还有一个id

2.给药电机的元素添加一个data-parent属性,并让他的值与父级的id一样

3.需要给内容区域添加一个class为collapse

bootstrap自学总结不间断更新的更多相关文章

  1. react自学笔记总结不间断更新

    React React 是由Facfbook维护的一套框架,并且引用到instagram React只是我们熟悉MVC框中的V层,只是视图层面的一个框架,只有俩个半api(createClass,cr ...

  2. asp&period;net mvc bootstrap datatable 服务端分页 更新槽糕的代码【1】

    datatable 服务端分页 因项目需求变动,需处理大量数据,更改成服务端分页,自己两天的学习笔记 datatable 1.10.7 百度云下载  密码:0ea1 先上图[ jqueryui风格] ...

  3. GitHub托管BootStrap资源汇总(持续更新中…)

    Twitter BootStrap已经火过大江南北,对于无法依赖美工的程序员来说,这一成熟前卫的前端框架简直就一神器,轻轻松松地实现出专业的UI效果.GitHub上相关的的开源项目更是层出不穷,在此整 ...

  4. C&sol;C&plus;&plus;语言,自学资源,滚动更新中&hellip&semi;&hellip&semi;

    首先要说<一本通>是一个很好的学习C/C++语言的自学教材. 以下教学视频中,缺少对"字符串"技术的讨论,大家注意看书.         一维数组,及其举例:(第四版) ...

  5. java视频教程 Java自学视频整理&lpar;持续更新中&period;&period;&period;&rpar;

    视频教程,马士兵java视频教程,java视频 1.Java基础视频 <张孝祥JAVA视频教程>完整版[RMVB](东西网) 历经5年锤炼(史上最适合初学者入门的Java基础视频)(传智播 ...

  6. oracle数据库自学笔记(持续更新中……)

    以前的项目都是使用mysql数据库开发的,如今进了新的公司,开始接触到了Oracle数据库,而自己以前没有接触过,就自己挤时间来学习一下. 一.关系型数据库的概念 关系型数据理论由E.F.Codd博士 ...

  7. Bootstrap自学笔记

    <!DOCTYPE html><html lang="zh-cn"> <head> <meta charset="utf-8&q ...

  8. PHP面向对象的魔术方法&period;png(不间断更新)

  9. 备战NOIP每周写题记录(一)&&num;183&semi;&&num;183&semi;&&num;183&semi;不间断更新

    ※Recorded By ksq2013 //其实这段时间写的题远远大于这篇博文中的内容,只不过那些数以百记的基础题目实在没必要写在blog上; ※week one 2016.7.18 Monday ...

随机推荐

  1. java制作验证码

    建立一个web工程

  2. SaaS模式给用户带来的优势

    这两年SaaS服务在中国越来越受欢迎,企业正在从使用本地化软件向SaaS服务转变.由于企业用户人力成本的上升.移动终端设备的兴起以及共享经济对企业的影响,企业采用经营设备.软件的方式也在逐渐发生着变化 ...

  3. redis系列-redis的连接

    Redis 是完全开源免费的,遵守BSD协议,先进的key - value持久化产品.它通常被称为数据结构服务器,因为值(value)可以是 字符串(String), 哈希(Map), 列表(list ...

  4. 2&period;交通聚类 -层次聚类(agnes)Java实现

    1.项目背景 在做交通路线分析的时候,客户需要找出车辆的行车规律,我们将车辆每天的行车路线当做一个数据样本,总共有365天或是更多,从这些数据中通过聚类来获得行车路线规律统计分析. 我首先想到是K-m ...

  5. 使用 IntraWeb &lpar;41&rpar; - 数据控件速查

    TIWDBCheckBox 所在单元及继承链: IWDBStdCtrls.TIWDBCheckBox 主要成员: property AutoEditable: Boolean //根据 DataSou ...

  6. &lbrack;转&rsqb;Python格式化输出

    今天写程序又记不清格式化输出细节了……= =索性整理一下. python print格式化输出. 1. 打印字符串 print ("His name is %s"%("A ...

  7. 洛谷P2014 TYVJ1051 选课

    题目描述 在大学里每个学生,为了达到一定的学分,必须从很多课程里选择一些课程来学习,在课程里有些课程必须在某些课程之前学习,如高等数学总是在其它课程之前学习.现在有N门功课,每门课有个学分,每门课有一 ...

  8. 利用KMeans聚类进行航空公司客户价值分析

    准确的客户分类的结果是企业优化营销资源的重要依据,本文利用了航空公司的部分数据,利用Kmeans聚类方法,对航空公司的客户进行了分类,来识别出不同的客户群体,从来发现有用的客户,从而对不同价值的客户类 ...

  9. Java 8 vs&period; Scala(二):Stream vs&period; Collection

    [编者按]在之前文章中,我们介绍了 Java 8和Scala的Lambda表达式对比.在本文,将进行 Hussachai Puripunpinyo Java 和 Scala 对比三部曲的第二部分,主要 ...

  10. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...