cool hit counter Bootstrap learning documentation (II)_Intefrankly

Bootstrap learning documentation (II)


Bootstrap

Labels and styles

Bootstrap resets the style of some tags, i.e. sets the style of some tags with Bootstrap style, such as h tags, p tags, etc. This includes HTML5 tags.

The sample code is as follows. You can comment out the style file of Bootstrap's css and refresh the browser to see the default style of the tab in both cases.

<h1>Love the beauty of autumn</h1>
<h2> Write to your girlfriend columns</h2>
<h3>Bootstrap Learning Documents</h3>
<h4> An ape who writes programs.</h4>
<h5>html</h5>
<h6>css</h6>
<p>http://www.jianshu.com</p>
<p><kbd>ctrl+i</kbd></p>
<pre><p> Here's a snippet of text, Will not be parsed</p><br /><div>kaivon</div></pre>
<code>Hello, word!</code>
<code><span></code>

If you want to use the Bootstrap h tag's six-level header style, you can also add the class names of h1~h6 directly to the tag, e.g. <span class="h1"> Title Style</span>

form

Bootstrap also resets the table tag to include common table styles, such as color changes on alternate rows, adding borders, etc. Here are the names of Bootstrap's table classes, which can be used in combination.

  • table will modify some simple styles
  • table-striped color change between rows
  • table-bordered for form Adding a border
  • table-hover adds a hover state to each row
  • table-condensed permit form more compact

note: will form Wrapped in aclass because oftable-responsive ofdiv Li (surname), When the screen size is smaller than768 The scroll bar appears when the

(located) at form in,Bootstrap Some state classes are also encapsulated, These state classes allow you to set colors for rows or cells。

  • active The color set when the mouse hovers over a row or cell
  • Success Marking success or positive action
  • info Identifies a common prompt message or action
  • warning Identifies a warning or requires the user's attention
  • danger Marking dangerous or potentially negative actions

The sample code is as follows.

<div class="container">
  <div class="row">
    <div class="table-responsive">
      <table class="table table-striped table-bordered table-hover table-condensed">
      <thead>
        <tr>
          <th> Monday</th>
          <th> Tuesday</th>
          <th> Wednesdays</th>
          <th> Thursday</th>
          <th> Friday</th>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td> language  </td>
          <td> maths</td>
          <td> English</td>
          <td> biological</td>
          <td> chemically</td>
        </tr>
        <tr class="success">
          <td> language  </td>
          <td> maths</td>
          <td> English</td>
          <td> biological</td>
          <td> chemically</td>
        </tr>
        <tr class="warning">
          <td> language  </td>
          <td> maths</td>
          <td> English</td>
          <td> biological</td>
          <td> chemically</td>
        </tr>
        <tr class="danger">
          <td> language  </td>
          <td> maths</td>
          <td> English</td>
          <td> biological</td>
          <td> chemically</td>
        </tr>
        <tr class="info">
          <td> language  </td>
          <td> maths</td>
          <td> English</td>
          <td> biological</td>
          <td> chemically</td>
        </tr>
        <tr>
          <td class="active"> language </td>
          <td class="success"> maths</td>
          <td class="warning"> English</td>
          <td class="danger"> biological</td>
          <td class="info"> chemically</td>
        </tr>
      </tbody>
    </table>
    </div>
  </div>
</div>

form (document)

1.Basic style

  • form-control permit form (document) The width of the100%, And a few other styles have been added , as if form (document) Rounded corner effect and focus glow
  • form-group adds some distance between the vertical sides of the form
  • form-inline permit form (document) Show in one line, At this point it is possible not toform-group, But it is still recommended to add The sample code is as follows.
<div class="container">
  <div class="row">
    <form action="#" class="form-inline">
      <!--<div class="form-group">-->
        <label for="userName"> user ID</label>
        <input type="text" id="userName" class="form-control" />
      <!--</div>-->
      
      <!--<div class="form-group">-->
        <label for="password"> pin number</label>
        <input type="password" id="password" class="form-control" />
      <!--</div>-->
    </form>
  </div>
</div>

2.Style Progression

  • form-horizontal permit form (document) Show in one line, And can changeform-group style
  • control-label center the text in the label horizontally and vertically

The sample code is as follows.

<div class="container">
  <div class="row">
    <form action="#" class="form-horizontal">
      <div class="form-group">
        <label for="userName" class="col-lg-1 control-label"> user ID</label>
        <div class="col-lg-11">
          <input type="text" id="userName" class="form-control" />
        </div>
      </div>
      
      <div class="form-group">
        <label for="password" class="col-lg-1 control-label"> pin number</label>
        <div class="col-lg-11">
          <input type="password" id="password" class="form-control" />
        </div>
      </div>
      
      <div class="form-group">
        <div class="col-lg-1 col-lg-offset-1">
          <input type="button" value=" log in" class="btn" />
        </div>
      </div>
    </form>
  </div>
</div>

3.Special styles Styles for radio boxes, check boxes, text field boxes

  • checkbox checkbox style settings
  • checkbox-inline Make the checkbox appear in one line
  • Style settings for radio radio
  • radio-inline permitradio Show in one line

Form's check status class

  • has-warning form (document) Fill in the warning
  • has-error Wrong form completion
  • has-success form (document) Fill in successfully

The sample code is as follows.

<div class="form-group">
  <div class="col-lg-1 col-lg-offset-1">
    <div class="checkbox disabled">
      <label><input type="checkbox" disabled />  Remember me.</label>
    </div>
    
  </div>
</div>

<div class="form-group">
  <div class="col-lg-1 col-lg-offset-1">
    <div class="checkbox">
      <label><input type="checkbox" />  Forget me.</label>
    </div>
    
  </div>
</div>

<!--checkbox Show in one line-->
<div class="form-group">
  <div class="col-lg-11 col-lg-offset-1">
    <div class="checkbox">
      <label class="checkbox-inline"><input type="checkbox" />  Forget me.</label>
      <label class="checkbox-inline"><input type="checkbox" />  Forget me.</label>
    </div>
    
  </div>
</div>


<!--radio Show in one line-->
<div class="form-group">
  <div class="col-lg-11 col-lg-offset-1">
    <div class="radio">
      <label class="radio-inline"><input type="radio" />  Forget me.</label>
      <label class="radio-inline"><input type="radio" />  Forget me.</label>
    </div>
  </div>
</div>

<!--select drop-down box-->
<div class="form-group">
  <div class="col-lg-11 col-lg-offset-1">
    <select multiple class="form-control">
      <option value="">1</option>
      <option value="">2</option>
      <option value="">3</option>
      <option value="">4</option>
      <option value="">5</option>
    </select>
  </div>
</div>

<!-- text input box-->
<div class="form-group">
  <div class="col-lg-11 col-lg-offset-1">
    <textarea class="form-control"></textarea>
  </div>
</div>

buttons

Bootstrap Provides us with a wealth of buttons design

  • buttons The background color of the btn-default default buttons design btn-link Link style of buttons btn-primary Preferred Colors of buttons btn-success Successful colors of buttons btn-info General Information Color of buttons btn-warning Warning Colors. buttons btn-danger dangerous color buttons
  • Button size btn-lg btn-md btn-sm btn-xs
  • btn-block Make the button change from an inline block-level element to a block-level element that can hold up the entire parent element, i.e., set the width of the button to 100%.
  • buttons states active disabled

The sample code is as follows.

<div class="container">
  <div class="row">
    <input type="button" value=" buttons" class="btn" />
    <button type="button" class="btn btn-default">kaivon</button>
    <button type="button" class="btn btn-primary">kaivon</button>
    <button type="button" class="btn btn-success">kaivon</button>
    <button type="button" class="btn btn-info">kaivon</button>
    <button type="button" class="btn btn-warning">kaivon</button>
    <button type="button" class="btn btn-danger">kaivon</button>
    <button type="button" class="btn btn-link">kaivon</button>
  </div>
  
  <!-- Button size-->
  <div class="row" style="margin-top: 10px;">
    <button type="button" class="btn btn-default btn-lg">kaivon</button>
    <button type="button" class="btn btn-primary btn-md">kaivon</button>
    <button type="button" class="btn btn-success btn-sm">kaivon</button>
    <button type="button" class="btn btn-info btn-xs">kaivon</button>
  </div>
  
  <!--btn-block  permit buttons width becomes100%, And it becomes a block-level element-->
  <div class="row" style="margin-top: 10px;">
    <button type="button" class="btn btn-primary btn-block">kaivon</button>
  </div>
  
  <!-- activation status-->
  <div class="row" style="margin-top: 10px;">
    <button type="button" class="btn btn-primary active">kaivon</button>
    <a href="#" class="btn btn-danger active">kaivon</a>
  </div>
  
  <!-- Disable status-->
  <div class="row" style="margin-top: 10px;">
    <button type="button" class="btn btn-primary active" disabled>kaivon</button>
    <button type="button" class="btn btn-info disabled">kaivon</button>
    <a href="#" class="btn btn-danger active disabled">kaivon</a>
  </div>
</div>

pictures

Place these classes directly inside the img tag, but don't mess with them!

  • img-responsive Responsive images, where the size of the image changes with the parent container, up to the true size of the image
  • The shape of the picture img-rounded Image with rounded corners img-circle rounded pictures img-thumbnail framed pictures

The sample code is as follows.

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      ![](logo.jpg)
    </div>
  </div>
  
  <!-- The shape of the picture-->
  <div class="row" style="margin-top: 10px;">
    <div class="col-lg-3">
      ![](logo.jpg)
    </div>
    <div class="col-lg-3">
      ![](logo.jpg)
    </div>
    <div class="col-lg-3">
      ![](logo.jpg)
    </div>
  </div>
</div>

auxiliary category

1.Color of the font text-muted text-primary text-success text-info text-warning text-danger You can notice the same thing as the latter part of the previous button background color, Bootstrap naming is very regular, using different prefixes for different usage scenarios.

The sample code is as follows.

<div class="row">
  <p class="text-muted">Love the beauty of autumn</p>
  <p class="text-primary">Love the beauty of autumn</p>
  <p class="text-success">Love the beauty of autumn</p>
  <p class="text-info">Love the beauty of autumn</p>
  <p class="text-warning">Love the beauty of autumn</p>
  <p class="text-danger">Love the beauty of autumn</p>
</div>

2.Background of the text bg-primary bg-success bg-info bg-warning bg-danger

The sample code is as follows.

<div class="row">
  <p class="bg-primary">Love the beauty of autumn</p>
  <p class="bg-success">Love the beauty of autumn</p>
  <p class="bg-info">Love the beauty of autumn</p>
  <p class="bg-warning">Love the beauty of autumn</p>
  <p class="bg-danger">Love the beauty of autumn</p>
</div>

3. Triangular symbols and buttons Bootstrap Commonly used trigonometric symbols are provided and buttons icon (computing), It's easy to use.。 (located) atspan Inside the tag, addcaret class name of the, Then it can become a lower triangle symbol。 (located) atbutton Add it inside.close class name of the, and inbutton Add in× The escape symbol can then appear as a closed buttons。

The sample code is as follows.

<div class="row">
  <span class="caret"></span>
  <button class="close">×</button>
</div>

4.float and drift pull-left left float pull-right right float Note that the floating part directly in row, it is possible to prop up the container, because row is with clear float style, if not put directly in row can be added outside the floating part clearfix class name clear internal float.

The sample code is as follows.

<div class="row">
  <span class="caret"></span>
  <button class="close">×</button>
</div>
<div class="row" style="border: 1px solid #f00;">
  <div class="pull-left"> programmer</div>
  <div class="pull-right"> young lady of the program</div>
</div>
  1. Hide and Show hidden is not taking up the document stream show Normal display invisible Invisible is not visible, but will still occupy a position

The sample code is as follows.

<style>
.row div{
    height: 100px;
    background: green;
    border: 1px solid #000;
    color: #fff;
  }
</style>

<div class="row">
  <div class="col-lg-3 show"> (prefix indicating ordinal number, e.g. first, number two etc)1 columns</div>
  <div class="col-lg-3 hidden"> (prefix indicating ordinal number, e.g. first, number two etc)2 columns</div>
  <div class="col-lg-3"> (prefix indicating ordinal number, e.g. first, number two etc)3 columns</div>
  <div class="col-lg-2 invisible"> (prefix indicating ordinal number, e.g. first, number two etc)4 columns</div>
  <div class="col-lg-1"> (prefix indicating ordinal number, e.g. first, number two etc)5 columns</div>
</div>

6.centered display center-block is a block-level element centered, the principle is actually very simple, is what we often write margin: 0 auto; Also added are display:block; to make the element block-level.

The sample code is as follows.

<div class="row" >
  <div style="width: 100px; height: 100px; border: 1px solid #f00;" class="center-block"></div>
</div>

Responsive Tools

Show and hide relevant content for different screen widths

  • If the condition is met, it is displayed visible-- The contents of the first * are lg md sm xs and the contents of the first * are block inline inline-block .
  • Hide if conditions are met The contents of hidden-* * are lg md sm xs .

The sample code is as follows.

<div class="container">
  <div class="row">
    <div class="col-lg-4 visible-lg-block"> (prefix indicating ordinal number, e.g. first, number two etc)1 go (prefix indicating ordinal number, e.g. first, number two etc)1 columns</div>
    <div class="col-lg-4 visible-lg-inline"> (prefix indicating ordinal number, e.g. first, number two etc)1 go (prefix indicating ordinal number, e.g. first, number two etc)2 columns</div>
    <div class="col-lg-4 visible-lg-inline-block"> (prefix indicating ordinal number, e.g. first, number two etc)1 go (prefix indicating ordinal number, e.g. first, number two etc)3 columns</div>
  </div>
  
  <div class="row">
    <div class="col-lg-4 visible-md-block"> (prefix indicating ordinal number, e.g. first, number two etc)2 go (prefix indicating ordinal number, e.g. first, number two etc)1 columns</div>
    <div class="col-lg-4 visible-md-inline"> (prefix indicating ordinal number, e.g. first, number two etc)2 go (prefix indicating ordinal number, e.g. first, number two etc)2 columns</div>
    <div class="col-lg-4 visible-md-inline-block"> (prefix indicating ordinal number, e.g. first, number two etc)2 go (prefix indicating ordinal number, e.g. first, number two etc)3 columns</div>
  </div>
  
  <div class="row">
    <div class="col-lg-4 hidden-lg"> (prefix indicating ordinal number, e.g. first, number two etc)3 go (prefix indicating ordinal number, e.g. first, number two etc)1 columns</div>
  </div>
</div>

Print category

The print function (browser shortcut Ctrl + P or right-click function option) is rarely used by us normally, Bootstrap has added a print style class to be more comprehensive.

  • When printed, it shows The contents of visible-print-* * have block inline inline-block
  • Hide (not show) when printing hidden-print

The sample code is as follows.

<div class="container">
  <div class="row">
    <div class="col-lg-4 visible-print-block"> (prefix indicating ordinal number, e.g. first, number two etc)1 go (prefix indicating ordinal number, e.g. first, number two etc)1 columns</div>
    <div class="col-lg-4 visible-print-inline"> (prefix indicating ordinal number, e.g. first, number two etc)1 go (prefix indicating ordinal number, e.g. first, number two etc)2 columns</div>
    <div class="col-lg-4 visible-print-inline-block"> (prefix indicating ordinal number, e.g. first, number two etc)1 go (prefix indicating ordinal number, e.g. first, number two etc)3 columns</div>
  </div>
  
  <div class="row">
    <div class="col-lg-4 hidden-print"> (prefix indicating ordinal number, e.g. first, number two etc)2 go (prefix indicating ordinal number, e.g. first, number two etc)1 columns</div>
  </div>
</div>

Bootstrap Series.

Bootstrap Learning Documentation (I)

Bootstrap learning documentation (II)

Bootstrap Learning Documentation (III)

Bootstrap Learning Documentation (IV)


Recommended>>
1、Redis Jmeter and MySQL for that matter
2、Find a free web weather plugin
3、ubuntu file directory structure
4、Angular2Component
5、Introduction to Computer Programming 10C Object Oriented Programming Light Chat Teach Yourself Software Development Together

    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号