bootstrap基础（一）
admin
2023-08-02 15:51:58
0次 
- bootstrap 基础
- 使用方法

首先下载 bootstrap

传送门：中文文档http://v3.bootcss.com/

传送门：英文文档http://getbootstrap.com/

bootstrap基本模板


    
     
        
        
        
        
        Bootstrap 101 Template

        
        

        
        
            
      
  
    
你好，世界！

全局样式style.css

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

标题类

你好，世界！


你好，世界！


你好，世界！


你好，世界！


你好，世界！


你好，世界！




hello world


hello world


hello world


hello world


hello world

.h1~.h6 效果


Mou icon

副标题

hello world你好 世界！


hello world你好 世界！


hello world你好 世界！


hello world你好 世界！


hello world你好 世界！

效果如下：


Mou icon

bootstrap 预处理

在bootstrap中有些便签是本来就一应预处理好的 

例：a 标签 本身是自带一些默认性的，如：   
color: -webkit-link;
text-decoration: underline;
cursor: auto;

但是在bootstrap中这些属性都被预处理了
设置了全局链接颜色，并且当处于悬浮“：hover”时才会显示下划线样式
color: #337ab7;
text-decoration: none;
background-color: transparent;

强调内容

.lead 一般段落标签使用

例：

我是段落

与

我是段落

效果如下：


Mou icon

a.其他强调标签


 (已经快废弃)

强调相关的类

text-muted：提示，使用浅灰色（#999）
text-primary：主要，使用蓝色（#428bca）
text-success：成功，使用浅绿色(#3c763d)
text-info：通知信息，使用浅蓝色（#31708f）
text-warning：警告，使用黄色（#8a6d3b）
text-danger：危险，使用褐色（#a94442）

例：

我是text-muted


我是text-primary


我是text-success


我是text-info


我是text-warning


我是text-danger


我是段落

效果如下：


Mou icon

文本对齐风格

  text-left：左对齐
  text-center：居中对齐
  text-right：右对齐
  text-justify：两端对齐

例：

 

 
  Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 

  加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速
度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 

  主页查看更多可用的工具库。





  Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 

  加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速
度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 

  主页查看更多可用的工具库。





  Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 

  加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速
度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 

  主页查看更多可用的工具库。





  Bootstrap 中文网 为 Bootstrap 专门构建了自己的免费 CDN 加速服务。基于国内云厂商的 CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap 中文网还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 主页查看更多可用的工具库。

效果如下：


Mou icon

列表

ul 去序列样式 
    
例：    

      
  
    • 我是无序列
      • 
  
    • 我是无序列
      • 
  
    • 我是无序列
      •

效果如下：


Mou icon


Mou icon

ol 去序列样式
    
例：

      
  
    1. 我是有序
      2. 
  
    2. 我是有序
      3. 
  
    3. 我是有序
      4.

效果入下：


Mou icon


Mou icon

ul ol 水平列表：list-inline
把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示

例：

    
  
  • 我是无序列
    • 
  
  • 我是无序列
    • 
  
  • 我是无序列
    • 



    
  
  1. 我是有序
    2. 
  
  2. 我是有序
    3. 
  
  3. 我是有序
    4.

效果如下：


Mou icon

dl 水平列表：dl-horizontal
屏幕大于768px的时候，添加类名“.dl-horizontal”才具有水平定义列表效果
例：


  
我是列标题

  
我是内容

  
我市内容

屏幕小于768px


Mou icon

屏幕大于768px


Mou icon

代码风格

code标签
 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。
软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来，对于大多数程序员户来说，这应该是十分熟悉的。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用  标签。虽然  标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如，程序员的浏览器可能会寻找  片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。
一般是针对于单个单词或单个句子的代码
例： 

    var mun1=10

效果如下：


Mou icon

pre-scrollable
只需要在pre标签上添加类名“.pre-scrollable”，就可以控制代码块区域最大高度为340px，一旦超出这个高度，就会在Y轴出现滚动条。
例：

    function(){
      我是一个函数
      我是测试
    }
     function(){
      我是一个函数
      我是测试
    }
     function(){
      我是一个函数
      我是测试
    }
     function(){
      我是一个函数
      我是测试
    }
     function(){
      我是一个函数
      我是测试
    }
     function(){
      我是一个函数
      我是测试
    }
     function(){
      我是一个函数
      我是测试
    }

     function(){
      我是一个函数
      我是测试
    }

效果如下：


Mou icon

bootstrap-表格

基础表格：
.table
给表格设置了margin-bottom:20px以及设置单元内距
在thead底部设置了一个2px的浅灰实线
每个单元格顶部设置了一个1px的浅灰实线

例：
 
  
    

      我是头标题
      我是头标题
      我是头标题
    

  
  
    

      我是单元
      我是单元
      我是单元
    

    

      我是单元格
      我是单元格
      我是单元格
    

    

      我是单元格
      我是单元格
      我是单元格

效果如下：


Mou icon

附加样式表格    
附加样式表格
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格（减小paading 值）

例：


Mou icon

响应式表格
.table-responsive



Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将
置于这个容器当中，这样表格也就具有响应式效果
当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失
例：


    
 
  
    

      我是头标题
      我是头标题
      我是头标题
    

  
  
    

      我是单元格我是单元格我是单元格我是单元格我是单元格
      我是单元格我是单元格我是单元格我是单元格我是单元格
      我是单元格我是单元格我是单元格我是单元格我是单元格
    

    

      我是单元格
      我是单元格
      我是单元格
    

    

      我是单元格
      我是单元格
      我是单元格

屏幕小于768px


Mou icon

屏幕大于768px


Mou icon

bootstrap-图片 和图标

bootstrap－图片
使用方法非常简单，只需要在标签上添加对应的类名
img-responsive：响应式图片，主要针对于响应式设计
img-rounded：圆角图片
img-circle：圆形图片
img-thumbnail：缩略图片

bootstrap-图标

    Bootstrap框架中也为大家提供了近200个不同的icon图片，

    而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。

传送门：中文http://getbootstrap.com/components/#glyphicons
传送门：英文http://v3.bootcss.com/components/

    查看所有图标名称
任何行级元素都可以，通常使用span标签坐图标容器
在Bootstrap框架中是通过给元素添加“glyphicon”类名来实现，
    






  好了到这里 bootstrap基础（一）就结束了，，，

上一篇：jQuery简明参考手册——30分钟快速入门jQuery

下一篇：二十分钟学会Javascript高级进阶

相关内容

热门资讯

500 行 Python 代码... 语法分析器描述了一个句子的语法结构，用来帮助其他的应用进行推理。自然语言引入了很多意外的歧义，以我们...
Mobi、epub格式电子书如... 在wps里全局设置里有一个文件关联，打开，勾选电子书文件选项就可以了。
定时清理删除C:\Progra... C:\Program Files (x86)下面很多scoped_dir开头的文件夹 写个批处理 定...
scoped_dir32_70... 一台虚拟机C盘总是莫名奇妙的空间用完，导致很多软件没法再运行。经过仔细检查发现是C:\Program...
65536是2的几次方 计算2... 65536是2的16次方：65536=2⁶ 65536是256的2次方：65536=256 6553...
小程序支付时提示：appid和... [Q]小程序支付时提示：appid和mch_id不匹配 [A]小程序和微信支付没有进行关联，访问“小...
pycparser 是一个用... `pycparser` 是一个用 Python 编写的 C 语言解析器。它可以用来解析 C 代码并构...
微信小程序使用slider实现... 众所周知哈，微信小程序里面的音频播放是没有进度条的，但最近有个项目呢，客户要求音频要有进度条控制，所...
Apache Doris 2.... 亲爱的社区小伙伴们，我们很高兴地向大家宣布，Apache Doris 2.0.0 版本已于...
python清除字符串里非数字... 本文实例讲述了python清除字符串里非数字字符的方法。分享给大家供大家参考。具体如下： impor...