Bootstrap快速入门参考手册

最新推荐文章于 2024-07-04 19:18:53 发布
最新推荐文章于 2024-07-04 19:18:53 发布
阅读量2.2k 收藏 1
点赞数
文章标签： bootstrap 标签 class web前端 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28568283/article/details/50878699
版权

一、排版

类名/标签作用注
h1到h6标题重新设置了margin-top和margin-bottom的值–
small标签来制作副标题。–
p全局文本字号为14px(font-size)。行高为1.42857143（line-height），颜色为深灰色（#333）；–
.lead对于一些重要的文本，希望突出强调的部分–
b和strong加粗–
i和em斜体
.text-muted提示，使用浅灰色（#999）–
.text-primary主要，使用蓝色（#428bca）–
.text-success成功，使用浅绿色(#3c763d)–
.text-info通知信息，使用浅蓝色（#31708f）–
.text-warning警告，使用黄色（#8a6d3b）–
.text-danger危险，使用褐色（#a94442）–
.text-left左对齐–
.text-center居中对齐–
.text-right右对齐–
.text-justify两端对齐–
ul无序列表–
ol有序列表–
dl定义列表–
.list-unstyled去点列表–
.list-inline内联列表–
.dl-horizontal水平定义列表–
code来显示单行内联代码–
pre来显示多行块代码–
kbd来显示用户输入代码–
.active表示当前活动的信息‘#f5f5f5’
.success表示成功或者正确的行为‘#dff0d8’
.info表示中立的信息或行为‘#d9edf7’
.warning表示警告，需要特别注意‘#fc8e3’
.danger表示危险或者可能是错误的行为‘#f2dede’
.table：基础表格–
.table-striped斑马线表格–
.table-bordered带边框的表格–
.table-hover鼠标悬停高亮的表格–
.table-condensed紧凑型表格–
.table-responsive响应式表格–

表格代码示例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基础表格</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

<body>
<h1>基础表格</h1>
<table class="table">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
<h1>斑马线表格</h1>
<table class="table table-striped">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
<h1>带边框的表格</h1>
 <table class="table table-bordered">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
<h1>鼠标悬浮高亮的表格</h1>
<table class="table table-striped table-bordered table-hover">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
 <h1>紧凑型表格</h1>
  <table class="table table-condensed">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
 <h1>响应式表格</h1>
 <div class="table-responsive">
   <table class="table table-bordered">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>
</div>
</body>
</html>

这里写图片描述
这里写图片描述

请叫我均哥
关注
Bootstrap使用手册(操作手册)
10-28
亲自将网页截取下来，整理出一份PDF文档提供大家方便，其中已设置书签快速浏览。内部使用代码后续上传。
《Bootstrap用户手册(高清pdf)》PDF
08-31
《Bootstrap用户手册(高清pdf)》
【Windows】Bootstrap Studio（网页设计）软件介绍及安装步骤
最新发布
水车
07-04 635
Bootstrap Studio 是一款专为前端开发者设计的强大工具，主要用于快速创建现代化的响应式网页和网站。总体来说，Bootstrap Studio 是一个适用于开发现代响应式网页和网站的强大工具，特别适合善于使用 Bootstrap 框架的开发者和设计师。它的直观界面和实时预览功能使得网页设计过程更加高效和直观。
Bootstrap用户手册：设计响应式网站
weixin_43207809的博客
09-14 702
前段时间想找一本书看看,就找了这本号称圣经的Bootstrap用户手册：设计响应式网站 - 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单。
Bootstrap学习手册
MindMrWang的blog
11-08 504
bootstrap 笔记1.css样式 1）栅格系统 2）排版 3）代码 4）表格 5）表单 6）按钮 7）图片 8）辅助类 9）响应式工具 2.css组件 1）glyphicons图标 2）下拉菜单 3）按钮组 4）输入框组 5）导航 6）导航条 7）路径导航 8
Bootstrap快速入门参考手册（2）
请叫我均哥的博客
03-14 1418
二、表单Bootstrap框架默认的表单是垂直显示风格，/*源码请查阅bootstrap.css .类名、标签 作用 在bootstrap.css的位置 .form-horizontal 1、设置表单控件padding和margin值。 2、改变“form-group”的表现形式，类似于网格系统的“row”。 /源码请查阅bootstrap.css文件第1963行~第1991行
Bootstrap中文手册-v4.3.1.pdf
05-17
手册中的“快速入门”部分提供了对框架的基本概述，以及如何下载、导入、初始化和使用Bootstrap的指南。 在手册中还提到了对浏览器和设备进行调优的重要性。这是因为不同浏览器和设备可能会对网页的显示有所影响。...
bootstrap3 中文手册
11-07
这个“Bootstrap3 中文手册”提供了一套完整的中文入门教程和参考文档，帮助开发者更方便地理解和应用Bootstrap3。 Bootstrap3的核心特性包括响应式设计、网格系统、组件库和JavaScript插件。以下是关于这些特性的...
bootstrapAPI文档和入门教程
12-11
CHM（Compiled HTML Help）文件是一种Windows平台下的帮助文件格式，它将HTML页面集合在一起，形成一个可搜索的参考手册。在Bootstrap的API文档中，你可以找到关于Bootstrap组件、CSS样式、JavaScript插件等的详细...
各种计算机学习参考手册
09-09
在计算机学习的道路上，参考手册是必不可少的资源。这些手册涵盖了广泛的编程语言和技术，包括CSS、JavaScript、jQuery、W3School教程、HTML5、XHTML以及XMLHttpRequest等。以下是这些主题的详细说明： 1. CSS...
vcpkg快速入门手册
孤独浮云
02-11 5632
文章目录1. 简介2. 安装与使用2.1 获取vcpkg2.2 编译vcpkg2.3 vcpkg的文件夹层次结构2.4 设置vcpkg的环境变量2.5 vcpkg的常用命令2.6 安装包与Visual Studio集成3. 常见的C++库的CMake配置方式3.1 Boost3.2 cereal3.3 Ceres Solver3.4 CGAL3.5 FLANN3.6 GDAL3.7 GLEW3.8 GMP3.9 GTest3.10 GSL3.11 HDF53.12 Lastools/Laslib3.13 O
BootStrap学习手册.pdf
04-04
BootStrap学习手册.pdf
Bootstrap3参考手册.chm
03-18
Bootstrap3参考手册.chm Bootstrap3离线手册.chm Bootstrap3中文手册.chm Bootstrap3中文文档.chm
Bootstrap离线参考手册
10-06
Bootstrap参考手册，中文离线版的，前端的框架，流行的
Bootstrap3中文参考手册.zip
07-14
Bootstrap3中文参考手册
css,jquery和bootstrap参考手册
11-18
css,jquery和bootstrap参考手册 多个版本，已经运行可以使用
Bootstrap中文参考手册
weixin_34128411的博客
12-20 213
Bootstrap是推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。 Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单、按钮组、按钮...
bootstrap使用手册
weixin_43837268的博客
12-24 933
1.清除浮动： 父级元素：after{    content:"";     display:"block";    clear:both; } 2.初始化： box-sizing: border-box; 3.媒体查询 父元素设置宽度和居中，子元素设置百分比 4.Bootstrap (1).条纹状表格:table-striped     表格边框:table-bordered     鼠标悬停:...
Bootstrap的使用手册及学习笔记
wumengjie123的博客
03-29 1373
Bootstrap的使用手册及学习笔记 Bootstrap是基于HTML5和CSS3开发的用于前端开发的工具包。关于Bootstrap的介绍和下载，大家可以去搜索查看。Bootstrap使用的某些HTML元素和CSS属性需要文档类型为HTML5 的文件类型。因此这一文档类型必须出现在项目的每个页面的开始部分： 2         3         ... 4    
Bootstrap用户手册：全面指南
《Bootstrap用户手册》是一本详细介绍Bootstrap，一个...《Bootstrap用户手册》是一本实用性极强的资源，适合Web开发人员、设计师或初学者深入理解Bootstrap的工作原理和实践应用，是提升网站开发技能的重要参考资料。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值