31、BootStrap

最新推荐文章于 2024-10-01 20:12:28 发布

chongjiao9528

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量84

点赞数

文章标签： javascript 人工智能前端 ViewUI

原文链接：https://my.oschina.net/u/4131739/blog/3065557

版权

Bootstrap:

概念：一个前端开发的框架，

框架：一个半成品软件，开发人员可以在框架基础上，再进行开发，简化编码

好处：1、定义了很多css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果

2、响应式布局，同一套页面可以兼容不同分辨率的设备

快速入门：

1、下载Bootstrap

2、在项目中将文件复制到

3、创建html页面，引入必要资源文件

响应式布局：

实现：依赖于栅格系统，将一行平均分成12个格子，可以指定元素占几个格子

步骤：1、定义容器。相当于之前的table

容器分类：1、container：两边留白

<div class="container"></div>

2、container-fluid：每种设备都是100%

<div class="container-fluid"></div>

2、定义行。相对于之前的tr 样式：row

<div class="row"></div>

3、定义元素。指定改元素在不同设备上，所占的格子数目。样式：col-设备代号-格子数目

设备代号：1、xs：超小屏幕手机（<768px）

2、sm：小屏幕 pad （>=768px）

3、md：中等屏幕笔记本（>=992px）

4、lg：大屏幕显示器（>1200px）

注意：1、一行种如果格子数目超过12，则超出部分自动换行

2、栅格类属性可以向上兼容，栅格类适用于与屏幕宽度大衣或等于分界点大小的设备

3、如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素占满一整行

<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
<div class="col-md-1"></div>
</div>
</div>

CSS样式和JS插件：

1、全局CSS样式

按钮：class= "btn btn-default"

图片：class ="img - responsive"图片在任意尺寸都占100%

class="img-rounded"方形

class = "img-circle"圆形

class = "img-thumbnail"相框

表格：table

table-bordered

table-hover

表单：form-control

2、组件