目录

​​一、思维导图​​

​​二、排版（代码里面有注解）​​

​​三、代码（代码里面有注解）​​

​​四、表格（代码里面有注解）​​

​​       一、思维导图​​

带你们了解一下这一章会给你们带来什么？你们会学什么？简不简单学？

Bootstrap2【上手教程】_前端

 

​​二、排版（代码里面有注解​​）
 页面主体：Bootstrap将全局font-size设置为14px,line-height设置为20px，段落的行高设置为10px，颜色设置为#333。我们可以通过在页面按F12查看body的样式

段落突出：通过.lead类可以让段落突出显示，
标题：
        1. h1- h6
        2.<h1><small>副标题</small></h1>
        3.class=”h1”...class=”h6”
内联文本元素:
        标记：class=”mark”
        线条:1、删除：<del>I like </del> 或者<s>I like</s>
                 2、下划线：<ins>I like </ins> 或者<u>I like</u>
        强调文本: 1、小字体<small>：标准字号的85%
                         2、文本加粗：<strong>
                         3、文本倾斜：<em>
        对齐:
            1、居左：class=”text-left”
            2、居中：class=”text-center”
            3、居右：class=”text-right”
       改变大小写:
          1、大写：class=”text-uppercase”
         2、小写：class=”text-lowercase”
         3、首字母大写：class=”text-capitalize”
    缩略词
        1.当鼠标悬停在缩写和缩写词上就会显示完整内容
        2.基本缩略语：<abbr title=”完整内容”>
        3.首字母缩略语：<abbr title=”完整内容” class=”initialism”>
    地址:
         让联系信息以最近日常使用格式呈现
         <address></address>
    引用:
         1、默认样式的引用：<blockquote>   <footer>
         2、右对齐样式引用：<blockquote class=”blockquote-reverse”>
    列表:
        1、有序列表：<ol><li> 同HTML
        2、无序列表：<ul><li> 同HTML
        3、无样式列表：<ul class=”list-unstyled”>,去掉li前面的点
        4、内联列表：<ul class=”list-inline”>，li显示在一行
        5、描述列表：<dl class=”dl-horizontal”>。 horizontal:水平
里面的jquery文件可以去网上下载，先给你们看效果图，后放代码

Bootstrap2【上手教程】_HBuilderX_02

 

Bootstrap2【上手教程】_jquery_03

 

Bootstrap2【上手教程】_jquery_04

<!-- 引用文件 -->
    <!-- 先引用jq库 -->
    <script type="text/javascript" src="js/jquery-3.3.1.js">
    </script>
    <script type="text/javascript" src="js/bootstrap.js">
    </script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
  </head>
  <body>
    <!-- 全局CSS样式 -->
    <h2>一、排版</h2>
    <h3 class="mark">1.1 段落突出</h3>
      <p>Bootstarp:排版、代码、表格</p>
      <p class="lead">Bootstarp:排版、代码、表格</p>
    <h3 class="mark">1.2 标题</h3>
      <h1>卓越人生，<small>从现在开始</small></h1>
      <p class="h1">卓越人生，从现在开始</p>
      <p class="h2">卓越人生，从现在开始</p>
      <p class="h3">卓越人生，从现在开始</p>
      <p class="h4">卓越人生，从现在开始</p>
      <p class="h5">卓越人生，从现在开始</p>
      <p class="h6">卓越人生，从现在开始</p>
    <h3 class="mark">1.3 内联文本元素</h3>
      <!-- 标记： -->
      I <span class="mark"> like </span> you 很久了
      <!-- 删除： -->
      <del>I like </del> 或者<s>I like</s>
      <!-- 下划线： -->
      <ins>I like </ins> 或者<u>I like</u>
      <p><small>you like</small></p>
      <strong><p>you like</strong></p>
      <h1><p><em>you like</em></p></h1>
    <h3 class="mark">1.4 对齐</h3>
      <!-- 居左： -->
      <p class="text-left">卓越人生，从现在开始</p>
      <!-- 居中： -->
      <p class="text-center">卓越人生，从现在开始</p>
      <!-- 居右 -->：
      <p class="text-right">卓越人生，从现在开始</p>
    <h3 class="mark">1.5 改变大小写</h3>
      <!-- 1、大写：class=”text-uppercase” -->
      <span class="text-uppercase">i like you</span><hr />
      <!-- 2、小写：class=”text-lowercase” -->
      <span class="text-lowercase">I like you</span><hr />
      <!-- 3、首字母大写：class=”text-capitalize” -->
      <span class="text-capitalize">i like you</span><hr />
    <h3 class="mark">1.6 略缩语</h3>
      <!-- 1、基本缩略语：<abbr title=”完整内容”> -->
      <abbr title="超文本标记语言">HTML</abbr>是一门超简单的网页语言<br>
      <!-- 2、首字母缩略语：<abbr title=”完整内容” class=”initialism”> -->
      <abbr title="超文本标记语言" class="initialism">HTML</abbr>是一门超简单的网页语
    <h3 class="mark">1.7 地址</h3>
      <address>家庭地址：浪琴湾</address>
        <address>公司地址：梅溪湖></address>
    <h3 class="mark">1.8 引用</h3>
      <!-- 1、默认样式的引用：<blockquote>   <footer> -->
      <blockquote>阳光总在风雨后<footer>丹</footer></blockquote>
      <!-- 2、右对齐样式引用：<blockquote class=”blockquote-reverse”> -->
      <blockquote class="blockquote-reverse">阳光总在风雨后<footer><cite>丹</cite></footer></blockquote>
    <h3 class="mark">1.9 列表</h3>
      <!-- 1、有序列表：<ol><li> 同HTML
         2、无序列表：<ul><li> 同HTML
         3、无样式列表：<ul class=”list-unstyled”>,去掉li前面的点 -->
      <ul class="list-unstyled">
      <li>花间一壶酒</li>
      <li>独酌无相亲</li>
      <li>举杯邀明月</li>
      <li>对影成三人</li></ul>

​​三、代码（代码里面有注解）​​

内联代码：通过<code>标签包裹内联样式的代码片段

用户输入：通过<kbd>标签标记用户通过键盘输入的内容

基本代码块：多行代码可以使用<pre>标签，设置pre区域显示垂直滚动条：<pre class=”pre-scrollable”>

Bootstrap2【上手教程】_bootstrap_05

<h2>二、代码</h2>
    <h3 class="mark">2.1 内联代码</h3>
      <!-- 4、内联列表：<ul class=”list-inline”>，li显示在一行 -->
      <ul class="list-inline">
      <li>月既不解饮</li>
      <li>影徒随我身</li>
      <li>暂伴月将影</li>
      <li>行乐须及春</li</ul>
      <!-- 5、<dl class=”dl-horizontal”>。 horizontal:水平 -->
      <dl class="dl-horizontal">
        <dt>首页</dt>
          <dd>这是首页的信息</dd>
        <dt>卓京品牌</dt>
          <dd>卓越人生，从现在开始</dd>
      </dl>
      <!-- 2.1.通过<code>标签包裹内联样式的代码片段 -->
      <code>举杯邀明月，</code>对影成三人。
    <h3 class="mark">2.2 用户输入</h3>
      <!-- 2.2.通过<kbd>标签标记用户通过键盘输入的内容 -->
      <kbd>Ctrl+C</kbd>
    <h3 class="mark">2.3 基本代码块</h3>
      <!-- 2.3.多行代码可以使用<pre>标签 -->
      <pre>
        花间一壶酒，独酌无相亲 
        举杯邀明月，
        对影成三人
      </pre>
    <h3 class="mark">2.4 程序输出</h3>
      <!-- <pre class=”pre-scrollable”> -->
      <pre class="pre-scrollable">
        花间一壶酒，独酌无相亲 
        举杯邀明月，
        对影成三人
      </pre>

 

​​四、表格（代码里面有注解）​​

基本表格：<table class=”table”>

条纹状表格：<table class=”table table-striped”>

带边框表格：<table class=”table table-bordered”>    

鼠标悬停：<table class=”table table-hover”>

紧缩表格：<table class=”table-condensed”>

状态类：
    class=”active”:鼠标悬停在行或者单元格上时设置的颜色
    .class=”success”:表示成功或积极的动作
    Class=”info”:表示普通的提示信息或动作
    Class=”warning”:表示警告或需要用户注意
    Class=”danger”:表示危险或潜在的带来负面影响的动作

响应式表格：<table class=”table”>,给包括<table>的元素添加class=”table-responsive”
 

 

Bootstrap2【上手教程】_jquery_06

 

Bootstrap2【上手教程】_bootstrap_07

 

<h2>三、表格</h2>
    <h3 class="mark">3.1 基本表格</h3>
      <!-- 3.1.<table class=”table”> -->
      <table>
        <thead>
          <th>编号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>男</td>
          <td>18</td>
        </tr>
        </tbody>
      </table>
      <table class=”table”>
        <thead>
          <th>编号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>男</td>
          <td>18</td>
        </tr>
        </tbody>
      </table>
    <h3 class="mark">3.2 条纹表格</h3>
      <!-- 3.2.<table class=”table table-striped”> -->
      <table class=”table table-striped”>
        <thead>
          <th>编号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>男</td>
          <td>18</td>
        </tr>
        </tbody>
      </table>
    <h3 class="mark">3.3 边框表格</h3>
      <!-- 3.3.<table class=”table table-bordered”>   -->
      <table class=”table table-bordered”>
        <thead>
          <th>编号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>男</td>
          <td>18</td>
        </tr>
        </tbody>
      </table>
    <h3 class="mark">3.4 鼠标悬停表格</h3>
      <!-- 3.4.<table class=”table table-hover”> -->
      <table class=”table table-hover”>
        <thead>
          <th>编号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>男</td>
          <td>18</td>
        </tr>
        </tbody>
      </table>
    <h3 class="mark">3.5 紧缩表格</h3>
      <!-- 3.5.<table class=”table-condensed”> -->
      <table class=”table table-condensed”>
        <thead>
          <th>编号</th>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
        </thead>
        <tbody>
        <tr>
          <td>1</td>
          <td>张三</td>
          <td>男</td>
          <td>18</td>
        </tr>
        </tbody>
      </table>
    <h3 class="mark">3.6 状态表格</h3>
      <tr class="active">
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
      </tr>
      <tr class="success">
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
      </tr>
      <tr class="info">
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
      </tr>
      <tr class="warning">
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
      </tr>
      <tr class="danger">
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
      </tr>
    <h3 class="mark">3.7 响应式表格</h3>
      <tr class="table table-responsive">
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td>18</td>
      </tr>
    <br />

今天分享到这里啦，能学多少算多少，不积硅步，无以至千里！加油，IT人。