목차
按钮
a,input,button都可以设置为按钮
 
预置样式
按钮大小
块级按钮-btn-block
禁用状态 class="disabled"
激活状态 class="active"
图片
响应式图片-img-responsive
图片的三种形状
表格
基本表格 .table
斑马线表格 .table .table-striped
带边框表格 .table .table-bordered
鼠标悬停表格 .table .table-hover
紧凑表格 .table .table-condensed
响应式表格 .table .table-responsive
状态类
表单
基本表单-.from-control 和.from-group搭配
内联表单-.from-inline
移动端注意(隐藏label)
input的内联组合
水平排列表单(用栅格系统)
单选框和复选框的内联形式
静态控件 .form-control-static
标题
h6标题样式
标题也可用class="h1"设置
副标题-(或class="small")
页面内容
p标签
突出段落-class="lead"
内联文本元素
标记-
删除线-
下划线-
小号文本-
强调-
斜体-
对齐
改变大小写
缩略语 标签
引用
基本引用
引用来源
居右的引用,添加类.blockquote-reverse
列表
无样式列表.list-unstyled
内联列表-同一行显示.list-inline
普通描述
水平排列描述.dl-horizontal
代码
内联代码 code
用户输入 kbd
代码块 pre
变量 var
程序输出 samp
웹 프론트엔드 HTML 튜토리얼 Bootstrap3 CSS样式基本用法总结_html/css_WEB-ITnose

Bootstrap3 CSS样式基本用法总结_html/css_WEB-ITnose

Jun 24, 2016 am 11:26 AM

出于学习需要,自觉得把基本的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/imghw/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/imghw/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/imghw/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/imghw/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 即将到来,期待!

    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

    핫 AI 도구

    Undresser.AI Undress

    Undresser.AI Undress

    사실적인 누드 사진을 만들기 위한 AI 기반 앱

    AI Clothes Remover

    AI Clothes Remover

    사진에서 옷을 제거하는 온라인 AI 도구입니다.

    Undress AI Tool

    Undress AI Tool

    무료로 이미지를 벗다

    Clothoff.io

    Clothoff.io

    AI 옷 제거제

    AI Hentai Generator

    AI Hentai Generator

    AI Hentai를 무료로 생성하십시오.

    인기 기사

    R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
    3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 최고의 그래픽 설정
    3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
    3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
    WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
    4 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

    뜨거운 도구

    메모장++7.3.1

    메모장++7.3.1

    사용하기 쉬운 무료 코드 편집기

    SublimeText3 중국어 버전

    SublimeText3 중국어 버전

    중국어 버전, 사용하기 매우 쉽습니다.

    스튜디오 13.0.1 보내기

    스튜디오 13.0.1 보내기

    강력한 PHP 통합 개발 환경

    드림위버 CS6

    드림위버 CS6

    시각적 웹 개발 도구

    SublimeText3 Mac 버전

    SublimeText3 Mac 버전

    신 수준의 코드 편집 소프트웨어(SublimeText3)

    & lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

    이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

    & lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

    이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

    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에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

    HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

    이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

    뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? 뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? Mar 20, 2025 pm 05:56 PM

    이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

    & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

    이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

    Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류? Gitee Pages 정적 웹 사이트 배포 실패 : 단일 파일 문제를 해결하고 해결하는 방법 404 오류? Apr 04, 2025 pm 11:54 PM

    GiteEpages 정적 웹 사이트 배포 실패 : 404 오류 문제 해결 및 해결시 Gitee ...

    See all articles