ドラブーのアンドロイドとIoTなブログ

[9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19]

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2025/04/30 (Wed)

Bootstrap 伝票明細の入力　その5

方法としては
・グリッドの利用
・formグループの利用
・テーブルの利用
を検討した

テーブルでうまく行きそうだが
<table class="table table-striped table-bordered table-hover">
<form>
<thead>
  <tr class ="table-primary">
   <th style="width: 8%">cd</th>
   <th style="width: 8%">*</th>
   <th style="width: 24%">na</th>
   <th style="width: 8%">su</th>
   <th style="width: 8%">tan</th>
   <th style="width: 8%">kin</th>
   <th style="width: 8%">zkbn</th>
   <th style="width: 4%">so</th>
   <th style="width: 4%">t1</th>
   <th style="width: 4%">t2</th>
   <th style="width: 4%">t3</th>
   <th style="width: 12%">biko</th>
  </tr>
</thead>
で見出しは配分してくれるが
<tr>
  <td ><input type="text" name="cd" value ="cd"></td>
で画面が右に広がる　
<tr>
  <td ><input type="text" name="cd"   size="10" value ="cd"></td>
とサイズをいれても同じ
基本色々とテストしがたテーブルではできないようである

・次に王道として　form-inline　form-group　form-control
の利用だが右端からきっちりと表示してくれる
<form class="form-inline">
<div class="form-group">
  <input type="text" name="cd" class="form-control" size ="10" value ="cd">
</div>
<div class="form-group">
        <input type="submit" name ="serch" value ="表示" class="form-control btn btn-primary btn-sm">
</div>
<div class="form-group">
  <input type="text" name="na" class="form-control" size ="30" value ="na">
</div>
<div class="form-group">
  <input type="submit" name ="serch" value ="一覧" class="form-control btn btn-primary btn-sm">
</div>
<div class="form-group">
  <input type="text" name="bsu" class="form-control" size ="10" value ="iri">
</div>

・次に
<div class="container">
   <div class ="row bg-info text-white">
のである

１２列内に列の追加が可能で使いやすいのでこれを使う事に

ソースは次のブログで

2018/11/04 (Sun) 未選択

Bootstrap テーブルの利用　その４

Bootstrap テーブルの利用　その４

・サンプル
<table class="table table-striped table-bordered table-hover">
　罫線有り、一行おき色つき、選択行をハイに

・サンプル見出しの色とセル幅の指定％指定が便利

2018/11/03 (Sat) 未選択

Bootstrap ボタンの利用　その３

Bootstrap ボタンの利用　その３
・サンプル

<input type="submit" name ="serch" value =" 受注表示 " class="col-1 btn btn-primary btn-sm">

・ボタンの上にマウスが移動すると指のマークになる
primary
secondary
success
danger
warning
info
light
dark
が利用可能

2018/11/03 (Sat) 未選択

Bootstrap グリッドシステムの利用　その２

Bootstrap グリッドシステムの利用　その２
・サンプル
<div class="container">

<font size="2" class="col-3">名称一部入力で一致検索</font>

</div>
<idv>

・最大１２分割可能　幅指定で残をつかう場合はclass="col”
・<div class="col-1">取引先</div>だけど
　<font class="col-1">でも
　<input id="tcd" name="tcd" type="number" class="col-2”でも
　大丈夫みたい

・注意点　formの間がおかしくなる

<form　xxxx>
</form>
この間は　<div class="row">でなく<div class="container">を再度定義

2018/11/03 (Sat) 未選択

Bootstrap 導入編　その１

Bootstrap 導入編　その１

１．http://getbootstrap.com/にアクセス
２．Downloadボタンを押す
３．Compiled and minified CSS　and　JSのdownloadを押す
４．CSS内のbootstrap.minとbootstrap.min.cssを自分のCSSにコピー
５．JS内のbootstrap.bundle.minとbootstrap.bundle.min.jsを自分のJSにコピー
６．JQueryからjquery-3.3.1.slim.minをコピー
　（datepickerを使いたかったのでjs/jquery-3.2.1.min.jsを使用）

７．metaとLinkはこんな具合い