Bootstrapメモ:レイアウト&フォーム

Bootstrapでは、個人のメモに使用されるレイアウトおよびフォーム形式が一般的です.

サブタイトル

<h1>Bootstrap <small> small>h1>

段落

<p>
     ， Bootstrap 。
p>

強調内容:class="lead"

<p class="lead"> ， 。p>

太字:

<p>
	 <strong>Bootstrapstrong>
p>

斜体:または

<p> <em> em> <i>Bootstrapi> 。 <i>Bootstrapi>。p>

強調:class=“text-xxxx”

<div class="text-muted">.text-muted  div>
<div class="text-primary">.text-primary div>
<div class="text-success">.text-success div>
<div class="text-info">.text-info div>
<div class="text-warning">.text-warning div>
<div class="text-danger">.text-danger div>
<p class="text-danger"> ， Bootstrap p>

テキスト揃え:class=“text-left”,class=“text-center”,class=“text-right”,class=“text-justify”

<p class="text-left"> p>
<p class="text-center"> p>
<p class="text-right"> p>
<p class="text-justify">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. p>

リスト:

    
 1
    
 2
    
 3


    
 1
    
 2
    
 3


    
 
    
 1
    
 2

無秩序リスト:

<h5> h5>
<ul>
    <li> li>
    <li> li>
    <li>Rapli>
    <li> li>
ul>

秩序リスト:

 

      
 
      
 
      
 

 

    
 
    

     
        

        
 (2)
        
 (2)
        
    
    
 

チェックリスト:class=“list-unstyled”

インラインリスト:垂直リストを水平リストに変更し、箇条書き(番号)を外して水平表示を維持する.

     ：
    
 
    
 
    
Rap
    
 

定義リスト:

    
 
    
 ， 
    
 
    
 

水平定義リスト:インラインリストのように、Bootstrapは
クラス名「.dl-horizontal」を追加して、定義リストに水平表示効果を適用します.

<dl class="dl-horizontal">
    <dt> ：dt>
    <dd> dd>
    <dt> ：dt>
    <dd> dd>
dl>

コード

1、code:一般的には単一の単語や単一の文に対するコード2、pre:一般的には複数行のコード(つまりブロックのコード)3、kbd:一般的にはユーザーがキーボードで入力する内容を表す
コード内で小さい記号()に遭遇した場合は、">"を使用して置き換えます.

コードスクロールバー:class=“pre-scrollable”

<pre class="pre-scrollable">
from django.shortcuts import render
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse
from .models import Article

def blog_index(request):
    #  Article
    articles = Article.objects.all()

    # render(request, template_name, context)
    #  ：
    # context dict
    # dict key 
    return render(request, template_name='simpleblog/index.html', context={'articles': articles})
pre>

表:

.Table:基礎表

.table-striped:シマウマ線表

.Table-bordered:枠付き表

.table-hover:ハイライトされた表をマウスで止める

.table-condensed:コンパクトフォーム

.table-responsive:レスポンステーブル

基礎表:

<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>
   tbody>
 table>

表行class:

<table class="table">
  <thead>
    <tr>
      <th> th>
      <th> th>
    tr>
  thead>
  <tbody>
    <tr class="active">
      <td>.activetd>
      <td> td>
    tr>
    <tr class="success">
      <td>.successtd>
      <td> td>
    tr>
    <tr class="info">
      <td>.infotd>
      <td> td>
    tr>
    <tr class="warning">
      <td>.warningtd>
      <td> ， td>
    tr>
    <tr class="danger">
      <td>.dangertd>
      <td> td>
    tr>
  tbody>
table> 

シマウマ線表:

 <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>
   tbody>
 table>

枠付き表:

 <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>
   tbody>
 table>

ハイライトされた表をマウスで浮かべる:

 <table class="table table-striped table-bordered table-hover">
   <thead>
     <tr>
       <th> th>
       <th> th>
       <th> th>
     tr>
   thead>
   <tbody>
     <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>
   tbody>
 table>

応答式テーブル:

Bootstrapはコンテナを提供し、このコンテナはクラス名「.table-responsive」を設定し、このコンテナは応答効果を有し、その後このコンテナに配置され、テーブルも応答効果を有する.
Bootstrapでは、ブラウザの表示領域が768 px未満の場合、テーブルの下部に水平スクロールバーが表示されます.ブラウザの表示領域が768 pxより大きいと、テーブルの下部の水平スクロールバーが消えます.

<div class="table-responsive">
   <table class="table table-bordered">
   <thead>
     <tr>
       <th> th>
       <th> th>
       <th> th>
     tr>
   thead>
   <tbody>
     <tr>
       <td> td>
       <td> td>
       <td> td>
     tr>
   tbody>
 table>
div>

フォームform:フォームによく見られる要素は、主にテキスト入力ボックス、ドロップダウン選択ボックス、ラジオボタン、チェックボタン、テキストフィールド、ボタンなどです.

<form>
  <div>
    <label for="exampleInputEmail1"> ：label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder=" ">
  div>
  <div>
    <label for="exampleInputPassword1"> label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder=" ">
  div>
  <div>
    <label>
      <input type="checkbox">  
    label>
  div>
  <button type="submit" class="btn btn-default"> button>
form>	

水平フォーム:

Bootstrapフレームワークで水平フォーム効果を実現するには、1、要素でクラス名「form-horizontal」を使用する2つの条件を満たす必要があります.2、Bootstrapフレームワークに合わせたグリッドシステム.

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label"> label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder=" ">
    div>
  div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label"> label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder=" ">
    div>
  div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox">  
        label>
      div>
    div>
  div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default"> button>
    div>
  div>
form>

インラインフォーム:フォームのコントロールを1行に表示する

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2"> label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder=" ">
  div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2"> label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder=" ">
  div>
  <div class="checkbox">
    <label>
      <input type="checkbox">  
    label>
  div>
  <button type="submit" class="btn btn-default"> button>
form>

フォームコントロール:input,select,textarea,checkbox,radio,button/btn

フォームコントロール(入力ボックスinput):

<form role="form">
    <div class="form-group">
        <input type="email" class="form-control" placeholder="Enter Email">
        <input type="text" class="form-control" placeholder="Enter username">
    div>
form>

フォームコントロール(ドロップダウン選択ボックスselect)

マルチライン用multipleを表示します.

<form role="form">
<div class="form-group">
  <select class="form-control">
    <option> option>
    <option> option>
    <option>Rapoption>
    <option> option>
  select>
  div>
  <div class="form-group">
  <select multiple class="form-control">
    <option> option>
    <option> option>
    <option>Rapoption>
    <option> option>
  select>
div>
form> 

フォームコントロール(テキストフィールドtextarea)

rowsを設定すると高さが定義され、colsを設定すると幅が設定されます.ただしtextarea要素にクラス名「form-control」クラス名が追加されている場合はcolsプロパティを設定する必要はありません.

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="5">  input。 。Bootstrap   HTML5   input  ， ：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel   color。  type  ，  input  。textarea>
  div>
form>

フォームコントロール(チェックボックスcheckboxと単一選択ボタンradio)

1.checkboxでもradioでもlabelで包まれている2.checkboxはlabelラベルとともに「.checkbox」という容器内に置かれている3.radioはlabelラベルとともに「.radio」という容器内に置かれている

<form role="form">
  <h3> 1h3>
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
       
    label>
  div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
       
    label>
  div>
    <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
       
    label>
  div>
form> 

フォームコントロール(チェックボックスとラジオボタンの水平配置)

1.checkboxに水平配列が必要な場合はlabelタグにクラス名「checkbox-inline」を追加するだけ2、radioに水平配列が必要な場合はlabelタグにクラス名「radio-inline」を追加するだけ

<form role="form">
    <div class="form-group">
        <label class="checkbox-inline">
            <input type="checkbox" name="sex" value="man"> 
        label>
        <label class="checkbox-inline">
            <input type="checkbox" name="sex" value="women"> 
        label>
        <label class="checkbox-inline">
            <input type="checkbox" name="sex" value="idontknow"> 
        label>
    div>
form>

フォームコントロール(ボタン)

<table class="table table-bordered table-striped">  
    <thead>  
      <tr>  
        <th>Buttonth>  
        <th>class=""th>  
        <th>Descriptionth>  
      tr>  
    thead>  
    <tbody>  
      <tr>  
        <td><button class="btn" href="#">Defaultbutton>td>  
        <td><code>btncode>td>  
        <td>Standard gray button with gradienttd>  
      tr>  
      <tr>  
        <td><button class="btn btn-primary" href="#">Primarybutton>td>  
        <td><code>btn btn-primarycode>td>  
        <td>Provides extra visual weight and identifies the primary action in a set of buttonstd>  
      tr>  
      <tr>  
        <td><button class="btn btn-info" href="#">Infobutton>td>  
        <td><code>btn btn-infocode>td>  
        <td>Used as an alternative to the default stylestd>  
      tr>  
      <tr>  
        <td><button class="btn btn-success" href="#">Successbutton>td>  
        <td><code>btn btn-successcode>td>  
        <td>Indicates a successful or positive actiontd>  
      tr>  
      <tr>  
        <td><button class="btn btn-warning" href="#">Warningbutton>td>  
        <td><code>btn btn-warningcode>td>  
        <td>Indicates caution should be taken with this actiontd>  
      tr>  
      <tr>  
        <td><button class="btn btn-danger" href="#">Dangerbutton>td>  
        <td><code>btn btn-dangercode>td>  
        <td>Indicates a dangerous or potentially negative actiontd>  
      tr>  
      <tr>  
        <td><button class="btn btn-inverse" href="#">Inversebutton>td>  
        <td><code>btn btn-inversecode>td>  
        <td>Alternate dark gray button, not tied to a semantic action or usetd>  
      tr>  
    tbody>  
  table> 

基本ボタン

<button class="btn" type="button"> button>

デフォルトボタン

デフォルトのボタンのスタイルは、ベースボタンのスタイルに基づいてボタンの背景色、枠線色、テキスト色を変更します.

<button class="btn btn-default" type="button"> button>

マルチタグ対応

一般的に作成ボタンはラベル要素のほか、和ラベルなども使用できます.同様に、Bootstrapフレームワークでボタンを作成する場合、先ほど述べたラベル要素のほかに、他のラベル要素にも使用できますが、ボタンを作成するラベル要素にクラス名「btn」を追加するだけで注意が必要です.追加しないとボタン効果はありません.

<button class="btn btn-default" type="button">button button>
<input type="submit" class="btn btn-default" value="input "/>
<a href="##" class="btn btn-default">a a>
<span class="btn btn-default">span span>
<div class="btn btn-default">div div>

ボタンカスタマイズスタイル

<button class="btn" type="button"> .btnbutton>
<button class="btn btn-default" type="button"> .btn-defaultbutton>
<button class="btn btn-primary" type="button"> .btn-primarybutton>
<button class="btn btn-success" type="button"> .btn-successbutton>
<button class="btn btn-info" type="button"> .btn-infobutton>
<button class="btn btn-warning" type="button"> .btn-warningbutton>
<button class="btn btn-danger" type="button"> .btn-dangerbutton>
<button class="btn btn-link" type="button"> .btn-linkbutton>

ボタンサイズ

    <button class="btn btn-primary btn-lg" type="button"> .btn-lgbutton> 
    <button class="btn btn-primary" type="button"> button>
    <button class="btn btn-primary btn-sm" type="button"> .btn-smbutton>
    <button class="btn btn-primary btn-xs" type="button"> button>

ブロックボタン

前のセクションの内容から、各例のボタン幅は、ボタンテキストとpaddingの値によって決定されることがわかります.しかし、ボタンを作成する際には、特に移動端の作成において、親容器全体(width:100%)にボタン幅が満たされる必要がある場合がある.ボタンの幅を再定義しない限り、前の方法はうまく実現できません.実はBootstrapではそうする必要はありません.Bootstrapフレームワークにはクラス名「btn-block」が提供されています.ボタンはこのクラス名を使用して、ボタンをコンテナ全体に満たすことができ、このボタンにはpaddingとmargin値はありません.実際には、このようなボタンをブロックボタンと呼ぶことが多い.

    <button class="btn btn-primary btn-lg btn-block" type="button"> .btn-lgbutton> 
    <button class="btn btn-primary btn-block" type="button"> button>
    <button class="btn btn-primary btn-sm btn-block" type="button"> .btn-smbutton>
    <button class="btn btn-primary btn-xs btn-block" type="button"> .btn-xsbutton>   

ボタン状態——アクティブ

   <button class="btn" type="button"> .btnbutton>  
   <button class="btn btn-default" type="button"> .btn-defaultbutton> 
   <button class="btn:hover btn-primary btn-block" type="button"> .btn-primarybutton> 
   <button class="btn:active btn-success btn-block" type="button"> .btn-successbutton> 
   <button class="btn:focus btn-info btn-block" type="button"> .btn-infobutton> 
   <button class="btn btn-warning" type="button"> .btn-warningbutton> 
   <button class="btn btn-danger" type="button"> .btn-dangerbutton> 
   <button class="btn btn-link" type="button"> .btn-linkbutton> 

ボタン状態——無効状態

	<button class="btn btn-primary btn-lg btn-block" type="button" disabled="disabled"> disabled button> 
	<button class="btn btn-primary btn-block disabled" type="button"> disabled button>
	<button class="btn btn-primary btn-sm btn-block" type="button"> button>

画像

1、img-responsive:応答式ピクチャ、主に応答式設計2、img-rounded:フィレットピクチャ3、img-circle:円形ピクチャ4、img-thumbnail:サムネイルピクチャ

<img  alt="140x140" src="http://placehold.it/140x140">
<img  class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<img  class="img-responsive" alt="140x140" src="http://placehold.it/140x140">

アイコン

	<span class="glyphicon glyphicon-search">span>
	<span class="glyphicon glyphicon-asterisk">span>
	<span class="glyphicon glyphicon-plus">span>
	<span class="glyphicon glyphicon-cloud">span>
    <span class="glyphicon glyphicon-heart">span>