Bootstrap学习笔记（2）Bootstrap样式

最新推荐文章于 2022-01-21 08:00:45 发布

Andanc

最新推荐文章于 2022-01-21 08:00:45 发布

阅读量703

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/Andanc/article/details/100542569

版权

Bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一.Bootstrap整体架构

Bootstrap来自Twitter，是目前最流行的前端框架。它是基于HTML、CSS、JavaScript的一个简洁、灵活地开源框架。从官网 http://getbootstrap.com下载最新版
解压缩后可以看到三大核心目录：css(样式)、js(脚本)、fonts(字体)，就是我们所需要的 Bootstrap 运行环境。其中需要进入到页面的是 bootstrap.min.css 、jquery.min.js 和 bootstrap.min.js 三个文件。
文件作用
1> bootstrap.min.css ：包含了Bootstrap所有基本样式。
2> jquery.min.js ：因为Bootstrap的 js 是依赖Jquery的，所以必须在引入Bootstrap的 js 之前引入jquery.min.js
3> bootstrap.min.js ：包含了Bootstrap所有的基本插件。
在我们的HTML页面上按照顺序引入这三个文件，那么Bootstrap就配置好了
Bootstrap的基础支撑平台如下图所示
在这里插入图片描述

1.什么是12栅格系统？
BootStrap的12栅格系统也就是把网页的总宽度平分为12份，开发人员可以自由地按份组合，以便开发出简洁方便的程序。此外BootStrap也提供了更为灵活地栅格系统，即栅格系统所使用的总宽度可以不固定，你可以针对一个div元素使用12等分的栅格，因为BootStrap是按照百分比进行12等分的。
12栅格系统是整个BootStrap的核心功能，也是响应式设计核心理念的一个实现方式。
2.基础布局组件
在12栅格系统的基础上，BootStrap提供了多种基础布局组件，如排版、代码、表单按钮等。这些基础组件可以随意应用在页面的任何元素上，包括其顶部的CSS组件内部也可以任意使用这些基础组件。在有的地方也会称它为CSS全局样式，其实它们表示的是相同的内容。
3.JQuery
BootStrap所有的JavaScript插件都依赖于jQuery1.10+，如果要使用这些插件，就必须要用到jQuery库。如果你只是用CSS组件，那就可以不要它了。
4.响应式设计
页面的设计开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。具体的实践方式由多方面决定，包括弹性网络和布局、图片、CSS媒体查询的使用等。无论用户使用笔记本电脑还是平板电脑，我们的页面都应该能够自动切换分辨率、图片尺寸及相应脚本功能等，以适应不同设备。
5.CSS组件
在BootStrap最新的版本中提供了20种CSS组件，分别是下拉菜单（Dropdown）、按钮组（Button group）、按钮下拉菜单（Button dropdown）、导航（Nav）、导航条（Navbar）、面包屑导航（Breadcrumb）、分页导航（Pagination）、标签（Label）、徽章（Badge）、缩略图（Thumbnail）、警告框（Alert）、进度条（Progress-bar）、媒体对象（Media-object）…
6.JavaScript插件
JavaScript插件总共有12种，分别是动画效果（Transition）、模态框（Modal）、下拉菜单（Dropdown）、滚动侦测（Progress-bar）、弹出框（Popover）、按钮（Button）…

二、栅格系统

1.简介BootStrap提供了一套响应式、移动设备先行的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为12列。
栅格系统通过一系列行（row）与列（column）的组合来创建页面的布局，设置的内容可以放在创建好的布局中。
2.实现原理
栅格系统的实现原理非常简单，仅仅是通过定义容器的大小，平分为12份，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式的栅格系统。
（1）一行数据（row）必须包含在 .container中，以便为其赋予合适的对齐方式和内边距
（2）使用行（row）在水平方向创建一组列（column）
（3）具体内容放在列（column）内，列（column）可以作为行（row）的直接子元素
（4）内置的一大堆样式，可以使用col-xs-4（占4列宽度）的样式来快速创建栅格
（5）通过设置padding从而创建列（column）之间的间隙，让后面第一列和最后一列设置负值margin来抵消掉padding的影响
（6）栅格系统中指定1到12的值来表示其跨越的范围
3.如何使用

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Bootstrap列组合</title>

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

    <style>

        body{

            margin-top: 20px;

        }

        .row div{

            outline: 1px solid red;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="row">

        <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>

    <br/>

    <div class="row">

        <div class="col-md-4">col-md-4</div>

        <div class="col-md-8">col-md-8</div>

    </div>

    <br/>

    <div class="row">

        <div class="col-md-4">col-md-4</div>

        <div class="col-md-4">col-md-4</div>

        <div class="col-md-4">col-md-4</div>

    </div>

</div>

</body>

</html>

效果图：
在这里插入图片描述这里就可以看出来我们是栅格系统就相当于1行给了我们12列这12列我们可以随意均匀但是不可以超过12列，注意如果这一行的列超过了12等份，那么他就会自动去下一行。
4.列偏移
有时候我们不想让两个相邻的列挨在一起，这时候利用栅格系统的列偏移（offset）功能来实现，而不必再定义margin值。对于中等屏幕，可以使用.col-md-offset-*形式的样式将例如： .col-md-offset-2的意思是将元素向右移动了两个列的宽度，

/*省略部分代码*/    

<style>

        body {

            margin-top: 20px;

            color: #fff;

        }



        .container {

            outline: 1px solid red;

        }



        .row div {

            background: red;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="row">

        <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-4 col-md-offset-4">col-md-1 col-md-offset-4</div>

    </div>

    <br/>



    <div class="row">

        <div class="col-md-4 col-md-offset-4">col-md-4 col-md-offset-4</div>

    </div>

    <br/>



    <div class="row">

        <div class="col-md-6 col-md-offset-6">col-md-6 col-md-offset-6</div>

    </div>

</div>

</body>

如下：

在这里插入图片描述
5.列嵌套
栅格系统也支持列嵌套，即在一个列里声明一个或多个行（row）。但是要注意，内部所嵌套的row的宽度为100%时，就是当前外部列的宽度。被嵌套的行（row）所包含的列（column）的个数不能超过12。

//部分代码：
<div class="row:>
<div class="col-md-4">第一列</div>
<div class="col-md-4">
第二列
<div class="row">
<div class="col-md-12>我是被嵌套的</div>
</div>
</div>
<div class="col-md-4">第三列</div>
</div

用语言描述下列嵌套就是：
一行12份。想象一下假定我们给3列，每列都给了4列，这时候一行就被3列给填充了。
这时我们在第2列给他嵌套了一行并且这一行里在做一个列然后将这行的12份都给了这一行，但是注意：这个嵌套的这一行12份实际上的大小只是属于被嵌套的第二列的大小，也就是说他只有他被嵌套的这列的大小。

6.列排序
列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过.col-md-push-*和.col-md-pull-*来实现这一目的。
pull：左排序。
push：右排序

三、响应式栅格

我们都知道，BootStrap可以制作响应式页面。它能为不同屏幕尺寸提供不同栅格样式。在前面的例子中，我们一直都在使用中等屏幕（md），既然是响应式页面，当然还应该包括超小屏幕（xs）、小型屏幕（sm）、中型屏幕（md）、大屏幕（lg）等
在这里插入图片描述

这些大小其实都是通过媒体查询来实现的，出下源码：

 /*超小屏幕（手机，小于768px），没有设置任何的媒体查询代码，因为在BootStrap中是默认的（移动优先）*/

@media(min-width : 768px){

      .container {width：750px；}       /*小屏幕（平板，大于等于768px）*/

}

@media（min-width ：992px）{

      .container（width ： 970px；）  /*中等屏幕（桌面显示器，大于等于992px）*/

}

@media（min-width：1200px）{    /*大屏幕（大桌面显示器，大于等于1200px）*/

       .container{width：1170px；}

}

四、常用属性

1. Bootstrap标题

<div class="h1"></div>

除了h1还有 h2、h3、h4、h5、h6
2.页面主体
字体突出显示：class=“lead”
3.对齐方式
左对齐：class=“text-left”
中间对齐：text-center
右对齐：text-right
两端对齐：text-justify
4.列表（横向）

 <ul class="list-inlune">

5.列表(水平)

<dl class="dl-horizontal">
<dt>标题</dt>
<dd>内容</dd>

6.内联表单

<form action="#" class="form-inline">

... //省略部分代码

</form>

在这里插入图片描述

7.横向表单

<body>

<div class="container">

    <form action="#" class="form-horizontal">

        <div class="form-group">

            <span class="col-sm-2 text-center">姓名：</span>

            <div class="col-sm-10">

                <input class="form-control " type="text" placeholder="请输入你的姓名"/>

            </div>

        </div>

        <div class="form-group">

            <span class="col-sm-2 text-center"> 邮箱：</span>

            <div class="col-sm-10">

                <input class="form-control" type="email" placeholder="请输入你的邮箱"/>

            </div>

        </div>

        <div class="form-group">

            <div class="col-sm-offset-4 col-sm-4" >

                <input class=" form-control " type="submit" 提交/>

            </div>

        </div>

    </form>

</div>

</body>

在这里插入图片描述 8.验证提示状态
在填写表单的时候，经常要提示用户其输入的内容是否合法，长度是否够用，再次输入的密码是否和第一次一致等验证方面的问题，不同的输入就需要不同的样式表现（如颜色、边框、提示框等）。BootStrap提供了.has-warning、.has-error、.has-success三种样式分别表示警告（黄色）、错误（红色）、成功（绿色）语境。使用了这些类后，输入框会变化边框颜色和阴影颜色。
9.控件大小

<input type="text" class="input-lg form-control" placeholder="大型输入框"/>

<input type="text" class="form-control" placeholder="正常输入框" />

<input type="text" class="input-sm form-control" placeholder="小型输入框" />

在这里插入图片描述

10.七种默认提供的按钮样式

<input type="button" class="btn btn-default" value="default(灰色)" />

<input type="button" class="btn btn-primary" value="primary(深蓝色)" />

<input type="button" class="btn btn-success" value="default(灰色)" />

<input type="button" class="btn btn-info" value="primary(深蓝色)" />

<input type="button" class="btn btn-warning" value="default(灰色)" />

<input type="button" class="btn btn-danger" value="primary(深蓝色)" />

在这里插入图片描述

11.按钮大小

<input type="button" class="btn btn-default btn-lg" value="default(灰色)" />

<input type="button" class="btn btn-primary" value="primary(深蓝色)" />

<input type="button" class="btn btn-success btn-sm" value="default(灰色)" />

<input type="button" class="btn btn-info btn-xs" value="primary(深蓝色)" />

在这里插入图片描述

12.响应式图片

可以通过为图片添加.img-responsive类让图片支持响应式布局。其实质是为图片设置了宽度100%，高度自适应和display：block属性，从而让图片在其父元素中更好地缩放。具体使用方式如下所示。

<img src="..." class="img-responsive" />

13.图片形状
BootStrap提供了三种图片形状，他们使用非常简单，只需要在图片img元素上使用.img-rounded（圆角）、.img-circle（圆形）、.img-thumbnail（圆角边框）样式即可，具体代码如下所示：

<img src="image/1.jpg" class="img-rounded" alt="" />

<img src="image/1.jpg" class="img-circle" alt="" />

<img src="image/1.jpg" class="img-thumbnail" alt="" />

在这里插入图片描述

总结

1.BootStrap的使用场景：PC端，移动端，响应式网页，后台网页等。
2. 12栅格的工作原理及使用：列组合、列偏移、列嵌套、列排序
3.响应式栅格的使用终端临界值、缩写及使用。
超小屏幕（xs）手机（<768px）
小屏幕（sm）平板（≥768px）
中等屏幕（md）桌面显示器（≥992px）
大屏幕（lg）大桌面显示器（≥1200px）

BootStrap中CSS全局样式的作用。
基础排版：标题、页面主体、强调文本、列表与传统的使用有什么不同？原理如何？
表单：内联表单、横向表单、验证提示状态、控件大小的使用。
BootStrap中按钮的使用与传统按钮有何区别？
响应式图片和三种不同图片的形状

Andanc

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap学习笔记（2）Bootstrap样式

一.Bootstrap整体架构Bootstrap来自Twitter，是目前最流行的前端框架。它是基于HTML、CSS、JavaScript的一个简洁、灵活地开源框架。从官网 http://getbootstrap.com下载最新版解压缩后可以看到三大核心目录：css(样式)、js(脚本)、fonts(字体)，就是我们所需要的 Bootstrap 运行环境。其中需要进入到页面的是 bootst...
复制链接

扫一扫