BootStrap - 思维导图

简介

Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的是一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。

特点

跨设备、跨浏览器响应式布局提供的全面的组件内置 jQuery 插件支持 HTML5、CSS3 HTML5 语义化标签和 CSS3 支持 LESS 动态样式

搭建bootstrap环境:

下载bootstrap环境, 包含css文件夹, js文件夹, fonts文件夹爱

将下载的环境, 解压, 引入到项目中!

在HTML中, 引入三个必要的文件:

1. 引入jquery.js - 2. 引入bootstrap核心JS脚本文件 - 3. 引入bootstrap核心CSS样式文件

默认页面样式:

Bootstrap 将全局 font-size 设置为 14px， line-height 行高设置为 1.428 em(即20px)；段落元素被设置 , 上下外边距等于 1/2 行高(即 10px)；颜色被设置为#333。兄弟连Java-Bootstrap 框架教程兄弟连Java-Bootstrap 框架教程 //段落突出兄弟连Java-Bootstrap 框架教程

标题样式:

bootstrap 对h1 - h6 标签进行了样式的重构!

<small><small>添加副标题

案例:

一二三四五, 上山打老虎一二三四五, 上山打老虎一二三四五, 上山打老虎一二三四五, 上山打老虎一二三四五, 上山打老虎一二三四五, 上山打老虎

设置内容对齐

通过指定元素的class:

text-left : 居左

text-center : 居中

text-right : 居右

text-justify: 两端对其

text-nowrap : 不换行

案例: 一二三四五一二三四五一二三四五

大小写转换文本

通过指定元素的class:

text-lowercase : 内容中的英文字母全小写显示

text-uppercase : 内容中的英文字母全大写显示

text-capitalize : 单词首字母大写

案例:

案例: 全部小写:assdfghgWEWTRTHRD 全部大写:assdfghgWEWTRTHRD 单词首字母大写:assd fghgWEWT aTHRD

列表排版

list-unstyled : 取消前置文字和图标,并取消左内边距!

list-inline : 取消前置文字和图标, 列表项并横向排列

代码块

bootstrap 对h1 - h6 标签进行了样式的重构!

//内联代码 <section> //用户输入 press ctrl + , //代码块 <p>public static void toString...</p> BootStrap代码块 Bootstrap 还列举了表示标记变量，表示程序输出，只不过没有重新复写 CSS。

<small><small>添加副标题

案例:

//内联代码 <section> //用户输入 press ctrl + , //代码块 <p>public static void toString...</p> BootStrap代码块 Bootstrap 还列举了表示标记变量，表示程序输出，只不过没有重新复写 CSS。

文本前景色 (文本颜色)

text-muted 柔和灰

text-primary 主要蓝

text-success 成功绿

text-info 信息蓝

text-warning 警告黄

text-danger 危险红

概要

案例: 文本前景颜色日赵/香/炉生紫烟 - 柔和灰锄禾日当午汗滴和下土 - 主要蓝复方草珊瑚含片 - 成功绿夕阳西下 , 断肠人在舔吖 - 信息蓝停车坐爱枫林晚 - 警告黄霜叶红于二月花 - 危险红

文本后景色 (背景颜色)

bg-primary 主要蓝

bg-success 成功绿

bg-info 信息蓝

bg-warning 警告黄

bg-danger 危险红

概要

案例: 文本后景颜色锄禾日当午汗滴和下土 - 主要蓝复方草珊瑚含片 - 成功绿夕阳西下 , 断肠人在舔吖 - 信息蓝停车坐爱枫林晚 - 警告黄霜叶红于二月花 - 危险红

表格样式:

基本表格样式

给table标签添加class属性: table

编号姓名特点出场费 10001 成轩七大货号,财大器粗 500 10002 王帅短小经干,软的惊天 800 10003 王富擅长用手,心黑手辣 500 10004 李正小溪留长,坚挺有序 500

条纹表格样式

table table-striped

边框表格样式

table table-bordered

光标悬停切换后景色

table table-hover

概要

颜色设置: (暂时使用到tr上)

active 鼠标悬停在行或单元格上

注意:加上此属性的表示单元格的属性是可以活动的

success 标识成功或积极的动作

info 标识普通的提示信息或动作

warning 标识警告或需要用户注意

danger 表示危险或潜在的带来负面影响的动作

sr-only 隐藏的

注意:颜色会不相同

文字图标样式

class参考页面: https://v3.bootcss.com/components

案例

注意: 这些图标, 都是文字, 可以通过文字的css样式 , 来对其进行修改样式 , 例如: 可以通过color 修改图标的颜色!

按钮

按钮点击样式, 需要指定class为: btn

建议使用如下四个标签, 进行按钮的样式设置:

a 超链接标签

button 按钮标签

input标签 type属性为button

span 标签建议使用

案例:

示例按钮示例按钮示例按钮

按钮颜色样式:

btn-default 默认样式

btn-success 成功样式

btn-info 一般信息样式

btn-warning 警告样式

btn-danger 危险样式

btn-primary 首选项样式

案例:

示例按钮示例按钮示例按钮示例按钮示例按钮示例按钮示例按钮示例按钮

按钮尺寸样式

btn-lg 大按钮

btn-sm 小按钮

btn-xs 小小按钮

btn-block 块级按钮占一行

案例:

大示例按钮普通示例按钮小示例按钮极小示例按钮块级示例按钮

激活与禁用按钮

active : 被点击时的样式 !

disabled: 禁用样式, 点击没有视觉效果, 且无法触发点击事件!

案例:

示例按钮激活按钮禁用按钮

表单(输入组件)样式

如果一个input标签, 想要使用bootstrap的样式, 那么必须指定type属性!

独占样式

在form表单中, 给输入组件(input,select)指定class : form-control 即可实现独占样式:

案例:

内联样式

当屏幕宽度小于768px时(手机屏幕),会独占一行 !

给form指定class : form-inline

案例:

内联样式

组合输入框

将一组元素组合为一个输入组件, 为我们的输入框, 添加前置和后置的元素 !

案例: 帐号帐号

步骤

步骤: 1. 给form表单标签添加 class属性值: form-group 2. 在form表单标签内部, 使用div标签, 将组合输入框中多个元素包含! 并指定此div的class属性值为: input-group 3. 给输入框前后的元素, 添加class属性值为: input-group-addon

输入组件 - 校验状态

修改元素的class 来提示用户输入是否正确

1. 给输入组件 , 添加一个父元素div

2. 给父元素添加class:

has-error : 输入状态错误

has-success : 输入状态成功

has-warning : 输入状态警告

案例

function x(input){ if(input.value.length>6){ //可用 input.parentNode.className="has-success"; }else{ //不可用 input.parentNode.className="has-error"; } }

输入框尺寸

指定输入框的class属性值:

input-lg : 大输入框

input-sm : 小输入框

组合输入框调整尺寸:

需要将class属性值添加给父div(这里的父div指的是class值为input-group的元素)

form-group-lg : 大组合输入框

子主题 3

栅格系统

是Bootstrap提供的一套用于响应式, 移动设备优先的流式栅格系统 !栅格系统, 将屏幕横向等分为12份, 我们可以通过栅格系统, 调整元素占用网页的横向空间!

栅格容器

栅格需要为页面内容包裹一个容器 !

100%宽度的容器: class:container-fluid

固定宽度的容器: class:container

栅格中行和列

步骤1

1. 创建栅格系统, 响应行

步骤2

2. 指定行中的每一个元素 , 占用的列数 ! ...

栅格系统尺寸

栅格偏移

偏移量: 在原有位置的基础上, 向右挪动几个列 !

通过指定栅格偏移的方式, 来让中间保持空隙!

在一行中的每一个元素上, 添加class: class = "尺寸前缀-offset-数字";

案例:

栅格移动

栅格移动后, 会覆盖显示 !

指定栅格向左移动:class=尺寸前缀-pull-列数

指定栅格向右移动:class=尺寸前缀-push-列数

案例

案例: 1 2

栅格嵌套:

栅格系统图片显示不完全问题

在栅格系统中, 每一个格被指定了宽度, 每一个格中存在img标签, 过于大的图片, 会溢出显示 !

p

给每一张图片, 单独添加一个父元素div , 并指定div的class=thumbnail

p

响应式 - 隐藏显示

小屏幕下, 显示不带空格的文本

大屏幕下, 显示带有空格的文本

概要

窗前明月光 , 上山打老虎窗前明月光 , 上山打老虎

下拉菜单

使用步骤

使用步骤: 1. 创建一个下拉菜单的容器 (div) , 指定class = dropdown | dropup 2. 在容器中, 添加两个子元素 - 第1个子元素, 用来编写下拉的按钮 - 第2个子元素, 用来编写下拉的列表(ul/ol) 3. 在下拉按钮上, 添加元素属性: data-toggle = dropdown , 在按钮元素的内部,添加空的子元素span, 这个span 的class为caret (下拉箭头) 4. 在下拉列表上, 添加class=dropdown-menu, 每一个列会自动隐藏 5. 列表中的每一列必须是一个超链接, 否则无法显示正确的样式 ! 可以将选项(li标签)的class设置为 dropdown-header ,来制定选项头

案例

案例: 选择技师技师排行王帅-冰魄淫针李帅-黯然销魂指成轩-胸大无脑王帅-冰魄淫针李帅-黯然销魂指成轩-胸大无脑

普通下拉菜单的样式调整

设置向上触发

菜单项居右对齐，默认是居左

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

设置菜单的分割线

设置菜单的禁用项

让菜单默认显示

分裂式下拉菜单 - 按钮组合下拉菜单

步骤

步骤: 1. 先编写一个普通的下拉菜单 2. 修改下拉菜单的div容器, class = btn-group 3. 在下拉菜单的按钮之前, 添加新的元素

案例:

哈哈哈技师排行王帅-冰魄淫针李帅-黯然销魂指成轩-胸大无脑王帅-冰魄淫针李帅-黯然销魂指成轩-胸大无脑

分裂式下拉菜单 - 输入框组合下拉菜单

步骤

步骤: 1. 编写一个普通的下拉菜单 , 将菜单的class从dropdown更改为input-group-btn 2. 给下拉菜单编写一个兄弟元素 ,输入框 3. 给输入框和下拉菜单添加一个父div , 指定class为input-group

案例:

案例: 选择技师技师排行王帅-冰魄淫针李帅-黯然销魂指成轩-胸大无脑王帅-冰魄淫针李帅-黯然销魂指成轩-胸大无脑

巨幕

巨幕组件用于增加其中的文本大小!

给一个div 添加class= jumbotron;就可以实现巨幕效果

案例: 不忘初心, 方得始终, 靡不有初 , 鲜克有终靡不有初: 很多人很容易下定决心, 去做一件事情 鲜克有终:很少有人能真正的坚持到最后 !

导航组件

使用ul | ol 来完成导航的编写

基本导航

给ul设置class = nav

案例: 首页日韩欧美港澳成轩专版

横向排列的导航组件

案例: 首页日韩欧美港澳成轩专版

横向撑满父容器的导航

导航中的所有菜单, 占满父元素宽度, 当屏幕大小过于小时, 单个菜单占一行 !

案例: 首页日韩欧美港澳成轩专版

给ul/ol设置class = nav nav-tabs nav-justified

横向胶囊导航

给ul/ol设置class = nav nav-pills

案例: 首页日韩欧美港澳成轩专版

与普通导航相比，有圆角，选项与选项之间有分割线

垂直胶囊导航

给ul/ol设置class = nav nav-pills nav-stacked

案例: 首页日韩欧美港澳成轩专版

导航加下拉菜单

将上述所学习的所有导航中的li标签. 当作之前学习的下拉菜单的父元素div 即可 !(下拉菜单中按钮更改为了超链接, 且取消了按钮样式)

案例: 首页日韩王帅-冰魄淫针李帅-黯然销魂指成轩-胸大无脑王帅-冰魄淫针李帅-黯然销魂指成轩-胸大无脑欧美港澳成轩专版

内容切换导航菜单

步骤

步骤: 1. 创建一个导航组件 2. 创建一个内容组件的容器 div , class指定为tab-content 3. 在内容组件div中 ,添加一个个的内容选项卡 div - 内容选项卡必须指定id属性 - class必须为:tab-pane fade - 首选项需要指定class为:tab-pane fade in active 4. 修改导航组件中的每一个超链接 , 给超链接添加跳转地址为: 内容选项卡的#id (跳转锚点) 5. 在每一个超链接中, 添加属性: data-toggle="tab"

案例

案例: 首页日韩欧美港澳成轩专版我们的宗旨: 做一个免费的,好用的网站! 下载日韩合集在线高清播放    高清无码直播开通超级会员下载欧美合集在线高清播放    高清无码直播开通超级会员下载港澳合集在线高清播放    高清无码直播开通超级会员下载成轩岛国流浪记下载成轩修一本道    下载成轩东京一热下载成轩加勒比系列    下载成轩仙人掌系列下载成轩时间停止系列    下载成轩放学别走系列在线高清播放    高清无码VR直播免费体验超级会员权限,,指哪成轩就弄哪

附加导航

即通过栅格系统, 实现左右两个div的分割:

步骤

步骤: 1. 通过栅格系统, 实现左右两个div的分割: - 左边一个div , 用来做导航 - 右边一个div , 用来展示内容 - 分割的比例, 自己随意 ! 建议: 2:10 3:9 2. 编写导航div - 在div中添加导航组件 (垂直胶囊 class:nav nav-pills nav-stacked) - 给导航的ul添加属性: data-spy="affix" - 给第一个导航li,添加class=active - 给导航的div 添加id属性 3. 编写内容div ,在每一个需要跳转的位置, 添加锚点即可 ! (给元素添加id属性) 4. 修改导航中超链接的地址为: 每一个跳转的#锚点id 5. 需要将导航组件绑定到body中

案例

首页日韩欧美港澳成轩专版首页章节此处省略一屏幕内容日韩章节此处省略一屏幕内容欧美章节此处省略一屏幕内容港澳台章节此处省略一屏幕内容成轩专版此处省略一屏幕内容

导航条 nav

一般用于设置网页顶部 / 底部的导航菜单

步骤

步骤: 1. 创建一个导航条nav 标签, class指定:navbar navbar-default 2. 在导航条中,添加标题div,指定class=navbar-header,添加子元素span, 指定class=navbar-brand导航标题 ITXDL.CN 3. 在导航条中, 添加子元素ul ,并指定class=nav navbar-nav, 完成导航中菜单的编写, 首页 JAVA PHP UI H5 论坛

案例

ITXDL.CN 首页 JAVA PHP UI H5 论坛

导航条固定位置

nav的class=navbar navbar-default navbar-fixed-top

nav的class=navbar navbar-default navbar-fixed-bottom

静态导航条 (去掉圆角, 与网页等宽)

只能设置顶部

nav的class=navbar navbar-default navbar-static-top

面包屑导航条 (路径导航条)

给ul设置class = breadcrumb 最后一个li , 指定class=active , 取消其中的超链接

案例

itdage.cn java20 第16天笔记

分页标签

多页分页

编写一个ul , 给ul添加class = pagination ,就可以实现多页分页标签

代码案例: 上一页 1 2 3 ... 下一页上下翻页

左右分离上下翻页

上下翻页

编写一个ul,class指定为pager , 包含两个li

左右分离上下翻页

在上下翻页的基础上, 给li添加属性:

左侧li: class="previous"

右侧li: class="next"

标签

span元素, 指定class = label label-default

徽章

span元素, 指定class = badge

弹出窗

使用超链接, 添加按钮样式, 并在超链接中, 添加弹出窗体的属性:

点击弹出 $("#xdl").popover();

data-html : 属性值为boolean类型, 表示是否支持在弹出的窗体中显示html元素.

data-placement: 设置弹出的窗体方向,默认为top, 取值:top|bottom|left|right

title : 设置弹出窗体的标题

data-content: 设置弹出窗体的内容

data-trigger: 指定事件类型, 在事件发生时, 窗体弹出

data-toggle="popover"

编写完毕这个超链接, 需要给超链接添加id, 用于在网页加载完毕时, 初始化弹出窗 !

$("#超链接id").popover();

警告框

特点

带有关闭按钮的窗体, 不漂浮, 占用网页空间, 关闭后不占用任何的网页空间 !

步骤:

1. 编写一个div , 指定class=alert alert-success 2. 正常编写弹出的文本内容 3. 在div中添加一个子元素(用于展示关闭按钮), 包含关闭文本提示 ,指定class=close , 指定data-dismiss="alert"

案例:

欢迎访问成轩专版网站, 现在注册, 就送1年会员!!!

特殊按钮

开关按钮

给普通的按钮样式, 指定属性: data-toggle="button"

开关按钮

单选按钮

步骤

步骤: 1. 编写一个div , 包含多个按钮样式! 2. 给这个div添加class=btn-group , 添加属性data-toggle="buttons" 3. 修改按钮样式(span)中的文本为 input标签,且type属性为radio

案例

请选择你的性别: 男女妖轩

复选按钮

与单选按钮, 基本一致, 只是将input标签的type属性更改为了:checkbox

案例: 请选择你的爱好: 男女妖轩

加载切换按钮

步骤

实现步骤: 1. 给按钮添加属性: data-loding-text="加载数据时显示的文本"; 2. 给元素添加点击事件 , 在事件的处理代码中: - 找到元素的jquery对象, 调用button函数, 传入"loading" !(开启按钮加载状态) - 通过一些技术(ajax), 加载数据! 3. 在加载数据完毕时, 继续调用button函数, 传入"reset"

案例

案例: 点击加载高清无码资源 function x(span){ $(span).button("loading"); //模拟数据加载 setTimeout(function(){ $(span).button("reset"); },5000); }

折叠面板

步骤

步骤: 1. 创建一个可供折叠的面板 div , class属性为:collapse , 此div必须指定id属性! (这个div中的内容就是被折叠的内容) 2. 创建一个按钮, 指定data-toggle="collapse" , 指定data-target="#面板id"

案例

案例: 点击展开一代武术宗师成轩开门收徒成轩每天带着弟子: 练习铁裆功成轩每天带着弟子: 练习武术招式老树盘根成轩每天带着弟子: 练习武术招式葵花宝典

图片轮播组件

组成

一个图片轮播组件共分为四部分: 1. 整体的容器 div 2. 轮播图片组 3. 左右翻页的箭头组件 4. 对应图片下标的小圆点

步骤

编写步骤: 1. 编写一个div,用于做整个轮播组件的容器: - 给这个div 指定id - 添加class="carousel slide" - 指定data-toggle="carousel" - 指定宽高 - [可选设置]:设置自动切换:data-ride="carousel" - [可选设置]:设置自动切换的间隔毫秒时间(默认5000):data-interval="毫秒数字"; 2. 给第一步编写的div , 添加子元素 div: - 指定class="carousel-inner" - 添加子元素(轮播的一个个的图片),子元素为div , class为item,div中包含一个img标签 - 给默认显示的div设置class为 item active 3. 在上述div下, 编写两个超链接,连接地址为#轮播组id 指定左超链接属性: data-slide="prev" class="carousel-control left"; 指定右超链接属性: data-slide="next" class="carousel-control right"; 4. 在上述超链接下面 , 编写一个ul: - class="carousel-indicators"; - 对应图片数量, 添加li , - 指定li的 data-target="#轮播组id" - 指定li的 data-slide-to="对应图片的索引值" - 给默认的li , 设置class=active

案例

案例: p p p p p p p