Bootstrap框架--全局CSS样式

最新推荐文章于 2024-04-05 13:35:41 发布

闵农

最新推荐文章于 2024-04-05 13:35:41 发布

阅读量775

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/Archer1724/article/details/105312411

版权

Bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

1.概括
2.栅格系统
3.排版
4.代码
5.表格
6.表单
7.按钮
8.图片
9.辅助类

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，目前也是最新版本。

如何使用Bootstrap框架？
对于纯前端，只需要引入文件即可使用；在集成环境下（比如说vue），需要进行安装。同时，我们可以根据个人需求修改文件，实现效果。

1.概括

使用html5类型文档
<!DOCTYPE html>
在Bootstrap3之后，移动设备优先
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no">
考虑浏览器之间表现的差异性，使用normalize.css文件
布局容器：（两种）
.container固定模式布局；.container-fluid 流动式布局（宽度100%的布局）

2.栅格系统

响应式、移动设备优先的流式栅格系统（类似于table), 一行系统会自动分为最多12列。当然不用一定写够12列。
包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

预定义类：已经定义好的类，直接用就好。

布局方法： .container/ .container-fluid >.row>.col-
栅格参数：

在这里插入图片描述
上图中的槽宽，处理方法为将row 元素的margin 设置为负值-15px。

媒体查询
比如： @media (max-width: @screen-xs-max) { ... }
栅格系统的实例：
1).考虑不同屏幕的一般写法：

<!--一般书写方式-->
<div class="container painter">
    <div class="row">
        <div class="col col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
        <div class="col col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
        <div class="col col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
        <div class="col col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
        <div class="col col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
        <div class="col col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
        <div class="col col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
        <div class="col col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
        <div class="col col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
        <div class="col col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
        <div class="col col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
        <div class="col col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
    </div>
     <div class="row">
        <!--加起来是12 同一屏幕的栅格数加起来是12-->
        <div class="col col-lg-1 col-md-3 col-sm-6 col-xs-1"></div>
        <div class="col col-lg-5 col-md-3 col-sm-1 col-xs-7"></div>
        <div class="col col-lg-4 col-md-3 col-sm-1 col-xs-2"></div>
        <div class="col col-lg-2 col-md-3 col-sm-4 col-xs-2"></div>
    </div>
</div>

实现：
在这里插入图片描述
2).多余的列（栅格数超过12时）将另起一行排列

 <div class="row">
        <!--加起来是12 同一屏幕的栅格数加起来是12-->
        <div class="col col-lg-1 col-md-3 col-sm-6 col-xs-1"></div>
        <div class="col col-lg-5 col-md-3 col-sm-1 col-xs-7"></div>
        <div class="col col-lg-4 col-md-3 col-sm-1 col-xs-2"></div>
        <div class="col col-lg-2 col-md-3 col-sm-4 col-xs-2"></div>
    </div>

实现：
在这里插入图片描述
蓝色边框是背景，最后一个div占两格，所以直接转到下一行。
3).列偏移：offset（写的margin-left值）
列排序：向右推：push（写的left值）；向左推：pull (写的right值)

<div class="row">
    <div class="col col-lg-9 col-lg-offset-1"></div>
</div>
 <!--push和pull比较-->
<div class="row">
    <div class="col col-lg-6 col-lg-push-6">1</div>
    <div class="col col-lg-6 col-lg-pull-6">2</div>
</div>

实现：
在这里插入图片描述

4）嵌套列

   <!--嵌套-->
    <div class="row">
        <div class="col col-lg-1 col-md-1 col-sm-1 col-xs-1">
            <div class="row">
                <div class="col col-xs-9 col-xs-push-3"></div>
            </div>
        </div>
    </div>

3.排版

页面主体：将全局 font-size 设置为 14px，line-height 设置为 1.428，p元素有10px的margin-bottom
预定义类

中心内容：
.lead 类可以让段落突出显示。
内联文本元素（标签）:
mark 标记文本
del 被删除的文本
s 无用文本
ins 插入文本
u 带下划线的文本
small 小号文本
strong 着重
em 斜体
对齐：
5个预定义类： text-left; text-center ;text-right; text-justify ;text-nowrap
改变大小写:
text-lowercase; text-uppercase; text-capitalize
缩略语：
基本缩略语 <abbr title="attribute">attr</abbr>
首字母缩略语 <abbr class="initialism">HTML</abbr>
地址：
结尾加<br> 保留样式
引用
默认样式的引用：用blockquote标签直接引用，文本用p标签包着。
命名来源:添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。
将引用右对齐：给blockquote使用 .blockquote-reverse 预定义类。
列表
无样式列表:比如给ul标签加 .list-unstyled类 ,它是针对直接子元素的。
内联列表：给父元素添加 .list-inline , 子元素会处于同一行存在些许的padding。
水平排列的描述： .dl-horizontal类让 <dl> 内的短语及其描述排在一行。

4.代码

内联代码 :<code>,就是行代码
用户输入： <kbd>
代码块： <pre> ,如果添加了 .pre-scrollable ，max-height 为 350px ，并在垂直方向展示滚动条。
变量： <var>
程序输出： <samp>

5.表格

基本样式：给table标签添加 .table 类，会有少量的内补（padding）和水平方向的分隔线(会撑开)。
条纹状表格：给table标签添加 .table-striped类（条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被 Internet Explorer 8 支持。
带边框的表格：给table标签添加.table-bordered类
鼠标悬停：给table标签添加.table-hover类，在鼠标悬停时做出响应。
紧缩表格 ：给table标签添加.table-condensed 类，可以让表格更加紧凑，单元格中的内补（padding）均会减半。
– 状态类：（给table标签的子元素添加）
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作
响应式表格：将任何 .table 元素包裹在 .table-responsive 元素内，在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

6.表单
- 设置 .form-control类：给<input>、<textarea> 和 <select> 元素添加该类，都将被默认设置宽度属性为 width: 100%;。
- 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

<form action="">
    <div class="form-group">
        <label for="">email address</label>
        <input type="email" class="form-control">
    </div>
    <div class="form-group">
        <label for="">password</label>
        <input type="password" placeholder="password" class="form-control">
    </div>
    <button type="submit" class="btn btn-default">submit</button>
</form>

实现：

在这里插入图片描述

内联表单：设置.form-inline 类，一定要添加 label 标签(可以用.sr-only 隐藏)
只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。
在上一个代码的基础上给form元素添加：
<form action="" class="form-inline">
实现：
水平排列的表单： .form-horizontal ，将改变 .form-group 的行为，使其表现为栅格系统中的行（row）。即让label元素和input内容处于一行。
文本域： rows属性
<textarea class="form-control" rows="3"></textarea>
多选框和单选框架： checkbox radio：默认.checkbox， .radio
内联单选和多选： .checkbox-inline 或 .radio-inline

7.按钮

可作为按钮使用的标签或元素:<a>、<button> 或 <input>
比如：<a class="btn btn-default" href="#" role="button">Link</a>
预定义样式:
.btn-default;.btn-primary;.btn-success;.btn-info;.btn-warning;.btn-danger;.btn-link
尺寸：
.btn-lg;.btn-sm;.btn-xs
拉升至相对父元素100%的宽度 ,块级元素: .btn-block

8.图片

响应式图片: .img-responsive
图片水平居中： .center-block
(图片如果比父容器大，设为100%，如果小，保留本身)
图片形状：
.img-rounded; 圆弧
.img-circle; 圆
.img-thumbnail; 带边框

9.辅助类

情境文本颜色：

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

情境背景色

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

关闭按钮： .close
三角符号： .caret
任意元素的快速浮动：.pull-left;.pull-right
排列导航条： .navbar-left;.navbar-right
内容块居中： .center-block ，让元素转换为块级元素，margin auto
清除浮动:.clearfix解决父元素撑不开，后面跟着浮动的问题
显示或隐藏内容：.show ; .hidden
图片替换 :.text-hide

闵农

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录