BootStrap基础知识学习-No.1

最新推荐文章于 2022-07-29 09:09:10 发布

原创

最新推荐文章于 2022-07-29 09:09:10 发布 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

本文详细介绍了BootStrap框架的基础知识，包括其基本结构、全局CSS样式、组件和JavaScript插件。重点讲解了Bootstrap的栅格系统、媒体查询、表格样式、表单控件、按钮、图片响应式处理以及各种组件的使用，如下拉菜单、导航条和选项卡等，是学习和使用BootStrap的重要参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap学习大纲
BootStrap中文网

一、Bootstrap简介

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，是一个用于快速开发 Web 应用程序和网站的前端框架。
Bootstrap内容包括：
1.基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
2.全局CSS样式：Bootstrap 自带全局的 CSS 样式、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统等特性。
3.Bootstrap组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
4.JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。可以直接包含所有的插件，也可以逐个包含这些插件。
5.定制：可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到自己的版本。
二、Bootstrap使用–下载Bootstrap源码

三、Bootstrap全局css样式

3.1.bootstrap栅格系统
3.1.1栅格系统简介
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，页面内容放置于列(column)中，只有“列（column）”可以作为行（row）”的直接子元素。
页面的设计与开发根据当前用户行为以及设备环境(如系统平台、屏幕尺寸等)进行相应的调整，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列，均可自动切换分辨率、图片尺寸等。包含了预定义类，如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
3.1.2媒体查询
媒体查询是响应式设计的核心要素，其功能十分强大，Bootstrap主要用到min-width，max-width以及and语法，用于在不同的分辨率下设置不同的css样式。

/* 超小屏幕（手机，小于 768px） */
@media (max-width: @screen-xs-max) { ... }
/* 默认的设置，--移动设备优先 */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max){ ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

3.1.3.栅格系数

3.1.4.栅格系统的使用
1.基本的栅格系统以及流式布局容器下的栅格系统

<div class="container">
<!--container样式是bootstrap已定义的，会根据屏幕大小自动设置div的宽度-->
<!-- <div class="container-fluid"> 流式布局容器：将固定宽度的栅格布局转换为 100% 宽度的布局 -->
    <div class="row">
    <!--指定行，这个行只能放在container里面！规定！-->
    <!--col-md-1代表中等分辨率中只占一列-->
    <!--兼容性：小分辨率在大分辨率的时候依然可以使用-->
        <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">
        <!--col-md-1代表中等分辨率中只占八列和四列-->
        <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-8 col-sm-6">小分辨率6列，中等分辨率8列</div>
        <div class="col-md-4 col-sm-6">小分辨率6列，中等分辨率4列</div>
    </div>
</div>

2.列偏移( .col-md-offset-n)、列嵌套、列排序 (.col-md-push-n .col-md-pull-n)

<div class="container">
    <!--列偏移-->
    <div class="row">
        <div class="col-md-4 col-md-offset-4">col-md-4</div>
        <div class="col-md-2 col-md-offset-2">col-md-2</div>
    </div>
    <!--列组合-->
    <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-8">col-md-8
            <div class="row" id="qiaotao">
                <div class="col-md-4">列嵌套-4</div>
                <div class="col-md-8">列嵌套-8</div>
            </div>
        </div>
    </div>

    <!--列排序-->      
    <div class="row">
        <div class="col-md-4 col-md-push-5">
            col-md-4向后推5格
        </div>
        <div class="col-md-2 col-md-pull-2">
            col-md-2向左拉两格
        </div>
    </div>
</div>

3.不同分辨率下行数的不同以及清除浮动

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-sm-3">xs排两行，sm排一行1</div>
        <div class="col-xs-6 col-sm-3">xs排两行，sm排一行2</div>
        <div class="col-xs-6 col-sm-3">xs排两行，sm排一行3</div>
        <div class="col-xs-6 col-sm-3">xs排两行，sm排一行4</div>
    </div>
    <!--清除浮动-->
    <div class="row">
        <div class="col-xs-6 col-sm-3">
            xs排两行，sm排一行1<br />第二行内容
        </div>
        <div class="col-xs-6 col-sm-3">
            xs排两行，sm排一行2
        </div>
        <!--在第三列清除浮动-->
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3">
            xs排两行，sm排一行3
        </div>
        <div class="col-xs-6 col-sm-3">
            xs排两行，sm排一行4
        </div>
    </div>
</div>

3.1.4禁止响应式布局

删除viewpt的meta
为.container设为固定宽度
对导航移除折叠和展开行为

3.2.bootstrap排版基础
3.2.1标题

<h1>hello<small>bootstrap</small></h1>
<h2>hello<small>bootstrap</small></h2>
<h3>hello<small>bootstrap</small></h3>
<h4>hello<small>bootstrap</small></h4>
<h5>hello<small>bootstrap</small></h5>
<h6>hello<small>bootstrap</small></h6>
<span class="h1">hello</span><br />
<span class="h2">hello</span><br />
<span class="h3">hello</span><br />
<span class="h4">hello</span><br />
<span class="h5">hello</span><br />
<span class="h6">hello</span><br />

3.2.2页面主题

body全局样式

<!--bootstrap定义-->
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

p全局样式：通过添加 .lead 类可以让段落突出显示。

<!--bootstrap定义-->
p {
  margin: 0 0 10px;
}
.lead {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

对齐方式：text-right；text-center；text-left

<!--bootstrap定义-->
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

3.2.3内联文本元素

小号字体：small
着重：strong
斜体：em
带下划线文本：u
插入文本：ins
无用文本：s
删除文本：del
高亮：mark

3.2.4缩略语：abbr
1.首字母缩略语：为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。
2.基本缩略语：想看完整的内容可把鼠标悬停在缩略语上, 但需要为abbr元素设置 title属性。

<abbr title="内容">abbr</abbr>
<abbr title="内容" class="initialism">abbr</abbr>

3.2.5改变大小写

    <p class="text-lowercase">Lowercased text.</p>
    <p class="text-uppercase">Uppercased text.</p>
    <p class="text-capitalize">Capitalized text.</p>

3.2.6地址元素address

<!--bootstrap定义-->
address {
  margin-bottom: 20px;
  font-style: normal;
  line-height: 1.42857143;
}

3.2.7引用blockquote
引用里面最好放一个p标签
3.2.8列表

无序列表
有序列表
去点列表：移除了默认的 list-style 样式和左侧外边距的一组元素（只针对直接子元素）。这是针对直接子元素的。

<ol class="list-unstyled">
    <li>bootstrap</li>
    <li>bootstrap</li>
    <li>bootstrap</li>
    <li>bootstrap</li>
    <li>bootstrap</li>
    <li>bootstrap</li>
</ol>

内联列表
设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。

<ol class="list-inline">
    <li>bootstrap</li>
    <li>bootstrap</

最低0.47元/天解锁文章

200万优质内容无限畅学