前端之Bootstrap

Posted 2021-12-20 wangchengpei

Bootstrap简介

　　Bootstrap是一个前端框架、是目前最受欢迎、最流行的web前端框架、是Twitter公司的Mark Otto和Jacob Thornton一起开发的，Bootstra框架是基于html、CSS、javascript 开发的，它因简洁、直观、功能强大被开发者广发使用。

　　Bootstrap前端框架使得 Web 开发更加快捷，提供了优雅的HTML、CSS和JavaScript规范，它是由动态CSS语言Less写成。Bootstrap前端框架刚推出就颇受欢迎，一直是GitHub上的热门开源项目，是一些前端开发者较为熟悉的框架。

Bootstra框架用途和优点

　　我们可以使用bootstra框架提供的样式和组件快速的完成一个网站的前端页面，只需要引用一些定义好样式和组件（通过定义好的class来引用相应的样式和组件），就可以完成一个非常漂亮网页。而且bootstra框架还支持自适应，在不同大小的屏幕上会自动调节网页显示的内容，避免了在在pc上很漂亮的网页，而在移动端（小屏幕）左右出现滚动条，网页内容太小看不清等不利于用户体验的表现。

bootstrap框架文件包结构

　　针对具有不同技能等级的开发者和不同的使用场景，Bootstrap提供了3种方式的文件包：

　　用于生产环境的bootstrap框架文件包结构

• Bootstrap：主目录
• Css/：CSS样式文件目录
• bootstrap.css：核心CSS文件
• *.css.map：source map文件
• bootstrap.min.css：压缩版核心CSS文件
• bootstrap.min.css.map：压缩版source map文件
• bootstrap-theme.css：可选的Boostrap主题文件
• bootstrap-theme.min.css：压缩版可选的Bootstrap主题文件
• js/：JavaScript文件目录
• bootstrap.js：核心JavaScript文件
• bootstrap.min.js：核心JavaScript文件压缩
• fonts/：文体图标文件目录
• glyphicons-halflings-regular.eot：字体图标文件
• glyphicons-halflings-regular.svg：字体图标文件
• glyphicons-halflings-regular.tt：字体图标文件
• glyphicons-halflings-regular.woff：字体图标文件
• glyphicons-halflings-regular.woff2：字体图标文件

Bootstra框架环境搭建

　　要使用bootstrap框架至少需要引入3个文件：bootstrap.min.css、jQuery.min.js、bootstrap.min.js。

　　

<!-- jQuery文件，必须在bootstrap.min.js 之前引入 -->
<script src="jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap核心CSS 文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Bootstrap核心JavaScript 文件 -->
<script src="js/bootstrap.min.js"></script>

 

 

　　注意：

1. bootstrap.min.css、jquery.min.js、bootstrap.min.js这三个文件的引入顺序不是随意的，jQuery文件必须在bootstrap.min.js 之前引入。
   
2. jquery.min.js、bootstrap.min.js一般在HTML网页的最底部引入，这样可以避免这两个文件先加载出现问题，网页内容显示慢或不显示的问题。

 

Bootstra使用方法

注：由于bootstrap官网文档比较详细，这里就不一一介绍了，只做几个重要的介绍，其它的可以参考https://v3.bootcss.com/

1.布局容器

　　Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。

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

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

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

 

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

 

 

2.栅格系统

　　栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。

• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

• 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。
  
  

　　注意：栅格系统是以12为单位的每一个div下面都被分为12等分

　　例子：

<style>
        .red 
            background-color: red;
            border: 3px solid green;
            height: 100px;
        
</style>
<div class="container">
    <div class="row">
        <div class="col-md-6 red"></div>
        <div class="col-md-6 red"></div>
    </div>
</div>

 

 

3.栅格参数