Bootstrap

Bootstrap 特点
1、简洁、直观、强悍的前端开发框架， html、 css、 javascript 工具集，让
web 开发更迅速、简单。
2、基于 html5、 css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，
卓越的兼容性，响应式设计， 12 列格网，样式向导文档。
3、自定义 JQuery 插件，完整的类库， bootstrap3 基于 Less， bootstrap4
基于 Sass 的 CSS 预处理技术
4、 Bootstrap 响应式布局设计,让一个网站可以兼容不同分辨率的设备。
Bootstrap 响应式布局设计，给用户提供更好的视觉使用体验。
5、丰富的组件

一.使用Bootstrap

html 中模板为



    
        
        
        
        
        
        Bootstrap 的 HTML 标准模板
        
        
    
    
        
        Hello, world!

说明：
（1） ViewPort 标记用于指定用户是否可以缩放 Web 页面
（2） width 和 height 指令分别指定视区的逻辑宽度和高度。他们的值
要么是以像素为单位的数字，要么是一个特殊的标记符号。
（3） width 指令使用 device-width 标记可以指示视区宽度应为设备
的屏幕宽度。
（4） height 指令使用 device-height 标记指示视区高度为设备的屏
幕高度。
（5） initial-scale 指令用于设置 Web 页面的初始缩放比例。默认的
初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在
浏览器中呈现出整个 Web 页面，设为 1.0 则将显示未经缩放的 Web 文档。

二、布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们
提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器
类不能互相嵌套。
1、 .container 类用于固定宽度并支持响应式布局的容器。

...

2、 .container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

...

三、栅格网格系统(Grid System)

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分 12 份(也有平分成 24 份或 32 份，但 12 份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。 Bootstrap 框架中的网格系统就是将容器平分成 12 份。

注意: 网格系统必须使用到 css
container、 row 、 xs (xsmall phones), sm (small tablets), md
(middle desktops) lg (larger desktops) 即: 超小屏(自动)，小屏
(750px)，中屏(970px)和大屏(1170px)
数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对
齐方式和内距(padding)。
在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容
器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如 12。如果大于
12,则自动换到下一行。
具体内容应当放置在列容器（column）之内

4 列

8 列

image.png

1、列组合
列组合简单理解就是更改数字来合并列（原则：列总和数不能超 12，大于
12,则自动换到下一行。），有点类似于表格的 colspan 属性。

2、列偏移、列排序
（1）列偏移
如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin
或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏
移也非常简单，只需要在列元素上添加类名"col-md-offset-*"(其中星号代表
要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素
上添加"col-md-offset-8"，表示该列向右移动 8 个列的宽度(要保证列与偏移
列的总数不超过 12，不然会致列断行|换行显示)。
（2）列排序
列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。
在 Bootstrap 框架的网格系统中是通过添加类名
"col-md-push-*" 和
"col-md-pull-*" (其中星号代表移动的列组合数)。往前 pull，往后 push。

3、列嵌套
Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或
者多个行（row）容器，然后在这个行容器中插入列.

四、排版
1、标题
Bootstrap 和普通的 HTML 页面一样，定义标题都是使用标签

到

,
只不过 Bootstrap 覆盖了其默认的样式，使用其在所有浏览器下显示的效果一
样。为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6
六个类名。
同时后面可以紧跟着一行小的副标题或使用.small

2、段落
段落是排版中另一个重要元素之一。通过.lead 来突出强调内容(其作用就
是增大文本字号，加粗文本，而且对行高和 margin 也做相应的处理。可以使用
以下标签给文本做突出样式处理：
:小号字
:加粗
:斜体

3、引用

：标签定义摘自另一个源的块引用，
使用.blockquote-reverse，实现右对齐。

:脚注
：表示对某个参考文献的引用

排版标题1副标题标题2副标题标题3 标题4 标题5 标题6 标签以后的你会感谢现在的自己以后的你会感谢现在的自己以后的你会感谢现在的自己好好学习 Java！本文出自大师之手 thinking in java

4、强调
定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强
调，具本说明如下：
.text-muted：提示，使用浅灰色（#999）
.text-primary：主要，使用蓝色（#428bca）
.text-success：成功，使用浅绿色(#3c763d)
.text-info：通知信息，使用浅蓝色（#31708f）
.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

5、文本对齐
在 CSS 中常常使用 text-align 来实现文本的对齐风格的设置。
其中主要有四种风格：
左对齐，取值 left ;
居中对齐，取值 center;
右对齐，取值 right ;
两端对齐，取值 justify。
为了简化操作，方便使用， Bootstrap 通过定义四个类名来控制文本的对齐
风格： .text-left：左对齐 .text-center：居中对齐 .text-right：右对
齐 .text-justify：两端对齐。

强调文本对齐提示效果主要效果成功效果信息效果警告效果危险效果 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。 Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于:HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

6. 列表
在 HTML 文档中，列表结构主要有三种：
无序列表(
...
)、
有序列表(
...
)、
定义列表(
...
...
)。
bootstrap 根据平时的使用情形提供了六种形式的列表:( 普通列表、有序
列表、去点列表、内联列表、描述列表、水平描述列表）。在样式方面
Bootstrap
只是在原有的基础上做了一些细微的优化(margin 调整),其他差别不大，加入
了一些样式:
（1）去点列表:
class="list-unstyled"

无序项目列表一

无序项目列表二

（2）内联列表:
class=" list-inline" 简单点说就是把垂直列表换成水平列表，而且去
掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

（3）定义列表:
在原有的基础加入了一些样式，使用样式
class=".dl-horizontal"制作水平定义列表 : 当标题宽度超过
160px时，将会显示三个省略号 bootstrap4
貌似有问题，看样子还是不稳定， bootstrap3 中的 css 没有问题。

7、代码
一般在个人博客上使用的较为频繁，用于显示代码的风格。在 Bootstrap
主要提供了三种代码风格：
（1）使用来显示单行内联代码
（2）使用
来显示多行块代码，样式 :
pre-scrollable
(height,max-height 高度固定,为 340px,超过存在滚动条)
（3）使用来显示用户输入代码,如快捷键
不管使用哪种代码风格，在代码中碰到小于号（<）要使用硬编码"<"来
替代，大于号(>)使用">"来替代。

列表代码等你下课我不配等你下课我不配等你下课我不配尚学堂中国最有良心的培训机构中国最有良心的培训机构速学堂 o2o 在线学习平台 o2o 在线学习平台尚学堂使用 bootstrap3 的 css 哦中国最有良心的一站式的 o2o 培训机构测试标题不能超过 160px 的宽度,否则 2 个点我在写一个水平定义列表的效果，我在写一个水平定义列表的效果尚学堂使用 bootstrap3 的 css 哦中国最有良心的一站式的 o2o 培训机构测试标题不能超过 160px 的宽度,否则 2 个点我在写一个水平定义列表的效果，我在写一个水平定义列表的效果 private void test() { System.out.println("Hello"); } private void test() { System.out.println("Hello"); } private void test() { System.out.println("Hello"); } private void test() { System.out.println("Hello"); } private void test() { System.out.println("Hello"); } private void test() { System.out.println("Hello"); } private void test() { System.out.println("Hello"); } private void test() { System.out.println("Hello"); } <h2>NIHAO</h2> 使用ctrl + s 快捷键保存 --------------------------------------------------------------------------------------------------------------------------------------------

8、表格

（1）样式:
Bootstrap 为表格提供了 1 种基础样式和 4 种附加样式以及 1 个支持响应式
的表格。在使用 Bootstrap 的表格过程中，只需要添加对应的类名就可以得到
不同的表格风格：
基础样式
1） .table：基础表格
附加样式\

.table-striped：斑马线表格\

.table-bordered：带边框的表格\

.table-hover：鼠标悬停高亮的表格
4). table-condensed：紧凑型表格，单元格没内距或者内距较其他表格
的内距更小
（2）提供了五种不同的类名，每种类名控制了行的不同背景颜色

image.png

表格分类ID 分类名称分类描述操作 1 手机数码手机数码类商品修改|删除 1 手机数码手机数码类商品修改|删除 2 电脑办公电脑办公类商品修改|删除 3 鞋靴箱包鞋靴箱包类商品修改|删除 4 家居饰品家居饰品类商品修改|删除

五、表单
表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让
网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、
单选按钮、复选按钮、文本域和按钮等。
1、表单控件
.form-control .input-lg（较大） .input-sm（较小）
（1）输入框
.form-control
（2）下拉选择框 select
多行选择设置： multiple="multiple"
（3）文本域 textarea

（4）复选框 checkbox
.checkbox，水平显示： .checkbox-inline

（5）单选择按钮
.radio，水平显示： .radio-inline

（6）按钮
1）使用 button 实现
基础样式: btn
附加样式： btn-primary btn-info btn-success btn-warning
btn-danger btn-link btn-default
2）多标签支持:使用 a div 等制作按钮

3）按钮大小
使用 .btn-lg、 .btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

4）按钮禁用
方法 1：在标签中添加 disabled 属性
方法 2：在元素标签中添加类名"disabled"
在 class 属性中添加 disabled 只是样式上禁用了，并不是真正的禁用
了此按钮！

表单1 姓名：姓名：姓名：姓名：城市：城市：简介：简介：爱好：唱歌跳舞 Rap 爱好：游戏1 游戏2 游戏1 游戏2 性别：男女性别：男女男女按钮

2. 表单案例

（1）水平表单:

同一行显示 form-horizontal

配合 Bootstrap 框架的网格系统

（2）内联表单：将表单的控件都在一行内显示 form-inline

注意 label 不会显示，存在的意义: 如果没有为输入控件设置 label 标签，

屏幕阅读器将无法正确识别。

表单邮箱密码记住密码邮箱密码记住密码

六、下拉菜单
在使用 Bootstrap 框架的下拉菜单时，必须使用两个 js

要点:

+-----------------------------------------------------------------------+
| 1、使用一个类名为 dropdown 或 btn-group 的 div 包裹整个下拉框:\ |
|
\ |
| 2、默认向下 dropdown，向上弹起加入 . dropup 即可\ |
| 3、使用 button 作为父菜单，使用类名: dropdown-toggle 和自定义 |
| data-toggle 属性\ |
| ----周杰伦---- 等你下课龙卷风夜曲 ----林俊杰---- 江南可惜没如果醉赤壁 ----陈奕迅---- 十年好久不见你的背包

Bootstrap-06(/2019/6/2)

Bootstrap

Hello, world!

三、栅格网格系统(Grid System)

到

高圆圆

高圆圆

高圆圆

高圆圆

带有 title 的面板标题

你可能感兴趣的:(Bootstrap-06(/2019/6/2))

分类ID	分类名称	分类描述	操作
1	手机数码	手机数码类商品	修改\|删除
1	手机数码	手机数码类商品	修改\|删除
2	电脑办公	电脑办公类商品	修改\|删除
3	鞋靴箱包	鞋靴箱包类商品	修改\|删除
4	家居饰品	家居饰品类商品	修改\|删除

Bootstrap-06(/2019/6/2)

Bootstrap

Hello, world!

三、 栅格网格系统(Grid System)

到

高圆圆

高圆圆

高圆圆

高圆圆

带有 title 的面板标题

你可能感兴趣的:(Bootstrap-06(/2019/6/2))

三、栅格网格系统(Grid System)