搜索
首页web前端html教程详解Bootstrap媒体对象 - 洛水三千

在web页面中,图片居左,内容居右排列,是非常常见的效果,它也就是媒体对象,它是一种抽象的样式,可以用来构建不同类型的组件,在bootstrap框架中其对应的版本文件如下:

LESS: media.less

SASS: _media.scss

媒体对象一般是成组出现,一组媒体对象一般包括以下几部分:

1、媒体对象的容器:用来容纳媒体对象的所有内容,容器上需使用类名.media

2、媒体对象的对象:一般是图片,需使用类.media-object

3、媒体对象的主体:就是媒体对象的主体内容,可以是任何元素,需使用类.media-body

4、媒体对象的标题:用来描述媒体对象的一个标题,需使用类.media-heading

此外,bootstrap框架中常使用类.pull-left和.pull-right来控制媒体对象中的对象浮动方式

下面是它们的css源码:

<span style="color: #800000">.media,
.media-body </span>{<span style="color: #ff0000">
  overflow</span>:<span style="color: #0000ff"> hidden</span>;<span style="color: #ff0000">
  zoom</span>:<span style="color: #0000ff"> 1</span>;
}<span style="color: #800000">
.media,
.media .media </span>{<span style="color: #ff0000">
  margin-top</span>:<span style="color: #0000ff"> 15px</span>;
}<span style="color: #800000">
.media:first-child </span>{<span style="color: #ff0000">
  margin-top</span>:<span style="color: #0000ff"> 0</span>;
}<span style="color: #800000">
.media-object </span>{<span style="color: #ff0000">
  display</span>:<span style="color: #0000ff"> block</span>;
}<span style="color: #800000">
.media-heading </span>{<span style="color: #ff0000">
  margin</span>:<span style="color: #0000ff"> 0 0 5px</span>;
}<span style="color: #800000">
.media > .pull-left </span>{<span style="color: #ff0000">
  margin-right</span>:<span style="color: #0000ff"> 10px</span>;
}<span style="color: #800000">
.media > .pull-right </span>{<span style="color: #ff0000">
  margin-left</span>:<span style="color: #0000ff"> 10px</span>;
}

媒体样式相对来说比较简单,只是设置它们之间的间距;

下面来看看媒体对象的运用:

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>默认媒体对象<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-right"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/1.jpg"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>荷塘月色<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>这几天心里颇不宁静。今晚在院子里坐着乘凉,忽然想起日日走过的荷塘,在这满月的夜里,总该另有一 番样子吧。月亮渐渐地升高了,墙外马路上孩子们的欢笑……<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span>
image

 

媒体对象的嵌套

bootstrap媒体对象嵌套,只需将另一个媒体对象结构放在媒体对象的主体(.media-body)中。下面来看看媒体对象嵌套的运用

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>默认媒体对象的嵌套<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-left"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/3.jpg"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>荷塘月色<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>月光如流水一般,静静地泻在这一片片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样;又像笼着轻纱的梦。虽然是满月,天上却有一层淡淡的云,所以不能朗照;但我以为这恰是到了好处——酣眠固不可少,小睡也别有风味的。<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-left"</span><span style="color: #0000ff">></span>
                    <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/4.jpg"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
                    <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>这里是嵌套内容1111<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
                    <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>荷塘的四面,远远近近,高高低低都是树,而杨柳最多。这些树将一片荷塘重重围住;只在小路一旁,漏着几段空隙,像是特为月光留下的。<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
                    <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
                        <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-left"</span><span style="color: #0000ff">></span>
                            <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/5.jpg"</span><span style="color: #0000ff">></span>
                        <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
                        <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
                            <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>这里是嵌套内容2222<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
                            <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>树梢上隐隐约约的是一带远山,只有些大意罢了。树缝里也漏着一两点路灯光,没精打采的,是渴睡人的眼。这时候最热闹的,要数树上的蝉声与水里的蛙声;但热闹是它们的,我什么也没有<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
                        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
                    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

效果如下:

image

image

媒体对象列表

bootstrap框架提供了一个媒体对象列表展示的效果,在写结构的时候可以使用标签ul,并在标签ul上添加类名.media-list,在标签li上使用类.media

例如:

<span style="color: #0000ff"><span style="color: #800000">h1</span><span style="color: #0000ff">></span>媒体对象列表<span style="color: #0000ff"></span><span style="color: #800000">h1</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"><span style="color: #800000">ul </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-list"</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">li </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-left"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/1.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>媒体对象列表111<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>沿着荷塘,是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走,夜晚更加寂寞。荷塘四周,长着许多树,蓊蓊(wěng)郁郁(2)的。路的一旁,是些杨柳,和一些不知道名字的树。没有月光的晚上,这路上阴森森的,有些怕人。今晚却很好,虽然月光也还是淡淡的。<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">li </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-left"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/2.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>媒体对象列表222<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>路上只我一个人,背着手踱(duó)着。这一片天地好像是我的;我也像超出了平常的自己,到了另一个世界里。我爱热闹,也爱宁静;爱群居,也爱独处。像今晚上,一个人在这苍茫的月下,什么都可以想,什么都可以不想,便觉是个自由的人。<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">li </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-left"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/3.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>媒体对象列表333<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>白天里一定要做的事,一定要说的话,现在都可不理。这是独处的妙处,我且受用这无边的荷香月色好了。曲曲折折的荷塘上面,弥望(3)的是田田(4)的叶子。叶子出水很高,像亭亭的舞女的裙。层层的叶子中间,零星地点缀着些白花,有袅娜地开着的,有羞涩地打着朵儿的;正如一粒粒的明珠,又如碧天里的星星,又如刚出浴的美人。微风过处,送来缕缕清香,仿佛远处高楼上渺茫的歌声似的。<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"><span style="color: #800000">li </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="#"</span><span style="color: #ff0000"> class</span><span style="color: #0000ff">="pull-left"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-object"</span><span style="color: #ff0000"> src</span><span style="color: #0000ff">="img/4.jpg"</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"><span style="color: #800000">div </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-body"</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">h4 </span><span style="color: #ff0000">class</span><span style="color: #0000ff">="media-heading"</span><span style="color: #0000ff">></span>媒体对象列表444<span style="color: #0000ff"></span><span style="color: #800000">h4</span><span style="color: #0000ff">></span>
                <span style="color: #0000ff"><span style="color: #800000">div</span><span style="color: #0000ff">></span>忽然想起采莲的事情来了。采莲是江南的旧俗,似乎很早就有,而六朝时为盛;从诗歌里可以约略知道。采莲的是少年的女子,她们是荡着小船,唱着艳歌(14)去的。采莲人不用说很多,还有看采莲的人。那是一个热闹的季节,也是一个风流(15)的季节。梁元帝(16)《采莲赋》里说得好:。<span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
            <span style="color: #0000ff"></span><span style="color: #800000">div</span><span style="color: #0000ff">></span>
        <span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
    <span style="color: #0000ff"></span><span style="color: #800000">ul</span><span style="color: #0000ff">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

效果如下:

image

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

&lt; datalist&gt;的目的是什么。 元素?&lt; datalist&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

&gt; gt;的目的是什么 元素?&gt; gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

&lt; meter&gt;的目的是什么。 元素?&lt; meter&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?&lt; iframe&gt;的目的是什么。 标签?使用时的安全考虑是什么?Mar 20, 2025 pm 06:05 PM

本文讨论了&lt; iframe&gt;将外部内容嵌入网页,其常见用途,安全风险以及诸如对象标签和API等替代方案的目的。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

仓库:如何复兴队友
1 个月前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
1 个月前By尊渡假赌尊渡假赌尊渡假赌

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。