浅谈BootStrap(个人浅谈,欢迎来判)

最新推荐文章于 2023-06-28 09:24:43 发布

萌timo_队长

最新推荐文章于 2023-06-28 09:24:43 发布

阅读量533

点赞数

本文链接：https://blog.csdn.net/g752061842/article/details/79016497

版权

开门见山什么是BootStrap,具体释义在百度百科上有解释,很详细的总而言之就是是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷,

(一)基本使用:

详细的中文教程: http://www.runoob.com/bootstrap/bootstrap-tutorial.html

1.下载: 中文官网地址：http://d.bootcss.com/bootstrap-3.3.5.zip
GIT地址：https://github.com/twbs/bootstrap/archive/v3.3.6.zip

       2.目录结构:dist                 -----发布新版内容
            docs               ----- 文档，demo案例
                  fonts               ----- 字体（CSS3使用字体图标）
            grunt              ------js工厂命令行构建工具
            js                   ------ 模块js
            less                  ---- less源码（动态css技术）

   3.bootstrap/
      ├── css/
      │   ├── bootstrap.css                   //预定义的CSS文件
      │   ├── bootstrap.css.map               //CSS与less源码对应文件
      │   ├── bootstrap.min.css               //压缩
      │   ├── bootstrap.min.css.map
      │   ├── bootstrap-theme.css               //主题文件
      │   ├── bootstrap-theme.css.map
      │   ├── bootstrap-theme.min.css
      │   └── bootstrap-theme.min.css.map
      ├── js/
      │   ├── bootstrap.js                       //js
      │   └── bootstrap.min.js
      └── fonts/
├── glyphicons-halflings-regular.eot       //字体（字体图标）
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
      ├── glyphicons-halflings-regular.woff

└── glyphicons-halflings-regular.woff2

个人见解:

BootStrap 是在jQuery基础上工作的也可以理解成一个插件吧,也支持自定义开发,可以增前端框架的开发速度和样式的美观

是响应式布局的成功实现;什么是响应式布局,就是一套模板可以兼容多个终端使用而不需要单独开发对应的版本,我个人认为就是一个版本走天下

Bootstrap为了兼容不同的浏览器采用了jQuery,为了适配不同的终端采用了CSS3 Media Query(媒体查询)

4.简单模板讲解:(具体模板在上面教程链接里有)

<!DOCTYPE html>														[HTML5 约束（固定值）]
<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" />    [响应式开发必须使用，且必须在<head>前三行]
		<title>Bootstrap 模板</title>
                        
		<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">                   [预定义的CSS样式]           
		<script src="../lib/jquery/jquery-1.11.0.js"></script>                                           [基于jQuery]
		<script src="../lib/bootstrap/js/bootstrap.min.js"></script>                                 [Bootstrap 类库]

	</head>

	<body>
		<h1>你好，世界！</h1>
	</body>

</html>

5.完整模板(可直接使用)

<!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="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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 (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

布局容器

bootstrap需要为页面提供一个.container的容器提供两个容器如下

.container 类用于固定宽度并支持响应式布局的容器

.container-fluid 累哟浓郁100%宽度,占据全部视口的容器.

Bootstrap 网格系统（Grid System）？

Bootstrap 官方文档中有关网格系统的描述：

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

让我们来理解一下上面的语句。Bootstrap 3 是移动设备优先的，在这个意义上，Bootstrap 代码从小屏幕设备（比如移动设备、平板电脑）开始，然后扩展到大屏幕设备（比如笔记本电脑、台式电脑）上的组件和网格。

移动设备优先策略

内容
- 决定什么是最重要的。
布局
- 优先设计更小的宽度。
- 基础的 CSS 是移动设备优先，媒体查询是针对于平板电脑、台式电脑。
渐进增强
- 随着屏幕大小的增加而添加元素。

响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

Bootstrap 网格系统（Grid System）的工作原理

网格系统通过一系列包含内容的行和列来创建页面布局。下面列出了 Bootstrap 网格系统是如何工作的：

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4

萌timo_队长

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
浅谈BootStrap(个人浅谈,欢迎来判)

开门见山什么是BootStrap,具体释义在百度百科上有解释,很详细的总而言之就是是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷,(一)基本使用:详细的中文教程: http://www.runoob.com/bootstrap/bootstrap-tutorial.html 1.
复制链接

扫一扫