Bootsrap 3.0：全局CSS样式

最新推荐文章于 2024-08-08 18:04:00 发布

trouble-i-am-in

最新推荐文章于 2024-08-08 18:04:00 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/YQXLLWY/article/details/69817459

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

bootstrap内容摘录１

全局CSS样式

概览

设置为HTML 5文档类型

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

启用页面缩放功能

<meta name="viewport" content="width=device-width, initial-scale=1">

关闭页面缩放功能

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

排版与链接

body

background-color:
font

@font-family-base @font-size-base @line-height-base
link

@link-color :hover

布局容器

固定宽度并支持响应式布局的容器
```
<div class="container">
... 
</div>
```
占据全部视图的容器，类似100%宽度
```
<div class=".container-fluid">
...
</div>
```

栅格系统

简介

row必须包含在container或者container-fluid之中
只有column可以作为row的直接子元素
可以通过为column设置padding属性，从而创建间隔
可以为row设置负值的margin从而抵消掉container默认的padding值

栅格参数

属性	超小屏幕(<768px)	小屏幕(>=768px)	中等屏幕(>=992px)	大屏幕(>=1200px)
container最大宽度	none	750px	970px	1170px
类前缀	xs	sm	md	lg
槽宽	none	62px	81px	97px

响应式列重置

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</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>

排版

h1~h6
small
```
<h1>h1<small>small</small></h1>
```

页面主体

<p>...</p>
<p class="lead">lead这个可以提升文字的显示内容</p>

内联文本元素

<mark>high light</mark>

删除线

<del>This line of text is mean to be treated as deleted text.</del>
<s>这个也是起同样的功能</s>

增加下划线

<ins>下划线</ins>
<u>这个也是下划线</u>

增强显示

<strong>增强显示</strong>

斜体

<em>斜体</em>

对齐方式

text-left
text-center
text-right
text-justify
text-nowrap

Example

<div class="text-left"></div>

改变大小写

text-lowercase
text-uppercase
text-capitalize

所略语

<abbr title="这里是所略语的内容">这里是原本的文本</abbr>

地址

<address></address>

引用

<blockquote>
    这里是引用的内容
    <footer>这里是备注，也表示来源<cite title="这里是提示信息">这里是加强显示内容部分</cite></footer>
</blockquote>

<blockquote class="blockquote-reverse">
    这里是将上面的显示内容放到了右侧    
</blockquote>

列表

<ul>
    <li>
        <ul>
            <li>这里是在列表中嵌套列表</li>
        </ul>
    </li>
    <li>
        这里是正常的列表        
    </li>
</ul>

去除掉列表样式

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

内联列表(就是横向排列的列表)

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

带有标题和短语的类表

<dl>
  <dt>这里是标题</dt>
  <dd>这里是正文</dd>
</dl>

这样会使上面的标题和短语横向排列并优化显示内容

<dl class="dl-horizontal">
  <dt>这里是标题</dt>
  <dd>这里是正文</dd>
</dl>

代码

内联代码

<code></code>

用户输入

<kbd></kbd>

代码块

<pre></pre>

增加横向滚动条：

<pre class="pre_scrollable"></pre>

变量

<var></var>

标记程序输出内容

<samp></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 table-condensed"></table>

为表格设置状态(其实就是不同的颜色)

active
success
info
warning
danger

以上属性是为tr设置的。

响应式表格

<div class="table-responsive">
    <table class="table">注意，这里的table-responsive属性不是加在table标签中的，而是包含主table标签</table>
</div>

表单

基础表单

所有input,textarea,select等都被包裹在form-control中，前面的文字提示被包裹在label中，两者一起被包裹在form-group中。

<form>
    <div class="form-group">
        <label for="需要跟下面的id对应">exampleInput</label>
        <input type="email" class="form-control" id="要跟上面label的标签对应" placeholder="">
    </div>
</form>

内联表单

就是为form添加一个form-inline属性

<form class="form-inline">
    <div class="form-group">
        <label for="需要跟下面的id对应">exampleInput</label>
        <input type="email" class="form-control" id="要跟上面label的标签对应" placeholder="">
    </div>
</form>

水平排列表单

<form class="form-horizontal">
</form>

HTML5：输入控件

可以被添加在type上：

text
password
datetime
datetime-local
date
month
time
week
number
email
url
search
tel
color

其实就是html5内置了一些自动检查的机制。

多行文本输入

rows

单选框和多选框

单选框

<div class="redio">
    <label>
        <input type="radio">
        这里填写文本
    <label>
</div>

禁止当前单选框设置

<div class="radio disabled">
<!--这里的disabled只是添加一个禁止的样式-->
    <label>
        <!--只有这里设置了禁止，才能真正关闭该单选框-->
        <input type="radio" disabled>
        这里填写文本
    </label>
</div>

就禁止来说，下面的复选框也是一样的原理。

复选框

<div class="checkbox">
    <label>
        <input type="checkbox">
        这里填写文本
    </label>
</div>

内联单选框和复选框

可以为label，注意是label，设置checkbox-inline或者radio-inline，来使其达到横向排列的功能。

<label class="checkbox-inline">
    <input type="checkbox">
    这里填写内容
</label>
<label　class="checkbox-inline">
    <input type="checkbox">
    注意，多个label之间都设置checkbox-inline
</label>

下拉列表

<select class="form-control">
    <option></option>
</select>

可以为select添加multiple，就会将下拉菜单中的全部内容都显示出来供人选择。

<select multiple class="form-control">
    <option></option>
</select>

禁用表单

<form>
    <fieldset disabled>
        <!--这样，在表单中的所有input都被禁用了-->
    </fieldset>
</form>

设置提示信息

就是以灰色，只读模式出现在输入框下面的文字

<label class="sr-only"　for="填写下面的input的id">这里是内容提示</label>
<input type="textarea" class="form-control" id="" aria-describedby="下面的id">
<span id="上面的aria-describedby">这里显示提示信息</span>

在input之后添加显示信息

<div class="form-group has-feedback">
    <label class="control-label" for="">这里显示内容提示</label>
    <input type="" id="" class="form-control" aria-describedby="">
    <span class="图标 form-control-feedback" aria-hidden="true"></span>
</div>

控件大小设置

input-lg
input-sm

按钮

将标签设置为按钮样式

btn btn-default

<a href="#" class="btn btn-default" role="button">将超链接设置成按钮样式，需要添加role</a>

按钮样式

btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
btn-link

按钮大小

btn-lg
btn-primary/btn-defalut
btn-sm
btn-xs

将按钮变为块级元素

btn-block

设置按钮为激活状态

active

图片

设置图片为响应式图片

img-responsive

设置图片居中

center-block

设置图片外观

img-rounded
img-circle
img-thumbnail

辅助类

设置文本颜色

text-muted
text-primary
text-success
text-info
text-warning
text-danger

设置背景颜色

bg-primary
bg-success
bg-info
bg-warning
bg-danger

关闭按钮

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

直接用就可以了

三角符号

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

清除浮动

clearfix

显示或者隐藏内容

show
hidden

仅隐藏文字：

text-hide

响应式工具

根据屏幕大小设置是否显示内容或者隐藏

visible-xs
visible-sm
visible-md
visible-lg

hidden-xs
hidden-sm
hidden-md
hidden-lg