This is the 30th day of my participation in the August Challenge

Life is too short to learn Python together

Introduction of the bootstrap

  • The framework has already written a lot of page styles for you. If you need to use it, just download the corresponding file and copy it directly after CV

  • When Bootstrap is used, all page styles need to be adjusted by class

  • V3 is recommended: v3.bootcss.com/

Pay attention to

Bootstrap’s JS code is dependent on jQuery, which means that you must import jQuery when using the bootstrap dynamic effects

Import the way

  • Download the bootstrap file and import the external file
  • Use the CND website

Note: When using bootstrap for the first time, it is recommended to import an external file. Otherwise, it may not prompt you to write code

Layout container

  • Whether there is blank space on both sides of the page
    <style>
        #d1 {
            height: 500px;
            background: #4e4e4e;
        }
        #d2 {
            height: 500px;
            background: #1b6d85;
        }
    </style>
</head>
<body>/ / the container space<div class="container" id="d1"></div>// Container-fluid does not leave any space<div class="container-fluid" id="d2"></div>
</body>
Copy the code

Grid system

Introduction to the

The grid system is used to create a page layout with a series of rows and columns into which your content can be placed. The system automatically divides up to 12 columns

Grid system — column offset

<div class="container">
    <div class="row ">
        <! -- Col-md-offset-2 Moves the grid two grid sizes from left to right so that the required eight grids are centered -->
        <div class="col-md-8 c1 col-md-offset-2"></div>
        
    </div>
    
</div>
Copy the code

Grid system code case – to achieve responsive layout

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .c1 {
            height: 100px;
            background: red;
            border: black 3px solid;
        }
        /* Media query: the style changes when the browser page width is less than 600px */
        @media (max-width: 600px) {
            .c1 {
            height: 100px;
            background: blue;
            border: black 3pxsolid; }}</style>
</head>
<body>
    <div class="container">
        <div class="row ">
            <div class="col-md-6 c1 col-xs-6"></div>
            <div class="col-md-6 c1 col-xs-6"></div>
        </div>
        <div class="row">
            <! -- Col-sm-COLs-xs-col-lg -- can accommodate all page sizes -->
            <div class="col-md-2 c1 col-sm-2 col-xs-2 col-lg-2"></div>
            <div class="col-md-8 c1 col-sm-8 col-xs-8 col-lg-8"></div>
            <div class="col-md-2 c1 col-sm-2 col-xs-2 col-lg-2"></div>
        </div>

    </div>


</body>
</html>
Copy the code

Reactive column resets

At certain thresholds, some columns may be higher than others. To overcome this problem, it is recommended to use.clearfix in conjunction

typography

Introduction to the

Bootstrap sets the text font of all native HTML tags to a uniform style acceptable to the naked eye

Some have the same effect, but the meaning of the tag is different (semantic)

The title

All title tags in HTML, < H1 > through

can be used. In addition, classes.h1 through.h6 are provided to style the text of an inline attribute with a caption.
  • Titles that use the Bootstrap framework look more comfortable than those that don’t
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
Copy the code
  • It can also contain within the title<small>Label or endow.smallClass that can be used to tag subheadings.
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
Copy the code

Page theme

Bootstrap sets the global font size to 14px and line-height to 1.428. These attributes are directly assigned to the element and all paragraph elements. In addition, the

(paragraph) element is set to a bottom margin equal to 1/2 line height (10px).

Center content

Paragraphs can be highlighted by adding a.lead class.

<p>Hoe Hoe Day</p>
<p class="lead">Sweat dripped the soil</p>
Copy the code

Inline text elements

The highlighted text

You can use the mark tag to <mark>highlight</mark> text.
Copy the code

Deleted text

Use the tag for deleted text.

<del>This line of text is meant to be treated as deleted text.</del>
Copy the code

Useless text

Use the tag for useless text.

<s>This line of text is meant to be treated as no longer accurate.</s>
Copy the code

Insert text

Additional text is inserted using the tag.

<ins>This line of text is meant to be treated as an addition to the document.</ins>
Copy the code

Underlined text

Underline the text, using the tag.

<u>This line of text will render as underlined</u>
Copy the code

Small text

For inline or block text that does not need emphasis, wrap it with the tag and the text inside will be set to 85% of the font size of the parent container. The nested elements in the title element are set to different font sizes.

You can also give the.small class to inline elements instead of any elements.

<p>Hoe Hoe Day<small>Sweat dripped the soil</small></p>
<p><span class="small">Who eats food</span></p>
Copy the code

Focus on

Emphasize a piece of text by increasing the font-weight value.

<strong>rendered as bold text</strong>
Copy the code

italics

Use italics to emphasize a paragraph of text.

<em>rendered as italicized text</em>
Copy the code

alignment

Text alignment classes make it easy to realign text.

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
Copy the code

Changing font case

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
Copy the code

abbreviations

Bootstrap enhances HTML’s < ABBR > elements to display the full content when hovering over abbreviations and abbreviations. The acronym element has the title attribute and appears as a shallow dotted box that becomes a pointer with a “question mark” when you hover over it. To see the full content, hover over the acronym (also visible to assistive technology users), but you need to include the title attribute. Can be used to add comments to articles

<abbr title="attribute">attr</abbr>
Copy the code
// Add the.initialism class for abbreviations to make font size slightly smaller.<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
Copy the code

address

Keep contact information in a format that is closest to everyday use. Adding

at the end of each line preserves the desired style.

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>
Copy the code

reference

Use references from other sources in your documents.

A reference to the default style

Any HTML element wrapped in < blockQuote > can act as a reference style. For direct references, we recommend the

tag.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
Copy the code
Multiple reference styles

For standard style

, you can change the style and content with a few simple variations.

  • Name the source

Add

to indicate the source of the reference. The name of the source can be wrapped in the
tag.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
Copy the code
  • Another presentation style mentioned above

The.blockQuote-reverse class makes references render content right-aligned.

<blockquote class="blockquote-reverse">.</blockquote>
Copy the code

The list of

  • Unordered list
<ul>
    <li>Drink with the secluded people in the mountains<ul>
            <li>Li bai</li>
        </ul>
    </li>
    <li>Two people drink shanhua bloom</li>
    <li>Cup after cup</li>
    <li>I'm too drunk to sleep</li>
    <li>The Ming Dynasty intends to bring the qin</li>

</ul>
Copy the code
  • An ordered list
<ol>.</ol>
Copy the code
  • Stylesless list

Removes the default list-style style and left margin for a set of elements (for direct children only). This is for direct child elements, which means you need to add this class to all nested lists to have the same style.

<ol class="list-unstyled">
    <li>Drink with the secluded people in the mountains<ul>
            <li>Li bai</li>
        </ul>
    </li>
    <li>Two people drink shanhua bloom</li>
    <li>Cup after cup</li>
    <li>I'm too drunk to sleep</li>
    <li>The Ming Dynasty intends to bring the qin</li>

</ol>
Copy the code
  • Inline list

By setting display: inline-block; Add a little padding and place all the elements on the same line.

<ol class="list-inline">
    <li>Drink with the secluded people in the mountains</li>
    <li>Two people drink shanhua bloom</li>
    <li>Cup after cup</li>
    <li>I'm too drunk to sleep</li>
    <li>The Ming Dynasty intends to bring the qin</li>

</ol>
Copy the code

  • Lists with descriptions

    • A list of phrases with descriptions
    HTML </dt> < DD > Hypertext Markup Language </ DD > </dl>Copy the code
    • Description of horizontal arrangement

    .dl-horizontal can line up phrases and their descriptions in < DL >. It starts with default styles like < DL > stacked on top of each other, arranged in a row as the navigation bar expands.

<dl class="dl-horizontal">
    <dt>html</dt>
    <dd>Hypertext markup language (diandianahfkadfjfdfjkfjkjkfjadkjfkadfkafjaknfajfkafafoaoijifkdnafjkasnfkdjfaksfndsjfakfma; kjfkafhoaejfiojfioqerojfwiioiqk; snfkananfajfajfajpqowlakfoiajfifnjsndfoifnfrnfwwqefafasffe</dd>
    
    <dt>hah</dt>
    <dd>duande</dd>
</dl>
Copy the code

Automatic truncation: With the text-overflow property, a horizontal list of descriptions will truncate phrases that are too long to the left. In a narrow viewport, the list becomes the default stacked layout.

code

Inline code

Wrap the inline style snippet with the tag.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.
// For example, <section> should be wrapped as inline.
Copy the code

User input

The user’s keyboard input is marked with the < KBD > tag.

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>.</kbd></kbd>
Copy the code

The code block

Multiple lines of code can use the 

 tag. To display the code correctly, note that Angle brackets are escaped.
<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>
// <p>Sample text here...</p>
Copy the code

You can also use the.pre-Scrollable class, which sets the max-height to 350px and displays the scroll bar vertically.

<pre class="pre-scrollable">
    &lt;p&gt;hahahahahah&lt;/p&gt;
    &lt;p&gt;hahahahahah&lt;/p&gt;
    &lt;p&gt;hahahahahah&lt;/p&gt;
    &lt;p&gt;hahahahahah&lt;/p&gt;
    &lt;p&gt;hahahahahah&lt;/p&gt;
    &lt;p&gt;hahahahahah&lt;/p&gt;
    &lt;p&gt;hahahahahah&lt;/p&gt;
</pre>
Copy the code

variable

Variables are marked with the tag.

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Copy the code

Program output

The output of the program is marked with the < SAMP > tag.

<samp>This text is meant to be treated as sample output from a computer program.</samp>
Copy the code

form

The basic instance

Adding the. Table class to any

tag gives it basic styling — a little padding and a horizontal separator
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <table class="table">
                <thead>
                    <tr>
                        <th>name</th>
                        <th>gender</th>
                        <th>age</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>tank</td>
                        <td>male</td>
                        <td>18</td>
                    </tr>
                    <tr>
                        <td>egon</td>
                        <td>male</td>
                        <td>18</td>
                    </tr>
                    <tr>
                        <td>jason</td>
                        <td>male</td>
                        <td>18</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
Copy the code

Striped table

The. Table-striped class can add a zebra striped style to each row within .

<table class="table table-striped">.</table>
Copy the code

A table with borders

Add the.table-bordered class to add borders to the table and to each cell in it.

<table class="table table-bordered">.</table>
Copy the code

hovering

You can make each row in < tBody > respond to the hover state by adding the.table-hover class.

<table class="table table-hover">.</table>
Copy the code

Tightening form

You can make your table more compact by adding the.table-condensed class, and the padding in your cells can be cut in half.

<table class="table table-condensed">.</table>
Copy the code

State class

These state classes allow you to set colors for rows or cells.

Class describe
.active Color set when the mouse hovers over a row or cell
.success Identifies successful or positive actions
.info Indicates a common prompt or action
.warning Identifies a warning or requires user attention
.danger Identify dangerous or potentially negative actions 
<! -- On rows -->
<tr class="active">.</tr>
<tr class="success">.</tr>
<tr class="warning">.</tr>
<tr class="danger">.</tr>
<tr class="info">.</tr>

<! -- On cells (`td` or `th`) -->
<tr>
  <td class="active">.</td>
  <td class="success">.</td>
  <td class="warning">.</td>
  <td class="danger">.</td>
  <td class="info">.</td>
</tr>
Copy the code

Response form

Wrap any.table element inside the.table-responsive element to create a responsive table that scrolls horizontally on a small screen device (less than 768px). When the screen is larger than 768px, the horizontal scroll bar disappears.

<div class="table-responsive">
  <table class="table">.</table>
</div>
Copy the code

The form

The basic instance

Individual form controls are automatically assigned some global styles. All , 

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
Copy the code

The inline form

Adding a.form-inline class to a

element makes its content left-aligned and behaves as an inline-block level control. This only works if the viewport is at least 768px wide (any smaller will cause the form to collapse).
  • Case 1
<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>
Copy the code
  • Case 2
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>
Copy the code
  • Case 3
<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">00.</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
Copy the code

Horizontally arranged forms

By adding a.form-horizontal class to the form and using the Bootstrap preset grid class, you can lay out the Label label and control group side by side. Doing so will change the behavior of.form-group to behave like rows in the grid system, so there is no need to add.row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>
Copy the code

Supported controls

Input box

Includes most form controls, text input field controls, and supports all types of HTML5 input controls: Text, password, datetime, datetime-local, date, month, time, week, number, email, URL, search, tel, and color.

<input type="text" class="form-control" placeholder="Text input">
Copy the code

Text field

Form controls that support multiple lines of text. The rows attribute can be changed as needed

<textarea class="form-control" rows="3"></textarea>
Copy the code

Disabled state

Setting the Disabled property to the input box prevents it from having any interaction with the user (focus, input, and so on). The disabled input box is lighter in color and the not-allowed mouse state is added.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Copy the code

Disabled fieldset

Setting the disabled property for

disables all controls contained in

.
<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Copy the code

read-only

Setting the readonly property for the input field prevents the user from modifying the contents of the input field. Input boxes in read-only state are lighter in color (like disabled input boxes), but still retain the standard mouse state.

<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
Copy the code

Check the state

Bootstrap defines styles for the validation states of form controls, such as error, warning, and SUCCESS. When used, add.has-warning,.has-error, or.has-success classes to the parent element of these controls. Any.control-label,.form-control, and.help-block elements contained within this element will accept styles for these validation states.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>
Copy the code

Add additional ICONS

You can also add additional ICONS to the input box for validation status. Simply set up the appropriate.has-Feedback class and add the correct icon.

The feedback icon can only be used in text input fields<input class="form-control">Element.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
Copy the code

There are many more to refer tov3.bootcss.com/

conclusion

The article was first published in the wechat public account Program Yuan Xiaozhuang, at the same time in nuggets.

The code word is not easy, reprint please explain the source, pass by the little friends of the lovely little finger point like and then go (╹▽╹)