Bootstrap框架介绍

Bootstrap框架介绍什么是相应式页面or自适应页面？1.Bootstrap使用方法1.1下载1.2复制基本模板2.基本模板3.组件和插件有什么区别？3.全局CSS样式3.1 布局容器3.2 栅格系统3.3 表格table3.4 表单Bootstrap框架介绍Bootstrap 是基于 HTML、CSS、javascript 的，它...

小青头

6966人浏览 · 2018-08-01 22:50:02

小青头 · 2018-08-01 22:50:02 发布

BootStrap框架介绍

Bootstrap 是基于 HTML、CSS、javascript 的，它简洁灵活，使得 Web 开发更加快捷。它用于响应式布局，移动设备优先的WEB项目。

什么是相应式页面or自适应页面？

该页面不仅可以在电脑上正常显示，在手机上也能自动调整，使页面正常显示。

1.Bootstrap使用方法

1.1下载

官网：http://www.bootcss.com/
下载后为一个压缩文件，解压后就是bootstrap本体啦

1.2复制基本模板

将解压后文件复制到自己的工作文件夹中，然后，建立一个index.html，将官网顶端导航栏起步，进入后找到基本模板，全部复制到index.html中，以后就根据需求来修改。

2.基本模板

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

解释：
以最高的ie浏览器渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge">

视口设置：移动设备有限支持移动端在多个设备上适应 pc iphone 安卓（只要牵扯到移动端）
<meta name="viewport" content="width=device-width, initial-scale=1">

必须引入bootstrap，本地有，就可以修改直接使用本地的bootstrap框架

<!-- Bootstrap -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

为了兼容IE9，让其支持响应式。如果想使用，取消注释

 <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

使用bootstrap插件，必须使用jquery，再引用bootstrap内部查找

  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">

3.组件和插件有什么区别？

在官网中，我们可以看到组件、和插件两个名词。
组件：系统中一种物理的、可代替的部件、它封装了实现并提供了一系列可用的接口。组件就是对象，是对数据和方法的简单封装。
插件：插件是一种遵循一定规范的应用程序接口编写出来的程序。WEB浏览器能够直接调用插件程序，用于处理特定类型的文件。
组件和插件的区别是，插件是属于程序接口的程序

3.全局CSS样式

sr-only类：将该标签隐藏掉
clearfix类：清除浮动

3.1 布局容器

在bootstrap中，最外层盒子必须有container类或者contain-fluid类

类	功能
container	固定宽度，并支持响应式布局的容器
container-fluid	100%宽度，占全部视口

解释：
container：width会随着页面大小变化而变化
contain-fluid：宽度是真个浏览器宽度

3.2 栅格系统

页面每行是由十二个格子组成，响应式布局就是根据设定的元素格子数，不同宽度的浏览器调整每行显示的格子数，来达到布局的效果
注意：
+ 栅格系统都被包裹在父元素为container类或者contain-fluid类
+ 先在盒子里创建一个row类的div代表每一行，在该div内再创建列（row类盒子只能包裹列类的盒子）
+ 每列都自动横向排布，且自带padding，若一行设置列超过12格，将另起一行排布
+ 根据不同的类型的列类来设置在不同的设备显示效果(为了保证每一列不超过屏幕大小)
+ col-xs-*,col-sm-*,col-md-*,col-lg-*分别代表手机、平板、显示器、大显示器。*则代表所需要设置的格子数，范围1,12
+ 列偏移.col-md-offset-*:使用.col-md-4 元素向右侧偏移了4个列的宽度。
+ 列嵌套：在列中可以再加row类的div，然后在里面加入列

栅格有什么作用呢？
比如说我们给一行中三个盒子添加col-md-4类，那么就会有三个相等宽的盒子排满一行，当屏幕宽度变小时，三个盒子宽度也在适应屏幕宽度，使排版好看；当屏幕宽度很小时，三个盒子就会各占一行。

3.3 表格table

以下类都直接添加到表格中就有样式了

类	作用
table	基本样式，设置了padding和水平方向分割线
table-striped	条纹状表格，tbody的每列灰白相间
table-bordered	带边框的表格，设置了边框线
table-hover	鼠标悬停，鼠标悬浮的列有阴影显示
table-condensed	紧缩表格,缩小padding

状态类
单独设置某一行或某个单元格样式

类	作用
active	悬停时所设置的单元格颜色
success	标识成功或积极动作（浅绿色）
info	标识普通的提示信息或动作（淡蓝色）
warning	标识警告或需要用户注意（浅黄色）
danger	标识危险或潜在负面影响的动作（淡红色）

响应式表格
在table类元素外层再包裹一个table-responsive类的元素。当屏幕页面变小时，会产生水平滚动条。（< 768px）

3.4 表单

为所有输入框添加label标签,不然内容要手动定位

类	作用
form-control	input,textarea,select元素宽度被设置为`width:100%`
form-group	用于包裹上面元素和`label`标签，可以得到更好的排布
form-inline	内联表单，添加到form元素类中，横向排布
form-horizontal	添加到form,让`form-group`类如同`row`效果，可以让`label`与控件水平排列

注意：使用form-horizontal想要水平排列时，需要将输入框放入盒子内，因为输入框宽度为100%

1.checkbox多选框

外层需要包裹一个checkbox类的盒子

2.radio单选框

外层需要包裹一个radio类的盒子

注意：如果需要选项处于不可选状态的样式，则需要在这个盒子再加一个disabled类

内联单选或者多选

在input标签外层套一个checkbox-inline类或radio-inline类的盒子，就可以使单选框或多选框可以横向排布（相当于把这个盒子转换为行内块）

注意：用label标签包裹单选或多选input标签时，label内没有文本的话，只适合用于非内联情况

3.select下拉列表

select类加一个form-control类（将空间铺满栅格），在select类加一个multiple属性，就可以使其变为多行显示选项，有垂直滚动条。

4.p段落

让p标签成为行内块，和其他元素在一行内，则加入一个form-control-static类

5.输入框

对input输入框border-radius圆角处理，而且设置disabled属性时，文本框禁用状态，文本框内容灰色显示。设置readonly，将文本框设置为只读状态，鼠标样式没有改变，文本框样式改变。
has-feedback为输入框添加图标。一般添加到右边，反馈图标。

控件尺寸
input-lg或input-sm类可以为控件设置高度;col-lg-*类可以为控件设置宽度。*代表数字1到12。
如果要是水平排版的控件，form-horizontal

3.6 按钮

类	功能
btn	添加至`a`,`button`,`input`,显示按钮样式
btn-default	默认样式（白色）
btn-primary	基础样式（天蓝色）
btn-success	成功样式（绿色）
btn-info	信息样式（淡蓝色）
btn-warning	警告样式（橙色）
btn-danger	危险样式（红色）
btn-link	链接（蓝色，鼠标悬浮有下划线，点击时有边框）

注意：导航和导航条只支持button标签的按钮

类	功能
`btn-lg`,`btn-sm`,`btn-xs`	分表表示大按钮、小按钮、超小按钮
`btn-block`	宽度设置为100%(父级元素宽度),按钮将变为块级元素
`active`	使按钮变为激活状态
`disabled`	禁用按钮

3.7 图片

类	功能
`img-responsive`	响应式布局
`center-block`	水平居中
`img-rounded`	圆角矩形
`img-circle`	圆
`img-thumbnail`	有padding和border的圆角矩形

3.8 文本颜色

p标签加入以下类

类	功能
text-muted	默认样式（白色）
text-primary	基础样式（天蓝色）
text-success	成功样式（绿色）
text-info	信息样式（淡蓝色）
text-warning	警告样式（橙色）
text-danger	危险样式（红色）

背景颜色

类	功能
bg-primary	基础样式（天蓝色）
bg-success	成功样式（绿色）
bg-info	信息样式（淡蓝色）
bg-warning	警告样式（橙色）
bg-danger	危险样式（红色）

3.9 显示警告信息

在一个盒子里加入alert便成为警告信息，再选择下面一个样式添加

类	功能
alert-success	成功样式（绿色）
alert-info	信息样式（淡蓝色）
alert-warning	警告样式（橙色）
alert-danger	危险样式（红色）

4. 组件

4.1 图标

官网有图标，找到对应的类，添加一个的span标签类中就可以使用。务必在图标和文本之间添加一个空格
示例：<span class="glyphicon glyphicon-arrow-right"></span>请继续下一步

4.2 下拉菜单

外层必须有一个有dropdown类的盒子包裹。

类	功能
dropdown	外层盒子类,下拉
dropup	外层盒子类，上拉
dropdown-toggle	下拉按钮开关
caret	箭头
dropdown-menu	`ul`的类，展开项
divider	`li`的类，分割线
dropdown-header	`li`的类，展开项内标题
disabled	`li`中禁用菜单

代码

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

4.3 按钮组

类	功能
`btn-group`	外层盒子类
`btn-group-lg/sm/xs`	设置内部按钮大、小、非常小
`btn-group-vertical`	设置按钮垂直排列
`btn-group-justified`	两端对齐

注意：使用两端对齐时，要有btn-group类。如果内部有button控件时，要包裹在btn-group盒子里

4.4 导航

类	功能
nav	设置为导航
nav-tabs	将导航设置为选项卡形式
nav-pills	设置为胶囊式
nav-stacked	设置为竖着的胶囊式
nav-justified	两端对齐，在上面基础上添加

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

云原生

所有评论(0)

查看更多评论

小青头

@xgy123xx

已为社区贡献1条内容