bootstrap(一)

GitHub上这样介绍 bootstrap:##

☑  简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。
☑  基于html5、css3的bootstrap,具有大量的诱人特性:友好的学习曲线,卓越的兼容性,响应式设
    计,12列格网,样式向导文档。
☑  自定义JQuery插件,完整的类库,基于Less等。

基本的HTML模板##




    
    
    
    
    
    Bootstrap的HTML标准模板   
    
    
    
            
    
    


    

Hello, world!

全局样式##

Bootstrap框架的核心是轻量的CSS基础代码库,他并没有一味的重置样式,而是注重重置可能产生问题的样式(如,body,form的margin等),保留和坚持部分浏览器的基础样式,解决部分潜在的问题,提升一些细节的体验,具体说明如下:

  • 移除body的margin声明
  • 设置body的背景色为白色
  • 为排版设置了基本的字体、字号和行高
  • 设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式

强调相关的类##

Bootstrap定义了一套类名,这里称其为强调类名(类似前面说的“.lead”),这些强调类都是通过颜色来表示强调,具本说明如下:

.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
bootstrap(一)_第1张图片
Paste_Image.png

Bootstrap根据平时的使用情形提供了六种形式的列表:

☑  普通列表
☑  有序列表
☑  去点列表(.list-unstyled)
☑  内联列表(.list-inline)
☑  描述列表
☑  水平描述列表(.dl-horizontal)

代码(一)##

本节内容相对来说比较简单,一般在个人博客上使用的较为频繁,用于显示代码的风格。在Bootstrap主要提供了三种代码风格:

1、使用来显示单行内联代码
2、使用
来显示多行块代码
3、使用来显示用户输入代码

预编译版本的Bootstrap将代码的样式单独提取出来:

1、LESS版本,请查阅code.less文件
2、Sass版本,请查阅_code.scss文件
编译出来的CSS代码请查阅bootstrap.css文件第688行~第730行,由于代码太长,此处不一一列举。

在使用代码时,用户可以根据具体的需求来使用不同的类型:

1、:一般是针对于单个单词或单个句子的代码
2、
:一般是针对于多行代码(也就是成块的代码)
3、:一般是表示用户要通过键盘输入的内容

虽然不同的类型风格不一样,但其使用方法是类似的。
code风格:

Bootstrap的代码风格有三种:

  

pre风格:

  • ...
  • ...
  • ...

在pre标签上添加类名“.pre-scrollable”,就可以控制代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条。
/源码请查看bootstrap.css第731行~第734行/

.pre-scrollable {
              max-height: 340px;
              overflow-y: scroll;
              }

kbd风格:

请输入ctrl+c来复制代码,然后使用ctrl+v来粘贴代码
不管使用哪种代码风格,在代码中碰到小于号(<)要使用硬编码“<”来替代,大于号(>)使用“>”来替代。 而且对于
代码块风格,标签前面留多少个空格,在显示效果中就会留多少个空格。
bootstrap(一)_第2张图片
三种代码对应的不同风格

表格##

表格是Bootstrap的一个基础组件之一,Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中,只需要添加对应的类名就可以得到不同的表格风格。

同样的,如果你对CSS预处理器熟悉,你可以使用Bootstrap提供的预处理版本:
☑ LESS版本,对应的文件是 tables.less
☑ Sass版本,对应的文件是 _tables.scss

Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:
☑ .table:基础表格
☑ .table-striped:斑马线表格
☑ .table-bordered:带边框的表格
☑ .table-hover:鼠标悬停高亮的表格
☑ .table-condensed:紧凑型表格
☑ .table-responsive:响应式表格

Bootstrap还为表格的行元素提供了五种不同的类名,每种类名控制了行的不同背景颜色,具体说明如下表所示:

bootstrap(一)_第3张图片
每种类名控制了行的不同背景颜色

特别提示:除了”.active”之外,其他四个类名和”.table-hover”配合使用时,Bootstrap针对这几种样式也做了相应的悬浮状态的样式设置,所以如果需要给tr元素添加其他颜色样式时,在”.table-hover”表格中也要做相应的调整。

注意要实现悬浮状态,需要在

标签上加入table-hover类。

如下代码:

基础表单##

表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域按钮等。其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同。

你可能感兴趣的:(bootstrap(一))