Bootstrap基础学习(一)

一、Bootstrap 概述

     Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML、CSS、JavaScript 的开源框架。该框架代码简洁、视觉优美，可用于快速、简单地构建基于 PC 及移动端设备的 Web 页面需求。
     2010 年 6 月，Twitter 内部的工程师为了解决前端开发任务中的协作统一问题。经历各种方案后，Bootstrap 最终被确定下来，并于 2011 年 8 月发布。经过很长时间的迭代升级，由最初的 CSS 驱动项目发展成为内置很多 JavaScript 插件和图标的多功能 Web 前端的开源框架。
     Bootstrap 最为重要的部分就是它的响应式布局，通过这种布局可以兼容 PC 端、PAD以及手机移动端的页面访问。

 

二、Bootstrap 特点

Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：
(1)跨设备、跨浏览器
     可以兼容所有现代浏览器，包括比较诟病的 IE7、8。

(2)响应式布局
     不但可以支持 PC 端的各种分辨率的显示，还支持移动端 PAD、手机等屏幕的响应式切换显示。

(3)提供的全面的组件
     Bootstrap 提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。

(4)内置 jQuery 插件
     Bootstrap 提供了很多实用性的 jquery 插件，这些插件方便开发者实现 Web 中各种
常规特效。

(5)支持 HTML5、CSS3
     HTML5 语义化标签和 CSS3 属性，都得到很好的支持。

(6)支持 LESS 动态样式
     LESS 使用变量、嵌套、操作混合编码，编写更快、更灵活的 CSS。它和 Bootstrap 能
很好的配合开发。

 

三、排版样式

     Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。

1.页面主体

     Bootstrap 将全局 font-size 设置为14px，line-height 行高设置为 1.428(即20px)，<p>段落元素被设置等于 1/2 行高(即 10px)，颜色被设置为#333。

<p>Bootstrap测试1</p>
<p>Bootstrap测试2</p>
<p>Bootstrap测试3</p>
<p>Bootstrap测试4</p>

效果:

 

2.标题

     我们从firebug查看元素了解到，Bootstrap 分别对h1 ~ h6进行了CSS样式的重构，在 h1 ~ h6 元素之间，还可以嵌入一个 small元素作为副标题。

    <h1>Bootstrap <small>h1样式 </small></h1>
    <h2>Bootstrap <small>h2样式 </small></h2>
    <h3>Bootstrap <small>h3样式 </small></h3>
    <h4>Bootstrap <small>h4样式 </small></h4>
    <h5>Bootstrap <small>h5样式 </small></h5>
    <h6>Bootstrap <small>h6样式 </small></h6>

效果:

    

 

3.对齐

     设置文本对齐。

    <!-- 居左 -->
    <p class="text-left">Bootstrap 框架</p>
    <!-- 居中 -->
    <p class="text-center">Bootstrap 框架</p>
    <!-- 居右 -->
    <p class="text-right">Bootstrap 框架</p>

效果:

 

4.引用文本

    <blockquote>
        Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
        本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、   Bootstrap 布局组件
        和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。
    </blockquote>

效果:

    

 

5.列表排版

      <ul class="list-inline">
          <li>Spring</li>
          <li>Struts2</li>
          <li>SpringMVC</li>
          <li>Mybatis</li>
          <li>Hibernate</li>
      </ul>

效果:

     

 

四、表格

1.基本格式

      <!-- 1.基本格式 -->
      <table class="table">
          <thread>
              <tr>
                  <th>编号</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
              </tr>
          </thread>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>AAA</td>
                  <td>男</td>
                  <td>22</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>BBB</td>
                  <td>女</td>
                  <td>20</td>
              </tr>
          </tbody>
      </table>

效果:

    

 

2.条纹状表格

     让<tbody>里的行产生一行隔一行加单色背景效果。

      <!-- 2.条纹状表格 -->
      <table class="table table-striped">
          <thread>
              <tr>
                  <th>编号</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
              </tr>
          </thread>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>AAA</td>
                  <td>男</td>
                  <td>22</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>BBB</td>
                  <td>女</td>
                  <td>20</td>
              </tr>
              <tr>
                  <td>3</td>
                  <td>CCC</td>
                  <td>女</td>
                  <td>21</td>
              </tr>
              <tr>
                  <td>4</td>
                  <td>DDD</td>
                  <td>女</td>
                  <td>23</td>
              </tr>
          </tbody>
      </table>

效果:

    

 

3.带边框表格

      <!-- 3.带边框的表格 -->
      <table class="table table-bordered">
          <thread>
              <tr>
                  <th>编号</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
              </tr>
          </thread>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>AAA</td>
                  <td>男</td>
                  <td>22</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>BBB</td>
                  <td>女</td>
                  <td>20</td>
              </tr>
          </tbody>
      </table>

效果:

    

 

4.悬停鼠标

     让<tbody>下的表格悬停鼠标实现背景效果。

      <!-- 4.悬停鼠标 -->
      <table class="table table-hover">
          <thread>
              <tr>
                  <th>编号</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
              </tr>
          </thread>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>AAA</td>
                  <td>男</td>
                  <td>22</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>BBB</td>
                  <td>女</td>
                  <td>20</td>
              </tr>
          </tbody>
      </table>

效果:

    

 

5.状态类

     可以单独设置每一行的背景样式。有active、success、info、warning、danger。

<!-- 5.状态类 -->
      <table class="table table-hover">
          <thread>
              <tr>
                  <th>编号</th>
                  <th>姓名</th>
                  <th>性别</th>
                  <th>年龄</th>
              </tr>
          </thread>
          <tbody>
              <tr class="success">
                  <td>1</td>
                  <td>AAA</td>
                  <td>男</td>
                  <td>22</td>
              </tr>
              <tr class="active">
                  <td>2</td>
                  <td>BBB</td>
                  <td>女</td>
                  <td>20</td>
              </tr>
              <tr class="info">
                  <td>3</td>
                  <td>CCC</td>
                  <td>女</td>
                  <td>21</td>
              </tr>
              <tr class="warning">
                  <td>4</td>
                  <td>DDD</td>
                  <td>女</td>
                  <td>23</td>
              </tr>
              <tr class="danger">
                  <td>5</td>
                  <td>EEE</td>
                  <td>女</td>
                  <td>18</td>
              </tr>
          </tbody>
      </table>

效果:

    

 

五、按钮

1.样式

        <!-- 样式 -->
        <button class="btn btn-default">默认样式</button>      <br><br>
        <button class="btn btn-success">成功样式</button>      <br><br>
        <button class="btn btn-info">信息样式</button>          <br><br>
        <button class="btn btn-warning">警告样式</button>      <br><br>
        <button class="btn btn-danger">危险样式</button>

效果:

    

 

2.尺寸大小

        <!-- 尺寸大小 -->
        <button class="btn btn-info">Button</button>
        <button class="btn btn-info btn-lg">Button</button>
        <button class="btn btn-info btn-sm">Button</button>
        <button class="btn btn-info btn-xs">Button</button>

效果:

     

 

3.激活与禁用状态

        <!-- 激活状态与禁用状态 -->
        <button class="btn btn-info active">Button</button>
        <button class="btn btn-info active diabled">Button</button>

效果:

    

时间： 2024-09-28 03:41:40

Bootstrap基础学习(一)的相关文章

bootstrap基础学习【表单含按钮】（二）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[表单](二)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body style="padd

bootstrap基础学习【菜单、按钮、导航】（四）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[菜单.按钮.导航](四)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script src="http://libs.

【Bootstrap基础学习】00 序

其实这样的东西很多了,但是我就是要写. 我写这种鬼东西只是为了监督自己,如果能顺便帮一下别人就更好了. 这个系列的基础学习,不会去看实体书,主要是去看网上的资料和官网. Bootstrap就是对jQuery的一次再开发,所以jQuery脚本引用必须在bootstrap脚本之前. <link type="text/css" rel="stylesheet" href="./styles/bootstrap.min.css"/> <

Bootstrap(基础)学习笔记1

Bootstrap到底是什么? 欢迎来到Bootstrap课堂,加入高端大气上档次的web前端开发团队.上一小节Bootstrap做了简单的介绍,下面我们再来了解一下Bootstrap的前世今缘,在右侧是用Bootstrap预设的组件样式,包括按钮.表格.标签.导航等,感兴趣的小伙伴可以先睹为快,后面的章节我们会对这些组件做详细讲解. 2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootSt

Bootstrap 基础学习笔记（一）

排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值,  h1~h3重置后的值都是20px:h4~h6重置后的值都是10px.2.所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体.3.固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px. 代码 1 <!DOCTYPE HTML> 2

bootstrap基础学习五篇

bootstrap表格 Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格标题行的容器元素(<tr>),用来标识表格列. <tbody> 表格主体中的表格行的容器元素(<tr>). <tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>). <td> 默认的

BOOTSTRAP基础学习小记（三）网格简介-web前端

网格系统:网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Bootstrap框架中的网格系统就是将容器平分成12份. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>实现原理</title> <link rel

【Bootstrap基础学习】04 Bootstrap的HTML和CSS编码规范

HTML 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格) 对于属性的定义,确保全部使用双引号,绝不要使用单引号. 不要在自闭合(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的. 不要省略可选的结束标签(closing tag)(例如,</li> 或 </body>). <html lang="zh-CN">强烈建议为 html 根元素

【Bootstrap基础学习】01 Bootstarp的CSS

Bootstrap 使用了一些 HTML5 元素和 CSS 属性,所以需要使用 HTML5 文档类型. <!DOCTYPE html> <html lang="zh-CN"> ... </html> 为了让 Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签,如下所示: <meta name="viewport" content=&quo