欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Bootstrap的初体验-2

程序员文章站 2022-03-30 16:07:37
这一篇从最基础的知识来了解Bootstrap. 虽然V4版本已经出来，但还是拿V3来做演示，因为V4我也没用过 ~~ 官方中文文档 ，写的很详细，但作为入门来说，我感觉不太友好 https://v3.bootcss.com/ 可视化布局，可以方便的拿来官方文档的例子，复制粘贴大法好 Bootstra ......

这一篇从最基础的知识来了解Bootstrap.  虽然V4版本已经出来，但还是拿V3来做演示，因为V4我也没用过 ~~

官方中文文档 ，写的很详细，但作为入门来说，我感觉不太友好  https://v3.bootcss.com/

可视化布局，可以方便的拿来官方文档的例子，复制粘贴大法好  Bootstrap可视化布局系统

 

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
 8     <title>Bootstrap 101 Template</title>
 9 
10     <!-- Bootstrap -->
11     <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
12 
13     <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
14     <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
15     <!--[if lt IE 9]>
16       <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
17       <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
18     <![endif]-->
19   </head>
20   <body>
21     <h1>你好，世界！</h1>
22     <div class="container">
23       <div class="row">
24          <div class="col-xs-3 col-sm-4 col-md-6">left</div>
25         <div class="col-xs-3 col-sm-8 col-md-6">
26                    <div class="col-xs-3 col-sm-4 col-md-6">1</div>
27                     <div class="col-xs-3 col-sm-8 col-md-6">2</div>
28         </div>
29       </div>
30     </div>
31    
32     <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
33     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
34     <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
35     <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
36   </body>
37 </html>

 

保存html用浏览器打开，用浏览器调整页面的宽度，模拟在手机、平板、显示器等不同的浏览设备上，布局都会发生一些变化，就叫做栅格化。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 也就是说，不论显示器的尺寸，都会自动将整个屏幕分为12列，即.col-xx-2  后面的2要加上.col-xx-10 才能凑够铺满屏幕。这样也就分成了左右布局 左2右10的比例分配。

实例：从堆叠到水平排列
使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。
<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

上面这个是官方的例子，非常的清晰，多看一下就理解了。链接：https://v3.bootcss.com/css/#grid-example-fluid

好，了解了bootstrap ,我们自己就可以按照设计图来分配布局了。

这些仅仅是博主的知识分享，而且博主仅仅看了两天的官方文档，东拼西凑的写出了还算满意的静态页面，而且无法共享给大家，所以没有实例代码。

我总结了一下自己学习Bootstrap从0入门，最大的障碍是不确定自己能不能学会，我肯定的告诉你，很简单！多看一下官方文档，善用搜索引擎，总是可以找到解决方法。不要神话任何的框架代码，它们都是一步一步的完善出来的，而且都是基础知识拼起来，更好的为我们提供服务。对于一个方便的工具，你要消去不存在的敬畏，拿着它玩来玩去，玩坏了就重新下载个，东搞搞西搞搞，才能总结出来自己的知识体系。以此与君共勉！

上一篇： 前端如何去除字符串中的所有空格？

下一篇： [日常] Go语言圣经--作用域,基础数据类型,整型

推荐阅读