Bootstrap

最新推荐文章于 2024-01-24 23:17:06 发布

super__丹

最新推荐文章于 2024-01-24 23:17:06 发布

阅读量172

点赞数

文章标签： BootStrap

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	两端对齐，在上面基础上添加

https://blog.csdn.net/xgy123xx/article/details/81349710#1checkbox%E5%A4%9A%E9%80%89%E6%A1%86 [转于此]

super__丹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap

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

扫一扫