渗透测试学习历程 3.4BootStrap基础学习记录

最新推荐文章于 2023-12-02 20:30:02 发布

初恋懒羊羊

最新推荐文章于 2023-12-02 20:30:02 发布

阅读量440

点赞数

分类专栏：渗透测试学习文章标签：学习

本文链接：https://blog.csdn.net/m0_55654575/article/details/127888038

版权

渗透测试学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.安装和使用

2.bootstrap的使用和布局容器

在Hbuilder创建一个html项目，命名为bootstrap

Bootstrap是一套现有的CSS样式集合，是基于jquery的前端框架。简单好用，集成了多种插件。

文档全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网

1.安装和使用

下载：

http://v3.bootcss.com/getting-started/

http://jquery.com/

2.bootstrap的使用和布局容器

在Hbuilder创建一个html项目，命名为bootstrap

使用本地

或使用在线链接

布局容器

3.栅格网格系统和列偏移

效果如图

列偏移

实践

效果

4.栅格网格系统列排序与列嵌套

5.常用样式标题和段落

添加副标题可以用<small>标签或<span class = "small">

强调

You can use the mark tag to <mark>highlight</mark> text.

删除

<del>This line of text is meant to be treated as deleted text.</del>

无用文本

<s>This line of text is meant to be treated as no longer accurate.</s>

插入文本

<ins>This line of text is meant to be treated as an addition to the document.</ins>

带下划线的文本

<u>This line of text will render as underlined</u>

小号文本

<small>This line of text is meant to be treated as fine print.</small>

着重

<strong>rendered as bold text</strong>

斜体

<em>rendered as italicized text</em>

对齐（左，居中，右，两端都对齐）

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

改变大小写（小写，大写，首字母大写）

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

6.常用样式列表

7.常用样式代码

this is a simple code
<code>
this is a simple code<br>
this is a simple code
</code>

<p>使用<kbd>ctrl</kbd>+<kbd>s</kbd>保存内容</p>

<pre>
   def orm(request):
       method = request.get.method
       if method == "GET"
           return HttpResponse("文本")
</pre>

<pre>
   <h1>你好</h2>
</pre>

<pre class = "pre-scrollable">
   <ol>
       <li>.........</li>
       <li>..........</li>
       <li>........</li>
       <li>.........</li>
       <li>..........</li>
       <li>.........</li>
       <li>..........</li>
       <li>........</li>
       <li>.........</li>
       <li>..........</li>
       <li>.........</li>
       <li>..........</li>
       <li>........</li>
       <li>.........</li>
       <li>..........</li>
       <li>.........</li>
       <li>..........</li>
       <li>........</li>
       <li>.........</li>
       <li>..........</li>
   </ol>
</pre>

效果

8.常用样式表格

效果

9.常用样式表单文本框和下拉框

10.常用样式表单控件单选框和复选框

11.常用样式表单按钮

12.常用样式表单布局水平表单和内联表单

<form action = "#" class="form-horizontal" role = "form">
           <h2 align = "center">用户信息表</h2>
           
           <div class="form-group">
               <div class = "row">
                   <label for = "uname" class="control-label col-md-2 col-md-push-1">姓名</label>
                   <div class="col-md-6 col-md-push-1">
                       <input type = "text" id = "uname" class="form-control" placehold="请输入姓名"/>
                   </div>
               </div>
               <div class = "row">
                   <label for = "upwd" class="control-label col-md-2 col-md-push-1">密码</label>
                   <div class="col-md-6 col-md-push-1">
                       <input type = "text" id = "upwd" class="form-control" placehold="请输入密码"/>
                   </div>
               </div>
           </div>
           <div class="form-group">

               <label for = "uname" class="control-label col-md-2 col-md-push-1">城市</label>
               <div class="col-md-6 col-md-push-1">
                   <select class="form-control">
                       <option>请选择城市</option>
                       <option>上海</option>
                       <option>北京</option>
                   </select>
               </div>
           </div>
           <div class="form-group">

12 缩略图

效果

进一步调整，加入面板样式

</div>

13 导航

本章我们将讲解 Bootstrap 提供的用于定义导航元素的一些选项。它们使用相同的标记和基类 .nav。Bootstrap 也提供了一个用于共享标记和状态的帮助器类。改变修饰的 class，可以在不同的样式间进行切换。

表格导航或标签

创建一个标签式的导航菜单：

以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs。

下面的实例演示了这点：

实例

       <p>标签式的导航菜单</p>
       <ul class="nav nav-tabs">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">SVN</a></li>
           <li><a href="#">iOS</a></li>
           <li><a href="#">VB.Net</a></li>
           <li><a href="#">Java</a></li>
           <li><a href="#">PHP</a></li>
       </ul>

结果如下所示：

胶囊式的导航菜单

基本的胶囊式导航菜单

如果需要把标签改成胶囊的样式，只需要使用 class .nav-pills 代替 .nav-tabs 即可，其他的步骤与上面相同。

下面的实例演示了这点：

实例

       <p>基本的胶囊式导航菜单</p>
       <ul class="nav nav-pills">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">SVN</a></li>
           <li><a href="#">iOS</a></li>
           <li><a href="#">VB.Net</a></li>
           <li><a href="#">Java</a></li>
           <li><a href="#">PHP</a></li>
       </ul>

结果如下所示：

垂直的胶囊式导航菜单

您可以在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠。

下面的实例演示了这点：

实例

<p>垂直的胶囊式导航菜单</p> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li><a href="#">VB.Net</a></li> <li><a href="#">Java</a></li> <li><a href="#">PHP</a></li> </ul>

结果如下所示：

两端对齐的导航

您可以在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽。在更小的屏幕上，导航链接会堆叠。

下面的实例演示了这点：

实例

结果如下所示：

禁用链接

对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态，如下面的实例所示：

实例

       <p>导航元素中的禁用链接</p>
       <ul class="nav nav-pills">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">SVN</a></li>
           <li class="disabled"><a href="#">iOS（禁用链接）</a></li>
           <li><a href="#">VB.Net</a></li>
           <li><a href="#">Java</a></li>
           <li><a href="#">PHP</a></li>
       </ul><br><br>
       <ul class="nav nav-tabs">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">SVN</a></li>
           <li><a href="#">iOS</a></li>
           <li class="disabled"><a href="#">VB.Net（禁用链接）</a></li>
           <li><a href="#">Java</a></li>
           <li><a href="#">PHP</a></li>
       </ul>

结果如下所示：

该 class 只会改变 <a> 的外观，不会改变它的功能。在这里，您需要使用自定义的 JavaScript 来禁用链接。

下拉菜单

导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表。

带有下拉菜单的标签

向标签添加下拉菜单的步骤如下：

以一个带有 class .nav 的无序列表开始。
添加 class .nav-tabs。
添加带有 .dropdown-menu class 的无序列表。

实例

       <p>带有下拉菜单的标签</p>
       <ul class="nav nav-tabs">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">SVN</a></li>
           <li><a href="#">iOS</a></li>
           <li><a href="#">VB.Net</a></li>
           <li class="dropdown">
               <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a>
               <ul class="dropdown-menu">
                   <li><a href="#">Swing</a></li>
                   <li><a href="#">jMeter</a></li>
                   <li><a href="#">EJB</a></li>
                   <li class="divider"></li>
                   <li><a href="#">分离的链接</a></li>
               </ul>
           </li>
           <li><a href="#">PHP</a></li>
       </ul>

结果如下所示：

带有下拉菜单的胶囊

步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs class 改为 .nav-pills，如下面的实例所示：

实例

       <p>带有下拉菜单的胶囊</p>
       <ul class="nav nav-pills">
           <li class="active"><a href="#">Home</a></li>
           <li><a href="#">SVN</a></li>
           <li><a href="#">iOS</a></li>
           <li><a href="#">VB.Net</a></li>
           <li class="dropdown">
               <a class="dropdown-toggle" data-toggle="dropdown" href="#"> Java <span class="caret"></span> </a>
               <ul class="dropdown-menu">
                   <li><a href="#">Swing</a></li>
                   <li><a href="#">jMeter</a></li>
                   <li><a href="#">EJB</a></li>
                   <li class="divider"></li>
                   <li><a href="#">分离的链接</a></li>
               </ul>
           </li>
           <li><a href="#">PHP</a></li>
       </ul>

结果如下所示：

类	描述	实例
.nav nav-tabs	标签页	尝试一下
.nav nav-pills	胶囊式标签页	尝试一下
.nav nav-pills nav-stacked	胶囊式标签页以垂直方向堆叠排列的	尝试一下
.nav-justified	两端对齐的标签页，在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。	尝试一下
.disabled	禁用的标签页	尝试一下
标签添加下拉菜单	尝试一下
带下拉菜单的胶囊式标签页	尝试一下
.tab-content	与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改	尝试一下
.tab-pane	与 .tab-content 和 data-toggle="tab" (data-toggle="pill")一同使用, 设置标签页对应的内容随标签的切换而更改

14 下拉菜单

先导入插件

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
       
       <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
       
       <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

       <div class="dropdown">
       <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
       <span class="caret"></span>
       </button>
       <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
       <li role="presentation">
       <a role="menuitem" tabindex="-1" href="#">Java</a>
       </li>
       <li role="presentation">
       <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
       </li>
       <li role="presentation">
       <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
       </li>
       <li role="presentation" class="divider"></li>
       <li role="presentation">
       <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
       </li>
       </ul>
       </div>

15 模态框

用法

您可以切换模态框（Modal）插件的隐藏内容：

通过 data 属性：在控制器元素（比如按钮或者链接）上设置属性 data-toggle="modal"，同时设置 data-target="#identifier" 或 href="#identifier" 来指定要切换的特定的模态框（带有 id="identifier"）。
通过 JavaScript：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：

<h2>创建模态框（Modal）</h2>
       
       <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">开始演示模态框</button>
       
       <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
       <div class="modal-content">
       <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
       <h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
       </div>
       <div class="modal-body">在这里添加一些文本</div>
       <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
       <button type="button" class="btn btn-primary">提交更改</button>
       </div>
       </div>
       </div>
       </div>