出于学习需要，自觉得把基本的bootstrap用法自己敲一遍，对每个用法有个较清晰的印象，所以做了本篇总结，这也是一个巩固的学习过程。
可点击左边的目录，方便速查。
按钮
a,input,button都可以设置为按钮
a标签按钮 button标签按钮
<a class="btn btn-default" href="#" role="button">a标签按钮</a> <input type="button" class="btn btn-default" value="input的button标签按钮" /> <input type="submit" class="btn btn-default" value="input的submit标签按钮" /> <button class="btn btn-default">button标签按钮</button>
预置样式
default样式 primary样式 success样式 info样式 warning样式 danger样式 link样式
<button class="btn btn-default">default样式</button> <button class="btn btn-primary">primary样式</button> <button class="btn btn-success">success样式</button> <button class="btn btn-info">info样式</button> <button class="btn btn-warning">warning样式</button> <button class="btn btn-danger">danger样式</button> <button class="btn btn-link">link样式</button>
按钮大小
大按钮btn-lg 默认按钮 小按钮btn-sm 超小按钮btn-xs
<button class="btn btn-info btn-lg">大按钮btn-lg</button> <button class="btn btn-info">默认按钮</button> <button class="btn btn-info btn-sm">小按钮btn-sm</button> <button class="btn btn-info btn-xs">超小按钮btn-xs</button>
块级按钮-btn-block
块级按钮，与父元素等宽 块级按钮，与父元素等宽
<button class="btn btn-success btn-block">块级按钮，与父元素等宽</button> <button class="btn btn-warning btn-lg btn-block">块级按钮，与父元素等宽</button>
禁用状态 class="disabled"
被禁用的按钮
<button class="btn btn-success disabled">被禁用的按钮</button>
激活状态 class="active"
激活状态的按钮
<button class="btn btn-success active">激活状态的按钮</button>
图片
响应式图片-img-responsive
<img class="img-responsive lazy" src="/static/imghwm/default1.png" data-src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/783931/o_%e8%83%8c%e6%99%af%e5%9b%be1.png" / alt="Bootstrap3 CSS样式基本用法总结_html/css_WEB-ITnose" >
图片的三种形状
<img class="img-rounded lazy" src="/static/imghwm/default1.png" data-src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" / alt="Bootstrap3 CSS样式基本用法总结_html/css_WEB-ITnose" > <img class="img-thumbnail lazy" src="/static/imghwm/default1.png" data-src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" / alt="Bootstrap3 CSS样式基本用法总结_html/css_WEB-ITnose" > <img class="img-circle lazy" src="/static/imghwm/default1.png" data-src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" / alt="Bootstrap3 CSS样式基本用法总结_html/css_WEB-ITnose" >
表格
基本表格 .table
| 表格单元 | 表格单元 | 表格单元 |
| 表格单元 | 表格单元 | 表格单元 |
| 表格单元 | 表格单元 | 表格单元 |
<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> <tr> <td>表格单元</td> <td>表格单元</td> <td>表格单元</td> </tr> </tbody> </table>
斑马线表格 .table .table-striped
| 表格单元 | 表格单元 | 表格单元 |
| 表格单元 | 表格单元 | 表格单元 |
| 表格单元 | 表格单元 | 表格单元 |
<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> </tbody> </table>
带边框表格 .table .table-bordered
| 表格单元 | 表格单元 | 表格单元 |
| 表格单元 | 表格单元 | 表格单元 |
| 表格单元 | 表格单元 | 表格单元 |
<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> </tbody> </table>
鼠标悬停表格 .table .table-hover
| 表格单元 | 表格单元 | 表格单元 |
| 表格单元 | 表格单元 | 表格单元 |
| 表格单元 | 表格单元 | 表格单元 |
<table class="table 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> </tbody> </table>
紧凑表格 .table .table-condensed
| 表格单元 | 表格单元 | 表格单元 |
| 表格单元 | 表格单元 | 表格单元 |
| 表格单元 | 表格单元 | 表格单元 |
<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> </tbody> </table>
响应式表格 .table .table-responsive
| 表格单元 | 表格单元 | 表格单元 |
| 表格单元 | 表格单元 | 表格单元 |
| 表格单元 | 表格单元 | 表格单元 |
<div class="myborder"> <table class="table table-responsive"> <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> </tbody> </table>
状态类
| 状态active | 状态active | 状态active |
| 状态success | 状态success | 状态success |
| 状态info | 状态info | 状态info |
| 状态warning | 状态warning | 状态warning |
| 状态danger | 状态danger | 状态danger |
<table class="table"> <thead> <tr> <th>表格标题</th> <th>表格标题</th> <th>表格标题</th> </tr> </thead> <tbody> <tr class="active"> <td>状态active</td> <td>状态active</td> <td>状态active</td> </tr> <tr class="success"> <td>状态success</td> <td>状态success</td> <td>状态success</td> </tr> <tr class="info"> <td>状态info</td> <td>状态info</td> <td>状态info</td> </tr> <tr class="warning"> <td>状态warning</td> <td>状态warning</td> <td>状态warning</td> </tr> <tr class="danger"> <td>状态danger</td> <td>状态danger</td> <td>状态danger</td> </tr> </tbody> </table>
表单
基本表单-.from-control 和.from-group搭配
用户名
密码
记住密码
确定
<form> <div class="form-group"> <label for="userName">用户名</label> <input type="text" class="form-control" name="userName" placeholder="请输入用户名"/> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" name="password" placeholder="请输入密码"/> </div> <div class="checkbox"> <label> <input type="checkbox">记住密码</input> </label> </div> <button type="submit" class="btn btn-info">确定</button> </div> </form>
内联表单-.from-inline
用户名
密码
记住密码
确定
<form class="form-inline"> <div class="form-group"> <label for="userName">用户名</label> <input type="text" class="form-control" name="userName" placeholder="请输入用户名"/> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" name="password" placeholder="请输入密码"/> </div> <div class="checkbox"> <label> <input type="checkbox">记住密码</input> </label> </div> <button type="submit" class="btn btn-info">确定</button> </div> </form>
移动端注意(隐藏label)
用户名
密码
记住密码
确定
<form class="form-inline"> <div class="form-group"> <label class="sr-only" for="userName">用户名</label> <input type="text" class="form-control" name="userName" placeholder="请输入用户名"/> </div> <div class="form-group"> <label class="sr-only" for="password">密码</label> <input type="password" class="form-control" name="password" placeholder="请输入密码"/> </div> <div class="checkbox"> <label> <input type="checkbox">记住密码</input> </label> </div> <button type="submit" class="btn btn-info">确定</button> </div> </form>
input的内联组合
前面
后面
提交
<form class="form-inline"> <div class="form-group"> <div class="input-group"> <div class="input-group-addon">前面</div> <input class="form-control" type="text" placeholder="输入测试" /> <div class="input-group-addon">后面</div> </div> <button type="submit" class="btn btn-default">提交</button> </div> </form>
水平排列表单(用栅格系统)
用户名
密码
记住密码
确定
<form class="form-horizontal"> <div class="form-group"> <label for="userName" class="control-label col-sm-2">用户名</label> <div class="col-sm-10"> <input type="text" class="form-control" name="userName" placeholder="请输入用户名"/> </div> </div> <div class="form-group"> <label for="password" class="control-label col-sm-2">密码</label> <div class="col-sm-10"> <input type="password" class="form-control" name="password" placeholder="请输入密码"/> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox">记住密码</input> </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-info">确定</button> </div> </div> </form>
单选框和复选框的内联形式
选择1 选择2 选择3
选择1 选择2 选择3
<label class="checkbox-inline"> <input type="checkbox">选择1 </label> <label class="checkbox-inline"> <input type="checkbox">选择2 </label> <label class="checkbox-inline"> <input type="checkbox">选择3 </label> <div class="form-group"> <label class="radio-inline"> <input type="radio" name="myradio">选择1 </label> <label class="radio-inline"> <input type="radio" name="myradio">选择2 </label> <label class="radio-inline"> <input type="radio" name="myradio">选择3 </label> </div>
静态控件 .form-control-static
用户名
Tab Weng
<form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">用户名</label> <div class="col-sm-10"> <p class="form-control-static">Tab Weng</p> </div> </div> </form>
标题
（提示：由于默认的h1~h7在博客园编辑器中受默认样式的影响，所以无法显示bootstrap的样式，其具体样式与下面的class="h1"等相同）
h1标题样式
h4标题样式
h5标题样式 h6标题样式
<h1 id="h-标题样式">h1标题样式</h1> <h4 id="h-标题样式">h4标题样式</h4> <h5 id="h-标题样式">h5标题样式</h5> <h6 id="h-标题样式">h6标题样式</h6>
标题也可用class="h1"设置
通过class="h1"来设置样式
通过class="h4"来设置样式
通过class="h5"来设置样式
通过class="h6"来设置样式
<div class="h1">通过class="h1"来设置样式</div> <div class="h4">通过class="h4"来设置样式</div> <div class="h5">通过class="h5"来设置样式</div> <div class="h6">通过class="h6"来设置样式</div>
副标题-(或class="small")
设置样式h1 这里是副标题
设置样式h4 这里是副标题
设置样式h5 这里是副标题
设置样式h6 这里是副标题
<div class="h1">设置样式h1<small>这里是副标题</small></div> <div class="h4">设置样式h4<small>这里是副标题</small></div> <div class="h5">设置样式h5<small>这里是副标题</small></div> <div class="h6">设置样式h6<small>这里是副标题</small></div>
页面内容
p标签
Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。 制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体 效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。
<p> Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。 制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体 效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。 </p>
突出段落-class="lead"
Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。 制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体 效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。
<p class="lead"> Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。 制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体 效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。 </p>
内联文本元素
标记-
使用mark来标记一下
使用mark来<mark>标记</mark>一下
删除线-或
用del标签来删除这段话
用s标签来删除这段话
<p><del>用del标签来删除这段话</del></p> <p><s>用s标签来删除这段话</s></p>
下划线-或
ins标签表示插入文本
u标签表示加上下划线
<p><ins>ins标签表示插入文本</ins></p> <u>u标签表示加上下划线</u>
小号文本-
这是小号文本
<small>这是小号文本</small>
强调-
这是加强字体，用strong
<strong>这是加强字体，用strong</strong>
斜体-
这是斜体，用em
<em>这是斜体，用em</em>
对齐
居左对齐
居中对齐
居右对齐
[两端对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、 前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计 和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。
[没有对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、 前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计 和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。
<p class="text-left">居左对齐</p> <p class="text-center">居中对齐</p> <p class="text-right">居右对齐</p> <p class="text-justify"> [两端对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、 前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计 和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。 </p> <p class="text-nowrap"> [没有对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、 前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计 和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。 </p>
改变大小写
LowerCase HahaHa
UpperCase Hahaha
capitalize haHaha
<p class="text-lowercase">LowerCase HahaHa</p> <p class="text-uppercase">UpperCase Hahaha</p> <p class="text-capitalize">capitalize haHaha</p>
缩略语 标签
bootstrap是一个高度集成化的开发框架 此处缩略
bootstrap是一个高度集成化的开发框架 此处缩略
<p class="lead"> bootstrap是一个高度集成化的开发框架 <abbr title="这里显示了缩略语的内容">此处缩略</abbr><br /> bootstrap是一个高度集成化的开发框架 <abbr class="initialism" title="这里加了类.initialism所以变小了">此处缩略</abbr> </p>
引用
基本引用
这是html的基本引用标签blockquote，bootstrap为它左边添加了一个灰色带
<blockquote> <p>这是html的基本引用标签blockquote，bootstrap为它左边添加了一个灰色带</p> </blockquote>
引用来源
这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。
比尔盖茨
<blockquote> <p>这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。</p> <footer>比尔盖茨</footer> </blockquote>
居右的引用，添加类.blockquote-reverse
这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。
比尔盖茨
<blockquote class="blockquote-reverse"> <p>这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。</p> <footer>比尔盖茨</footer> </blockquote>
列表
无样式列表.list-unstyled
<ul class="list-unstyled"> <li>这里是列表</li> <li>这里是列表</li> <ul> <li>这里是二级列表</li> <li>这里是二级列表</li> <li>这里是二级列表</li> <li>这里是二级列表</li> </ul> <li>这里是列表</li> <li>这里是列表</li> <li>这里是列表</li> </ul>
内联列表-同一行显示.list-inline
<ul> <li>这里是列表</li> <li>这里是列表</li> <ul class="list-inline"> <li>这里是二级列表</li> <li>这里是二级列表</li> <li>这里是二级列表</li> <li>这里是二级列表</li> </ul> <li>这里是列表</li> <li>这里是列表</li> <li>这里是列表</li> </ul>
普通描述
名言 如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。 比尔盖茨的名人名言是这样描述的 在你出生之前，你的父母并非像他们现在这样乏味。 他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。 所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。
<dl> <dt>名言</dt> <dd>如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。</dd> <dt>比尔盖茨的名人名言是这样描述的</dt> <dd>在你出生之前，你的父母并非像他们现在这样乏味。 他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。 所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。 </dd> </dl>
水平排列描述.dl-horizontal
名言 如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。 比尔盖茨的名人名言是这样描述的 在你出生之前，你的父母并非像他们现在这样乏味。 他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。 所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。
<dl class="dl-horizontal"> <dt>名言</dt> <dd>如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。</dd> <dt>比尔盖茨的名人名言是这样描述的</dt> <dd>在你出生之前，你的父母并非像他们现在这样乏味。 他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。 所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。 </dd> </dl>
代码
内联代码 code
Let's add a headFile #include
Let's add a headFile <code>#include<stdio></code>
用户输入 kbd
请按 F5 刷新
请按 <kbd>F5</kbd> 刷新
代码块 pre
<div>This is a tag name div </div>
<div>This is a tag name div </div>
变量 var
a
<var>a</var>
程序输出 samp
Hello World!
<samp>Hello World!</samp>
本篇总结了一些常用的bootstrap3 的Css样式，但并非所有。
详细的学习请参考bootstrap官网：http://getbootstrap.com
bootstrap4 即将到来，期待！
The Future of HTML: Evolution and TrendsMay 13, 2025 am 12:01 AMThe future of HTML will develop in a more semantic, functional and modular direction. 1) Semanticization will make the tag describe the content more clearly, improving SEO and barrier-free access. 2) Functionalization will introduce new elements and attributes to meet user needs. 3) Modularity will support component development and improve code reusability.
Why are HTML attributes important for web development?May 12, 2025 am 12:01 AMHTMLattributesarecrucialinwebdevelopmentforcontrollingbehavior,appearance,andfunctionality.Theyenhanceinteractivity,accessibility,andSEO.Forexample,thesrcattributeintagsimpactsSEO,whileonclickintagsaddsinteractivity.Touseattributeseffectively:1)Usese
What is the purpose of the alt attribute? Why is it important?May 11, 2025 am 12:01 AMThe alt attribute is an important part of the tag in HTML and is used to provide alternative text for images. 1. When the image cannot be loaded, the text in the alt attribute will be displayed to improve the user experience. 2. Screen readers use the alt attribute to help visually impaired users understand the content of the picture. 3. Search engines index text in the alt attribute to improve the SEO ranking of web pages.
HTML, CSS, and JavaScript: Examples and Practical ApplicationsMay 09, 2025 am 12:01 AMThe roles of HTML, CSS and JavaScript in web development are: 1. HTML is used to build web page structure; 2. CSS is used to beautify the appearance of web pages; 3. JavaScript is used to achieve dynamic interaction. Through tags, styles and scripts, these three together build the core functions of modern web pages.
How do you set the lang attribute on the tag? Why is this important?May 08, 2025 am 12:03 AMSetting the lang attributes of a tag is a key step in optimizing web accessibility and SEO. 1) Set the lang attribute in the tag, such as. 2) In multilingual content, set lang attributes for different language parts, such as. 3) Use language codes that comply with ISO639-1 standards, such as "en", "fr", "zh", etc. Correctly setting the lang attribute can improve the accessibility of web pages and search engine rankings.
What is the purpose of HTML attributes?May 07, 2025 am 12:01 AMHTMLattributesareessentialforenhancingwebelements'functionalityandappearance.Theyaddinformationtodefinebehavior,appearance,andinteraction,makingwebsitesinteractive,responsive,andvisuallyappealing.Attributeslikesrc,href,class,type,anddisabledtransform
How do you create a list in HTML?May 06, 2025 am 12:01 AMTocreatealistinHTML,useforunorderedlistsandfororderedlists:1)Forunorderedlists,wrapitemsinanduseforeachitem,renderingasabulletedlist.2)Fororderedlists,useandfornumberedlists,customizablewiththetypeattributefordifferentnumberingstyles.
HTML in Action: Examples of Website StructureMay 05, 2025 am 12:03 AMHTML is used to build websites with clear structure. 1) Use tags such as, and define the website structure. 2) Examples show the structure of blogs and e-commerce websites. 3) Avoid common mistakes such as incorrect label nesting. 4) Optimize performance by reducing HTTP requests and using semantic tags.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
SublimeText3 Chinese version
Chinese version, very easy to use
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
Dreamweaver Mac version
Visual web development tools
