bootstap初识之css

佚名 6年前 (2019-04-10) 随笔 2126人围观抢沙发百度已收录

老师的博客：https://www.cnblogs.com/liwenzhou/p/8214637.html

bootstrap中文网：http://www.bootcss.com/

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

官网：https://getbootstrap.com

全局css：https://v3.bootcss.com/css/

bootCDN:https://www.bootcdn.cn/

首先在中文网下载社区的.解压，然后把常用的保留，不需要的删除。

解压后的文件目录

bootstrap-3.3.7-dist/
├── css  // CSS文件
│   ├── bootstrap-theme.css  // Bootstrap主题样式文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css  // 核心CSS样式压缩文件
│   └── bootstrap.min.css.map
├── fonts  // 字体文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS文件
    ├── bootstrap.js
    ├── bootstrap.min.js  // 核心JS压缩文件
    └── npm.js

删除一些目录后：

bootstrap-3.3.7-dist/
├── css  // CSS文件
│   ├── 
│   ├── 
│   ├── 
│   ├── 
│   ├── 
│   ├── 
│   ├── bootstrap.min.css  // 核心CSS样式压缩文件
│   └── 
├── fonts  // 字体文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS文件
    ├── 
    ├── bootstrap.min.js  // 核心JS压缩文件
    └──

然后倒入：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link href="../db/normalize.css" rel="stylesheet">
    <link href="../db/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<script src="../db/bootstrap/js/bootstrap.min.js"></script>
<script src="../db/jQuery.js"></script>
</body>
</html>

完成。

Bootstrap全局样式

地址：https://v3.bootcss.com/css/

排版、按钮、表格、表单、图片等我们常用的HTML元素，Bootstrap中都提供了全局样式。

我们只要在基本的HTML元素上通过设置class就能够应用上Bootstrap的样式，从而使我们的页面更美观和谐。

标题相关：

<h1>一级标题36px</h1>
<h2>二级标题14px</h2>
<h3>三级标题14px</h3>
<h4>四级标题14px</h4>
<h5>五级标题14px</h5>
<h6>六级标题12px</h6>
<!--除了使用h标签，Bootstrap内置了相应的全局样式-->
<!--内联标签应用标题样式-->
<span class="h1">一级标题36px</span>
<span class="h2">二级标题14px</span>
<span class="h3">三级标题14px</span>
<span class="h4">四级标题14px</span>
<span class="h5">五级标题14px</span>
<span class="h6">六级标题12px</span>

副标题

<!--一级标题中嵌入小标题-->
<h1>一级标题<small>小标题</small></h1>

文本对齐

<!--文本对齐-->
<p class="text-left">文本左对齐</p>
<p class="text-center">文本居中</p>
<p class="text-right">文本右对齐</p>

文本大小写

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

表格

Class	描述
.table-striped	条纹状表格
.table-bordered	带边框的表格
.table-hover	鼠标悬停变色的表格
.table-condensed	紧缩型表格
.table-responsive	响应式表格

状态类

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.info`	标识普通的提示信息或动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

表单

内联表单

表单状态

带图标的表单

按钮

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

按钮样式

<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

按钮大小

<p>
  <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
  <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
  <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
  <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
</p>

图片

<img src="..." class="img-responsive" alt="Responsive image">

图片形状

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

辅助类

文本颜色

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

关闭按钮

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

下拉三角

<span class="caret"></span>

快速浮动

<div class="pull-left">...</div>
<div class="pull-right">...</div>

内容块居中

<div class="center-block">...</div>

清除浮动

<!-- Usage as a class -->
<div class="clearfix">...</div>

显示与隐藏

<div class="show">...</div>
<div class="hidden">...</div>

上面这些是摘自老师的。

下面是在css全局样式中自己看到的和老师上课总结的一些知识。

布局容器

<div class="container-fluid"> //全局的

<div class="container"> // 左右有空白的

栅格系统

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

<div class="container">
    <div class="row">
        <div class="col-md-1 col-xs-4">占1列</div><!--桌面级的设备占1列，小屏幕的占4列-->
        <div class="col-md-10 col-xs-4">占10列</div>
        <div class="col-md-1 col-xs-4">占1列</div>
    </div>
    <div class="row">
        <div class="col-md-5 col-md-offset-2">第二行 左边空两列</div><!--桌面级整体向右推动2格-->
    </div>
    <div class="row">
        <div class="col-md-3">占3列的div</div>
        <div class="col-md-6">占6列的div</div>
        <div class="col-md-6">占6列的div</div>
    </div>
       <div class="row">
        <div class="col-md-3 col-md-push-2">占3列的div</div><!--表示自己往左推进两行，可能会与右边的内容重合-->
        <div class="col-md-6">占6列的div</div>
    </div>
</div>

如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

补充：

push推，及把div往右推动 pull是拔把div往左边推动

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

媒体查询

.c1 {
            background-color: red;
        }

/*当打开网页的设备是一个显示器设备，并且显示器的宽度小于600px时，使用下面的样式*/
        @media screen and (max-width: 400px) {
            .c1 {
                background-color: green;
            }
        }

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

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

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

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

栅格参数

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	14px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是

Less mixin 和变量

没搞懂这是干嘛的，下去自己好好看一下。gutter是指每个div的间距的两倍（因为有两个），默认为60px,及一row中两个div里面的内容的间隔差不多比两个汉字的距离稍微还大2个px

排版

标题

HTML 中的所有标题标签，<h1> 到 <h6> 均可使用。另外，还提供了 .h1 到 .h6 类，为的是给内联（inline）属性的文本赋予标题的样式。

在标题内还可以包含 <small> 标签或赋予 .small 类的元素，可以用来标记副标题。

页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

中心内容

通过添加 .lead 类可以让段落突出显示。内容变大了。

使用less工具构建

没看懂

内联文本元素

下面都是标签：

</del>：删除线

</s>：无用文本，感觉和删除线一样。

<ins>：插入文本，下滑线

<u>：下划线

<small>：小写文本，父辈的0.85

<strong>：着重文本，加黑加粗

<em>：斜体

Alternate elements：

在 HTML5 中可以放心使用 <b> 和 <i> 标签。<b> 用于高亮单词或短语，不带有任何着重的意味；而 <i> 标签主要用于发言、技术词汇等。

对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p> 
<p class="text-nowrap">No wrap text.</p>

<!--text-justify:对齐文本，感觉没用啊-->
<!--text-nowrap：无包装的文本，感觉也没用-->

改变大小写

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

缩略语

<abbr title="attribute">attr</abbr>

首字母缩略语

<abbr title="attribute">attr</abbr>

为缩略语添加 .initialism 类，可以让 font-size 变得稍微小些。

地址

<address>
  <strong>alex</strong><br>
  北京老男孩教育大楼<br>
  五栋三栋308<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>jin boss</strong><br>
  <a href="mailto:#">654123151@example.com</a>
</address>

效果图

alex
北京老男孩教育大楼
五栋三栋308
P: (123) 456-7890 jin boss
654123151@example.com

不知道字体为什么变为了斜体，真实的效果图不是斜体的

引用

默认样式的引用建议直接用p标签

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

多种引用样式

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

汤家凤的闹铃

<blockquote>
  <p>年轻人你怎么睡得着觉，你怎么睡得着，有点。。。</p>
  <footer>汤家凤 <cite title="Source Title">汤家凤的起床闹铃</cite></footer>
</blockquote>

效果图

年轻人你怎么睡得着觉，你怎么睡得着，有点。。。
汤家凤汤家凤的起床闹铃

额，效果图有点不一样。

另外一种展示风格：

<blockquote class="blockquote-reverse"> ... </blockquote>

全部右对齐了而已

列表

无序列表

<ul class="list-unstyled">
  <li>...</li>
</ul

列联列表

以行的的形式排列

<ul class="list-inline">
  <li>...</li>
</ul>

描述

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

代码

<div >
    <dl>
      <dt>海燕1</dt>
      <dd>在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。

一会儿翅膀碰着波浪，一会儿箭一般地直冲向乌云，它叫喊着，──就在这鸟儿勇敢的叫喊声里，乌云听出了欢乐。

在这叫喊声里──充满着对暴风雨的渴望！在这叫喊声里，乌云听出了愤怒的力量、热情的火焰和胜利的信心。

</dd>
      <dt>海燕2</dt>
      <dd>海鸥在暴风雨来临之前呻吟着，──呻吟着，它们在大海上飞窜，想把自己对暴风雨的恐惧，掩藏到大海深处。

海鸭也在呻吟着，──它们这些海鸭啊，享受不了生活的战斗的欢乐：轰隆隆的雷声就把它们吓坏了。

</dd>
      <dd>蠢笨的企鹅，胆怯地把肥胖的身体躲藏到悬崖底下……只有那高傲的海燕.</dd>
      <dt>海燕4</dt>
      <dd>只有那高傲的海燕，勇敢地，自由自在地，在泛起白沫的大海上飞翔！

乌云越来越暗，越来越低，向海面直压下来，而波浪一边歌唱，一边冲向高空，去迎接那雷声。</dd>
    </dl>
  </div>

效果图

海燕1: 在苍茫的大海上，狂风卷集着乌云。在乌云和大海之间，海燕像黑色的闪电，在高傲地飞翔。一会儿翅膀碰着波浪，一会儿箭一般地直冲向乌云，它叫喊着，──就在这鸟儿勇敢的叫喊声里，乌云听出了欢乐。在这叫喊声里──充满着对暴风雨的渴望！在这叫喊声里，乌云听出了愤怒的力量、热情的火焰和胜利的信心。
海燕2: 海鸥在暴风雨来临之前呻吟着，──呻吟着，它们在大海上飞窜，想把自己对暴风雨的恐惧，掩藏到大海深处。海鸭也在呻吟着，──它们这些海鸭啊，享受不了生活的战斗的欢乐：轰隆隆的雷声就把它们吓坏了。; 蠢笨的企鹅，胆怯地把肥胖的身体躲藏到悬崖底下……只有那高傲的海燕.
海燕4: 只有那高傲的海燕，勇敢地，自由自在地，在泛起白沫的大海上飞翔！乌云越来越暗，越来越低，向海面直压下来，而波浪一边歌唱，一边冲向高空，去迎接那雷声。

水平排列描述：

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

效果图：

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

自动截断

通过 `text-overflow` 属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。

代码

内敛代码

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

效果图：

For example, <section> should be wrapped as inline.

用户输入：

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

效果图:

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

代码块：

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

效果图
<p>Sample text here...</p>
还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。

变量

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

程序输出

<samp>This text is meant to be treated as sample output from a computer program.</samp>

表格

<table class="table">
  ...
</table>

条纹表格

每一行增加斑马条纹样式

<table class="table table-striped">
  ...
</table>

带边框的的表格

<table class="table table-bordered">
  ...
</table>

鼠标悬停

每一行对鼠标悬停状态作出响应

<table class="table table-hover">
  ...
</table>

状态类

通过这些状态类可以为行或单元格设置颜色。

<table class="table">
    <thead>
        <th></th>
    </thead>
    <tbody>
        <tr class="active">
            <td></td>
        </tr>
    </tbody>
</table>

Class	描述
`.active`	鼠标悬停在行或单元格上时所设置的颜色
`.success`	标识成功或积极的动作
`.info`	标识普通的提示信息或动作
`.warning`	标识警告或需要用户注意
`.danger`	标识危险或潜在的带来负面影响的动作

button标签

。

扫码关注我们

微信号：SRE实战

拒绝背锅运筹帷幄

赞 0 赏分享

转载请注明 : 文章转载自小翔博客 bootstap初识之css

本文标题：bootstap初识之css

本文链接：https://www.liuyixiang.com/post/27894.html

上一篇 : 『并发包入坑指北』之阻塞队列

下一篇 : Mybatis的MapperRegistry错误

评论列表暂无评论

发表评论

« 2024年2月 »
一	二	三	四	五	六	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29