Bootstrap2【上手教程】
2024-06-23 18:05:51
目录
一、思维导图
二、排版（代码里面有注解）
三、代码（代码里面有注解）
四、表格（代码里面有注解）
一、思维导图
带你们了解一下这一章会给你们带来什么？你们会学什么？简不简单学？
二、排版（代码里面有注解）
页面主体：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文件可以去网上下载，先给你们看效果图，后放代码
<!-- 引用文件 --><!-- 先引用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> 同HTML2、无序列表：<ul><li> 同HTML3、无样式列表：<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”>
<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”
<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人。
Bootstrap2【上手教程】相关推荐
- 【秒懂】号称最为简明实用的Django上手教程
https://www.cnblogs.com/baiboy/p/django1.html 阅读目录 1 几个基本概念 2 Django配置准备 3 Django基础配置安装 摘要:Django的 ...
- 申请 Let's Encrypt 数字证书，并安装cerbot快速上手教程~~
申请 Let's Encrypt 数字证书,并安装cerbot快速上手教程~~ Let's Encrypt SSL证书介绍 如今,越来越多的网站已经由HTTP迁移到HTTPS安全协议了.HTTPS不但 ...
- Spring Boot WebFlux 上手教程
Spring Boot WebFlux 上手教程 背景 大家都知道,Spring Framework 是 Java/Spring 应用程序跨平台开发框架,也是 Java EE(Java Enterpr ...
- RK3308(2) --- 上手教程
上手教程 开机 确认主板配件连接无误后,通过 USB Type-C 线给 ROC-RK3308-CC 供电.可接电源适配器,也可接到PC主机上.要求工作电压 5V ,工作电流 500mA 以上.上电即 ...
- python的pyaudio教程入门_『开发技巧』Python音频操作工具PyAudio上手教程
『开发技巧』Python音频操作工具PyAudio上手教程 0.引子 当需要使用Python处理音频数据时,使用python读取与播放声音必不可少,下面介绍一个好用的处理音频PyAudio工具包. ...
- python音频分析工具_『开发技巧』Python音频操作工具PyAudio上手教程
『开发技巧』Python音频操作工具PyAudio上手教程 0.引子 当需要使用Python处理音频数据时,使用python读取与播放声音必不可少,下面介绍一个好用的处理音频PyAudio工具包. ...
- 【Endnote】EndnoteX9快速上手教程
想得美,自己慢慢摸索才是硬道理,哪有什么快速上手教程,链接在下面 链接:https://pan.baidu.com/s/1Vtnaz90Iwp3I17M8ijxMWg 密码:ems7
- Debussy 快速上手教程
本文为转载,刚瞄了一眼,应该是在LINUX下的应用快速上手教程.Debussy是个很强大的看V代码及Debug V代码工具.你能方便地看到信号从哪里来到哪里去,比较强大.简单地用,用起来也比较简单.在 ...
- 使用STM32Cube MX为STM32 CAN总线快速配置上手教程_HAL库_CAN协议_STM32_附波特率计算工具
使用STM32Cube MX为STM32 CAN总线快速上手教程_HAL库_CAN协议_STM32 前言 博主也是刚接触CAN协议的新手,如有不对的地方欢迎交流 本文旨在使用STM32Cube MX快 ...
- 哈希宝-简单上手教程
闲来无事做点什么 没有入场的不建议入场,使用已有设备,赚取额外收益即可 随着kuang潮的兴起,越来越多人开始挖kuang,但是"正确的上网姿势".钱包.kuang池.币种等等让人 ...
最新文章
- 彩色点云在虚拟现实中的应用
- gradle常用命令
- 『设计模式』HR问了我朋友什么是简单工厂模式，竟被质疑是否学过设计模式，是否是计算机专业?
- Dapr牵手.NET学习笔记：可观测性-分布式跟踪
- StringIO类的用途
- 你知道IT行业里哪种岗位女生最多吗？
- python按哪个键删除_Python-从字典中删除键的方法
- BUUCTF Crypto [HDCTF2019]together wp
- 小程序商城源码(jshop安装)
- Unity 2D动画控制器详解
- 自动驾驶技术平台分享：百度Apollo开放平台8.0再升级，更简单，更便捷，更高效
- Linux系统下Qt项目实战（原神模拟器）
- 使用Origin绘制边际分布曲线（Marginal distributions plots）的思路和方法
- 【云原生之Docker实战】使用Docker部署phpMyAdmin数据库管理工具
- ACM训练方法_该我自己检讨了_By LCY
- 信道检测手机软件 ios_如何在iOS设备上用PS4或Xbox One的手柄玩游戏？
- [软件人生]人生强硬也要懂得弯折——谈人性的两面
- 外包公司到底值不值得去?
- 网页JS弹出广告代码，头部，右下角，网页中漂浮，对联广告代码等大全
- 零知识证明之范围证明的应用