bootstrap简单介绍

最新推荐文章于 2024-07-25 09:24:40 发布

colachens

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量989

点赞数 1

分类专栏：前端开发文章标签： bootstrap javascript css

本文链接：https://blog.csdn.net/colachens/article/details/131122154

版权

bootstrap

Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。

包含内容：

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap 基本结构部分详细讲解。
CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在Bootstrap CSS部分详细讲解。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。
JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在Bootstrap插件部分详细讲解。
定制：您可以定制Bootstrap的组件、LESS 变量和jQuery 插件来得到您自己的版本。

下载：

官网 : http://www.getbootstrap.com 以及中文网 : https://www.bootcss.com/ 都可以下载 bootstrap-x.x.x-dist.zip。
Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此必须在 Bootstrap 之前引入下载 jQuery : http://jquery.com

解压后项目结构如下：
在这里插入图片描述

使用：

在 html 中的模板为：

<!DOCTYPE html>
<html>
   <head>
	  <title>Bootstrap 模板</title>
      <!-- 
		viewport 表示用户是否可以缩放页面
		width 指定可视区域的逻辑宽度
		device-width 设备宽度
		initial-scale 设置web页面的初始缩放比例
		initial-scale=1.0 表示将显示未经缩放的web页面
	  --> 
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      
       <!-- 引入 Bootstrap 的 css 文件-->
      <link href="css/bootstrap.min.css" rel="stylesheet">

   </head>
   <body>
      <h1>Hello, world!</h1>
       
      <div class="container-fluid">
         <h2>使用Bootstrap框架的HTML5页面模板</h2>
      </div>
 
       <!-- jQuery 文件(Bootstrap 的 JavaScript 插件需要引入 jQuery，不使用插件可以不引入) -->
       <script src="js/jquery.min.js"></script>
       
       <!-- 引入 Bootstrap 核心 JavaScript 文件 -->
       <script src="js/bootstrap.min.js"></script>
   </body>
</html>

1. 布局和栅格

1.1 容器（Container）

Bootstrap 3 的 container class 用于包裹页面上的内容：

.container {
   
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

可以看出 container 的左右外边距（margin-right、margin-left）交由浏览器决定。还有一种容器样式为 container-fluid , container-fluid 的 width 是100％，而 container 的 width 是用媒体查询获得的动态尺寸。两者样式肯定是不一样的。并且由于 padding 的原因两者不可用嵌套，他们就是提供两种视觉风格。

<link href="css/bootstrap.min.css" rel="stylesheet"/>

<div class="container" style="height: 400px;background: #3c763d;font-size: 60px">
    container容器
</div>

<div class="container-fluid" style="height: 400px;background: #5bc0de;font-size: 60px">
    container-fluid容器
</div>

在这里插入图片描述

1.2 栅格布局

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的 mixin 用于生成更具语义的布局。

栅格系统其实就是一种布局，是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。

栅格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份，其他约定如下：

“行（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-* 不存在，也影响大屏幕设备。

这里面的 xs(xsmall phones)，sm(small tables)，md(middle desktops)，lg(larger desktops) 。分别对应超小屏(自动)，小屏(750px)，中屏(970px)，大屏(1170px)。

1.2.1 列组合

可以通过更改数字来合并列。但总列数不能超过12。

<div class="container" >
    <!-- 一行12列，4个区域分别占2,1,1,2列 共计6列 -->
    <div class="row">
        <div class="col-md-2" style="background: #985f0d">md2</div>
        <div class="col-md-1" style="background: #8c8c8c">md1</div>
        <div class="col-md-1" style="background: #b2dba1">md1</div>
        <div class="col-md-2" style="background: #f0ad4e">md2</div>
    </div>
    <hr/>
    <!-- 一行12列，4个区域分别占3,3,3,3列 共计12列 -->
    <div class="row">
        <div class="col-md-3" style="background: #985f0d">md3</div>
        <div class="col-md-3" style="background: #8c8c8c">md3</div>
        <div class="col-md-3" style="background: #b2dba1">md3</div>
        <div class="col-md-3" style="background: #f0ad4e">md3</div>
    </div>
</div>

效果如下：
在这里插入图片描述

1.2.2 列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移（包括该列右侧所有组件一起偏移）。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。但总列数不能超过12。

<div class="row">
    <!-- 两个区域分别占2，2列，其中最后一列向右偏移3列 -->
    <div class="col-md-2" style="background: #985f0d">md-2</div>
    <div class="col-md-2 col-md-offset-3" style="background: #8c8c8c">md-offset-2</div>
</div>

效果如下：
在这里插入图片描述

1.2.3 列排序

通过使用 .col-md-push-* （右移）和 .col-md-pull-* （左移）类就可以很容易的改变列（column）的顺序。和列偏移不同，会覆盖左边的列，也会被右边原有的列覆盖。

<!-- 原有样子 -->
<div class="row">
    <div class="col-md-2" style="background:red">md-2</div>
    <div class="col-md-1" style="background:yellow">md-1</div>
    <div class="col-md-1" style="background:deepskyblue">md-1</div>
    <div class="col-md-2" style="background:lawngreen">md-2</div>
</div>

<div class="row">
    <div class="col-md-2" style="background:red"