BootStrap入门篇

最新推荐文章于 2022-04-12 08:40:12 发布

3k油

最新推荐文章于 2022-04-12 08:40:12 发布

阅读量166

点赞数

分类专栏： # JavaEE 文章标签： bootstrap

本文链接：https://blog.csdn.net/sgx5666666/article/details/94412277

版权

JavaEE 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

Bootstrap：

Bootstrap：

1.概念:

一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。
好处：
- 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
- 响应式布局，同一套页面可以兼容不同分辨率的设备。

2. 快速入门

下载Bootstrap
将这css,fonts,js,三个文件夹复制到项目中
创建html页面，引入必要的资源文件
在bootstrap中文网的起步，找到模板，复制粘贴到html页面就可以了

bootstrap.css:正常版，格式良好。
bootstrap.min.css:压缩版，把所有回车，制表符，tab键都去掉了，代码在一行里面显示。体积小一点，速度快一些。

基本模板

<!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.jsdelivr.net/npm/bootstrap@3.3.7/dist/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.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

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

注意:
bootstrap是依赖于jquery的，所以你会看到引入的链接里有这个https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js

3.响应式布局

同一套页面可以兼容不同分辨率的设备。
实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。
步骤：

定义容器
<div class="container-fluid">(相当于之前的table)
容器分类：
1. container：两边留白
2. container-fluid：每一种设备都是100%宽度
定义行。
<div class="row">(相当于之前的tr)
定义元素。
<div class="col-md-12">(指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目)

设备代号：
1. xs：超小屏幕手机 (<768px)：col-xs-12
2. sm：小屏幕平板 (≥768px)
3. md：中等屏幕桌面显示器 (≥992px)
4. lg：大屏幕大桌面显示器 (≥1200px)

注意：

一行中如果格子数目超过12，则超出部分自动换行。
栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
向下是这样的:如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

4.CSS样式和JS插件

1. 全局CSS样式：

按钮：class=“btn btn-default”
图片：
- class=“img-responsive”：图片在任意尺寸都占100%
- 图片形状

<img src="..." alt="..." class="img-rounded">：方形
<img src="..." alt="..." class="img-circle"> ： 圆形
<img src="..." alt="..." class="img-thumbnail"> ：相框

表格
- table
- table-bordered
- table-hover
表单
- 给表单项添加：class=“form-control”

2. 组件：

导航条
分页条

3. 插件：

轮播图

个人总结:

对于bootStrap的学习，主要会看官方文档，使用各个组件就可以啦。
关键是会用栅格布局，还有一些经常使用到组件，插件。的比如，按钮，图片，表格，表单，导航栏，分页条，轮播图啦。

3k油

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BootStrap入门篇

文章目录Bootstrap：1.概念:2. 快速入门3.响应式布局4.CSS样式和JS插件Bootstrap：1.概念:一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。...
复制链接

扫一扫

专栏目录