コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > Bootstrap3 CSSの基本的な使い方まとめ_html/css_WEB-ITnose

Bootstrap3 CSSの基本的な使い方まとめ_html/css_WEB-ITnose

WBOY
リリース： 2016-06-24 11:26:19
オリジナル
974 人が閲覧しました

学習の目的で、基本的なブートストラップの使用法を自分で入力し、それぞれの使用法をより明確に印象付ける必要があると感じたので、このまとめを作成しました。これは、統合された学習プロセスでもあります。

左側の目次をクリックすると、簡単に参照できます。

ボタン

a、入力、ボタンはすべてボタンとして設定できます

ラベルボタンボタンラベルボタン

        <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>
ログイン後にコピー

プリセットスタイル

デフォルトスタイル プライマリスタイル 成功スタイル 情報スタイル 警告スタイル 危険スタイル リンクスタイル

        <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>
ログイン後にコピー

ブロックレベル button-btn-block

ブロックレベルボタン、親付き要素はブロックレベルのボタンと同じ幅、親要素と同じ幅です 

        <button class="btn btn-success btn-block">块级按钮，与父元素等宽</button>        <button class="btn btn-warning btn-lg btn-block">块级按钮，与父元素等宽</button>
ログイン後にコピー

Disabled state class="disabled"

Disabled state class="disabled"

Disabled state class=" active"

アクティブ化された状態 ボタン 

        <button class="btn btn-success disabled">被禁用的按钮</button>
ログイン後にコピー

image

owned-image-img-sensitive

        <button class="btn btn-success active">激活状态的按钮</button>
ログイン後にコピー

画像の3つの形状

        <img class="img-responsive" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/783931/o_%e8%83%8c%e6%99%af%e5%9b%be1.png" />
ログイン後にコピー

テーブル

Basic table.table

表のタイトル 表のタイトル 表のタイトル

表のセル 表のセル 表のセル テーブルユニット
        <img class="img-rounded" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" />        <img class="img-thumbnail" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" />        <img class="img-circle" src="http://images.cnblogs.com/cnblogs_com/hlwyfeng/601951/o_img05.jpg" />
ログイン後にコピー
表のセル 表のセル
表のセル テーブルユニット
テーブル単位

ゼブラクロッシング table.table .table-striped

テーブルタイトル テーブルタイトル テーブルタイトル

テーブルセル テーブルセル表のセル表のセル
        <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 .table-bordered

テーブルタイトル テーブルタイトル表のタイトル

表のセル

表のセル表のセル表のセル表のセル表のセルTableセルテーブルセルmouse table-hover
rreee

表のタイトル 表のタイトル 表のタイトル

表のセル

表のセル

表のセル 表のセル 表のセル 表のセル 表のセルテーブルセルテーブルセルcompact table.table .table-condensed
        <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 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>h1标题样式</h1>      <h4>h4标题样式</h4>      <h5>h5标题样式</h5>      <h6>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&lt;stdio&gt;</code>
    ログイン後にコピー

    用户输入 kbd

    请按 F5 刷新 

              请按 <kbd>F5</kbd> 刷新
    ログイン後にコピー

    代码块 pre

    <div>This is a tag name div </div>
    ログイン後にコピー

              <pre class="brush:php;toolbar:false">&lt;div&gt;This is a tag name div &lt;/div&gt;
    ログイン後にコピー

    变量 var

    a 

              <var>a</var>
    ログイン後にコピー

    程序输出 samp

    Hello World! 

              <samp>Hello World!</samp>
    ログイン後にコピー

     

     

    本篇总结了一些常用的bootstrap3 的Css样式，但并非所有。

    详细的学习请参考bootstrap官网：http://getbootstrap.com

    bootstrap4 即将到来，期待！

    関連ラベル：
    Bootstrap3 CSS样式基本用法总结
    ソース：php.cn
    前の記事：表示属性の深い理解_html/css_WEB-ITnose 次の記事：モバイル Web ページのレイアウト エクスペリエンス summary_html/css_WEB-ITnose
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
    から 2024-04-06 19:39:29
    0
    1
    441
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート