前端之Bootstrap

Posted wangchengpei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端之Bootstrap相关的知识,希望对你有一定的参考价值。

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.栅格参数

技术图片

 

以上是关于前端之Bootstrap的主要内容,如果未能解决你的问题,请参考以下文章

web前端开发JQuery常用实例代码片段(50个)

Web前端之移动端课程开发之06.bootstrap

Web前端之移动端课程开发之06.bootstrap

前端之Bootstrap框架

BootStrap有用代码片段(持续总结)

Web开发之常用框架BootStrap