11月21日学习内容整理：bootstrap全局CSS样式-白红宇

11月21日学习内容整理：bootstrap全局CSS样式

阅读量：6196 次

发布时间：2019-06-21

本文共 5180 字，大约阅读时间需要 17 分钟。

地址：http://v3.bootcss.com/css/#overview

一、介绍

Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。

它是为实现快速开发Web应用程序而设计的一套前端工具包。

它支持响应式布局，并且在V3版本之后坚持移动设备优先。

二、目录结构

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有些组件是根据jquery写的，所以也要有对应版本的jquery

三、bootstrap的基本模版

      
         
         
         
         Bootstrap 101 Template    
         
         
         
         
             你好，世界！

四、全局CSS样式

（一）、布局容器

Bootstrap 需要为页面内容和栅格系统 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

（1）class=container 左右两边会有空白，类用于固定宽度并支持响应式布局的容器。

（2）class=container-fluid 宽度会占满100%，类用于 100% 宽度，占据全部视口（viewport）的容器。

注意两种容器不能嵌套

（二）、栅格系统

栅格系统用于通过一系列的行（.row）与列（.column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中

（1）1个行最多有12个列

（2）row必须放到container和container-fluid里面

（3）你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

（4）栅格参数：col-xxxx-数字，xxxx代表是哪一种屏幕，数字代表占几列，最多12，并且同一个元素可以写多个栅格参数，代表不同情况下用不同的样式

（5）注意：container有一个padding是15px，row有一个margin是-15px

补充：CSS媒体查询

@media screen and （max-width:600px）｛样式操作｝指的是当屏幕的宽度属于600px的范围内的时候就会采用样式操作中设定的样式

3、列偏移

col-md-offset-3 向右偏移3列，md还是指的是屏幕样式

4、列嵌套

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

5、列排序

以左侧为基准，push是往右移，pull是往左移

.col-md-push-9 往右移9列，md还是屏幕样式

.col-md-pull-8 往左移8列，md还是屏幕样式

（三）、排版

1、标题：small是小标题

h1. Bootstrap heading Secondary text
h2. Bootstrap heading Secondary text
 h3. Bootstrap heading Secondary text
 h4. Bootstrap heading Secondary text
 h5. Bootstrap heading Secondary text
 h6. Bootstrap heading Secondary text

2、页面主体

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

中心内容用.lead <p class="lead">...</p>

3、内联文本元素

（1）被删除的文本：<del>文本</del>

（2）无用文本：<s>文本</s>

（3）插入文本：<ins></ins>

（4）带下划线

（5）小号

（6）着重

（7）斜体

4、对齐

<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> 这个不常用，不用管

5、改变大小写

6、缩略语

7、地址

8、引用

9、列表

（四）、代码

1、内联代码

2、用户输入

3、基本代码块

4、变量

5、程序输出

（五）、表格

1、基本实例：class=table

》》》为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线。这种方式看起来很多余！？但是我们觉得，表

》》》格元素使用的很广泛，如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件，所以我们选择将此样式独立出来。

2、条纹状表格

》》》通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式。

3、带边框的表格

》》》添加 .table-bordered 类为表格和其中的每个单元格增加边框。

4、鼠标悬停

》》》通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

5、紧缩表格

》》》通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

6、状态类

通过这些状态类可以为行或单元格设置颜色。每一种对应不同的颜色

7、响应式表格

》》》将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水

》》》平滚动条消失。

<div class="table-responsive"> // table外面包裹一层div

　　...

　　</table>

</div>

（六）、表单

1、基本实例

》》》单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 》》》100%;。将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。


       
          
       Email address

2、内联表单：就是排在一行显示

》》》为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再

》》》小的话就会使表单折叠）。

注意：可能要手动设置宽度，必须要有label标签

3、水平排列的表单

》》》通过为表单添加 .form-horizontal 类，并联合使用 Bootstrap 预置的栅格类，可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group 的行

》》》为，使其表现为栅格系统中的行（row），因此就无需再额外添加 .row 了。


       
          
       Email    
             
            
       
  
      
  
          
       Password    
             
            
       
  
      
  
          
             
                
                    Remember me