BootStrap教程
Bootstrap思维导图如下
一、下载与使用
英文官网：http://getbootstrap.com/中文网站：Bootstrap中文网 (bootcss.com)
1、进入中文网站，选择版本 v3.4.1
2、下载完成后
拷贝 dist 文件夹到项目中 由于我们之后可能还会使用 LayUi 等其他插件，所以我们将 dist 改为 Bootstrap，方便辨认
3、将 jQuery.js 放入我们的 js目录下
因为 jQuery.js 并不属于 Bootstrap，所以我们放在 js 目录下
4、在 html 中模板为
Hello,world!
注意：
如果要使⽤Bootstrap的js插件，必须先调用 jQuery.js
说明：
viewport 标记⽤于指定用户是否可以缩放Web页面width 和 height 指令分别指定视区的逻辑宽度和⾼度。他们的值要么是以像素为单位的数字，要么是⼀个特殊的标记符号。width 指令使用 device-width 标记可以指示视区宽度应为设备的屏幕宽度。height 指令使用 device-height 标记指示视区⾼度为设备的屏幕⾼度。initial-scale 指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面，设为1.0则将显示未经缩放的Web⽂档。
Hello,world!
二、布局容器
1、.container
.container 类用于固定宽度并支持响应式布局的容器（网页两侧留白）
...
2、.container-fluid
.container-fluid 类用于 100% 宽度，占据全部视口 (viewport) 的容器（网页两侧不留白）
...
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid类 用于100%宽度，占据全部视口（viewport）的容器。
三、栅格网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。Bootstrap框架中的网格系统就是将容器平分成12份。
注意：
行（row）必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
具体内容应该放置在列容器 (column) 之内
col-屏幕尺寸-列数，其中屏幕尺寸有
xs(xsmall phones) 超小屏(自动)sm(small tablets) 小屏(750px)md(middle desktops) 中屏(970px)lg(larger desktops) 大屏(1170px)
四、排版与列表、表格
标题1副标题
标题2副标题2
标题3
通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而对行高和margin也做相应的处理
通过.lead 来突出
小号字
加粗或加粗
斜体或斜体
强调内容(其作用就是增大文本字号，加粗文本，而对行高和margin也做相应的处理
bootstrap 通过定义四个类名来控制文本的对齐风格；
左对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；
右对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；
居中对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；
hello 居中对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；
hi 居中对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；
居中对齐-bootstrap 通过定义四个类名来控制文本的对齐风格；
- 无序项目列表一
- 无序项目列表二
- 有序项目列表一
- 有序项目列表二
- HTML
- 超文本标记语言
- CSS
- 层叠样式表是一种样式表语言
- 无序项目列表一
- 无序项目列表二
- 无序项目列表一
- 无序项目列表二
- HTML 超文本标记语言
- HTML称为超文本标记语言，是一种标识性语言。
- 测试标题不能超过160px的宽度，否则后面两个点
- 我在写一个水平定义列表的效果，我在写一个水平定义列表的效果
this is simple code
this is simple code
this is simple code
this is simple code
使用ctrl + s保存内容
public class HelloWorld {
public static void main(String[] args) {
System.out.println("helloworld...")
}
}
<h2>你好</h2>
- ..............
- ..............
- ..............
- ..............
- ..............
- ..............
- ..............
- ..............
- ..............
- ..............
- ..............
- ..............
| JavaSE | 数据库 | JavaScript |
|---|---|---|
| 面向对象 | oracle | json |
| 数组 | mysql | ajax |
| JavaSE | 数据库 | JavaScript |
| 面向对象 | oracle | json |
| 数组 | mysql | ajax |
五、表单
1、表单控件
唱歌
跳舞
男
女
唱歌
跳舞
男
女
span标签
2、表单布局
基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：
向父元素==== 元素 添加 role=“form”
把标签和控件放在一个带有 class=“form-group” 的==
== 中。这是获取最佳间距所必需的
向所有的文本元素
、 、select 添加 class=“form-control”
六、缩略图
周杰伦
出生于北京市，中国内地影视女演员、模特。
喜欢
评论
周杰伦
出生于北京市，中国内地影视女演员、模特。
喜欢
评论
周杰伦
出生于北京市，中国内地影视女演员、模特。
喜欢
评论
周杰伦
出生于北京市，中国内地影视女演员、模特。
喜欢
评论
七、面板
明星合集
周杰伦
出生于北京市，中国内地影视女演员、模特。
喜欢
评论
周杰伦
出生于北京市，中国内地影视女演员、模特。
喜欢
评论
周杰伦
出生于北京市，中国内地影视女演员、模特。
喜欢
评论
周杰伦
出生于北京市，中国内地影视女演员、模特。
喜欢
评论
八、导航与分页导航
标签式的导航菜单
基本的胶囊式导航菜单
面包屑式导航菜单
分页导航
翻页导航
九、插件+js
1、下拉菜单
喜欢频道
2、模态框
好文推荐
您阅读本篇文章共花了：
发表评论