第九周笔记

最新推荐文章于 2021-12-14 15:35:23 发布

Ascssy

最新推荐文章于 2021-12-14 15:35:23 发布

阅读量120

点赞数

本文链接：https://blog.csdn.net/weixin_48999849/article/details/116172204

版权

本文详细介绍了BootStrap框架，包括其环境安装、代码样式、表格、表单、按钮、下拉菜单、按钮组及分裂式按钮下拉菜单的使用方法，提供了丰富的示例和运行结果。

摘要由CSDN通过智能技术生成

BootStrap简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

BootStrap环境安装

从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。

会看到两个按钮：
①Download Bootstrap：下载 Bootstrap。
可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。

②Download Source：下载源代码。
直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
如果您使用的是未编译的源代码，您需要编译 LESS 文件来生成可重用的 CSS 文件。对于编译 LESS 文件，Bootstrap 官方只支持 Recess，这是 Twitter 的基于 less.js 的 CSS 提示。

Bootstrap代码样式

Bootstrap提供了代码样式，用于在页面上展示代码，以此来区分于正文的区别，如果是行内嵌套代码，可以用<code>标签，但是对于代码中的符号要进行转换（<是<、>是>）
例：

<!--正文中内嵌代码块-->
<p>
<code>&lt;section&gt;
</code> should be wrapped as inline.
</p>

运行截图：
在这里插入图片描述

如果是代码块可以用<pre>标签，同样的，代码中的要将代码中的尖括号做转换。例如：

<!--.pre-scrollable,其作用是设置max-height为350px，
并在垂直方向展示滚动条-->
<pre class="pre-scrollable">

&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p class="text-muted">...&lt;/p&gt;
&lt;p class="text-primary">...&lt;/p&gt;
&lt;p class="text-success">...&lt;/p&gt;
&lt;p class="text-info">...&lt;/p&gt;
&lt;p class="text-warning">...&lt;/p&gt;
&lt;p class="text-danger">...&lt;/p&gt;
  
</pre>

一个使用了 Bootstrap 的基本的 HTML 模板：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8"> 
   <title>在线尝试 Bootstrap 实例</title>
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
   <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

      <h1>Hello, world!</h1>

</body>
</html>

运行结果：
在这里插入图片描述

BootStrap表格

基本的表格样式可以用 <table>标签。
例如：

<h4>正常表格</h4>
<!--
\\利用.table-bordered为表格和其中的每个单元格增加边框
\\利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式
\\利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态
-->
<table class="table table-striped table-bordered table-hover">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>