BootStrap学习笔记(上)

发布于:2022-12-13 ⋅ 阅读:(348) ⋅ 点赞:(0)

1.BootStrap介绍

        Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。

​2.BootStrap安装与使用

2.1 安装

        安装请去BootStrap中文网:Bootstrap中文网

 2.2 使用

        BootStrap在html中引用:

        <!-- 新 Bootstrap 核心 CSS 文件 -->
		<link rel="stylesheet" href="css/bootstrap.min.css">

		<!-- 可选的Bootstrap主题文件 -->
		<link rel="stylesheet" href="css/bootstrap-theme.min.css">

		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="js/jquery-3.4.1.min.js"></script>

		<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
		<script src="js/bootstrap.min.js"></script>

3.布局容器和栅格网格系统

3.1布局容器——.container 类

        .container.container_fluid是bootstrap中的两种不同类型的外层容器。官方对二者的描述为:

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

          .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

        所谓固定宽度并不是允许开发者自己设置容器的宽度,而是bootstrap内部根据屏幕宽度利用媒体查询,帮我们设置了固定宽度,并且是能够自适应的。无论何种情况下,请不要手动为响应式布局中的外层布局容器设置固定宽度值。.container-fluid自动设置为外层视窗的100%,如果外层视窗为body,那么它将全屏显示,无论屏幕大小,并且自动实现响应式布局。

<!--  固定宽度,两侧会有留白 -->
<div class="container">
    <p>...</p>
</div>

<!--  占据全部视口(viewport),不会有留白 -->
<div class="container-fluid">
   <p>...</p>
</div>

3.2栅格网格系统

注意:网格系统必须使用到CSS

        BootStrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,BootStrap系统会自动分为最多12列。栅格系统用于通过一系列的行(row)或列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。

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

         container、row、xs(xsmall phones){超小屏(自动)},sm(small tablets){小屏(750px)},md(middle desktops){中屏(970px)},lg(laege desktops){大屏(1170px)},

        行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和padding(内边距)。在行(.row)中可以添加列(.column), 只有列(column)才可以作为行容器(.row)的直接子元素,但列数之和不能超过平分的总列数12。如果大于12,则自动换到下一行。

具体内容应当放置在列容器之内。

3.2.1 列组合:

        列数加起来不能超过12,超过12则会换到下一行

3.2.2 列偏移:

        在列元素上添加类名"col-md-offset-X"(其中X代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。但是总数不超过12

<div class="container">
     <div class="row">
         <div class="col-md-1">1列</div>
         <div class="col-md-1">2列</div>
         <div class="col-md-1 col-md-offset-8">11列</div>
         <div class="col-md-1">12列</div>
     </div>
</div>

3.2.3 列排序:

        列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在BootStrap框架的网格系统中是通过添加类名 col-md-push-X 和 col-md-pull-X (其中X代表移动的列组合数)。往前pull,往后push。如果目的地有其他的东西,就会被覆盖

3.2.4 列嵌套:

        栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内


网站公告

今日签到

点亮在社区的每一天
去签到