Front-end style selection 1-bootstrap study notes

According to the tutorial at http://www.runoob.com/bootstrap/bootstrap-tutorial.html, record the learning process.
The key is to be familiar with or understand the style classes of some html tags so that you can quickly find a solution when needed.

Most of the pictures in this article are from the runoob website, and it is easier to find a suitable style when put together. The idea of

learning bootstrap:
1. For non-front-end programmers, the bootstrap grid system (for typesetting) and the bootstra table (for list display content), bootstrap form.
There are too many things in bootstrap, and it is impossible for everyone to know or understand. You need to make trade-offs and understand what you need and what you don’t need. Don't learn for the sake of learning, and don't learn by interest, it depends on what you need in your project or work 2.

Bootstrap is simply a style sheet, but twitter has written a lot of styles, just use it directly
and bootstrap A plugin is a js script that has been written and is bound to some specific style components or tags. As long as the component style meets the requirements and the plugin is loaded, the corresponding event can be triggered. Most of the bound tags or attributes are data-api

3. The naming of style classes generally conforms to certain rules,
such as .col-* applied to the columns of the grid system.
.row literally means to define a row element

. text-success is the style applied to the text.

list-inline is the style class applied to the html tag <ul>.

table .table-hover applies to the html tag <table>

.form-inline .form-group .form-control mainly controls the form, but not necessarily on the form

element.input-lg .input-sm controls the input size

bootstrap Some styles affect the typesetting, some affect the display

4. Comparison The big gain is
to understand some more professional front-end terms, such as:

breadcrumb navigation/tabbed navigation/capsule navigation

badge

Responsive Design (responsive design)

well wall

split button

When it comes to modal boxes, think of buttons or links as Modal trigger

5. The main reason for learning bootstrap
is its popularity, which makes me want to learn about it, and maybe one day when I need to do some page stuff (ps: catch a duck on the shelves) , in the case of no front-end, bootstrap can be used as an option, and I don't want to wait to learn it when it is used, that may be a bit late

Bootstrap CSS 1. Bootstrap
grid system - div.container div.row div.col

grid system
Mainly used for typesetting, similar to html table, tr, td and other elements, where css is used to achieve content structure typesetting
The main classes of the grid system are: .container, .row, .col-xs, .col-sm, .col-md, .col-lg, .col-md-offset-*, .col-md-push-*

basic structure:

<div class="container">
  <div class="row">
    <div class="col-*-*">
    </div>
  </div>
</div>

1.1 .col-md-offset-3 column left margin offset 3 cells

Note : There is no .col-xs-offset-* element but offset can be achieved by empty cells

1.2 .col-md-push-8 column position Move 8 columns to the
right.col-md-pull-4 column position move 4 columns to the left

2.Bootstrap typesetting -h1-h6 p.text-left p.text-success ul.list-inline
All HTML is defined in Bootstrap The style of the heading (h1 to h6). As long as the bootstrap style is introduced, the bootstrap style is applied by default.

2.1

The emphasis tags of html are
<small> (set the text to 85% of the parent text size), <strong> (set the text to be thicker), <em> (set the text to be thicker) Text is italic)

The emphasis styles provided by bootstrap are (applied to elements <p>):
.text-left, .text-center, .text-right, .text-muted, .text-primary, .text-success, . text-info, .text-warning, .text-danger

2.2 Abbreviations
Bootstrap defines the style of the <abbr> element as a dashed border that appears at the bottom of the text and displays the full text when the mouse hovers over it (as long as you are <abbr> abbr> title attribute adds text)

like:

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

2.3
List The main style classes for lists are:
.list-unstyled applies to <ul> -- clear styles . list
-inline applies to <ul> -- inline
.dl-horizontal applies to <dl> -- put belonging and description in The same line

3. Bootstrap code-code pre
bootstrap defines the default style of the html element <code> <pre>

<code> displays the code inline --bootstrap defines the color

<pre> displays the code in multiple lines --bootstrap definition background color

<pre class="pre-scrollable"> -- multiple lines of code with scrollbar

start and end tags using unicode variants: < and >

4.Bootstrap table -table.table-striped div.table -responsive tr.success td.warning

bootstrap defines the default element style for html elements, and also defines some style classes. Classes are suitable for table elements such as table.

4.1
The styles suitable for html elements table are:
.table, .table-striped, .table-bordered, .table-hover, .
table-condensed From these element names, you can see the applicable html element table

Applies to html elements <tr>, <th> and <td> classes
.active, .success, .info, .warning, .danger

4.2 Responsive forms
For small screens, horizontal scrolling to display content

<div class="table-responsive">
  <table class="table">
    <thead></thead>
    <tbody></tbody>
  </table>
</div>

5.Bootstrap form -form.form-horizontal div.form-group input.form-control div.has-warning

The way bootstrap affects the form is mainly html tags such as <form> <input> <label> to add styles. Another is to put the html tags and controls in the form in the div, which is convenient for controlling the basic style classes. The basic structure

of .form-inline .form-horizontal .form-group .form-control.

labels or controls occupy a line

<form role="form">
  <div class="form-group">
    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">    
  </div>
  <div class="form-group">
    <label for="inputfile">file input</label>
    <input type="file" id="inputfile">
    <p class="help-block">Here is an example of block-level help text. </p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">Please tick
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

form role="role"
.form-inline .form-group .form-control

Horizontal form style:
label <label> horizontal, controls are placed in <div class="col-sm-*">

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">名字</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
    </div>
  </div>
</form>

Checkbox:
<div class="checkbox"><label><input/></label></div> or

<div><label class="checkbox-inline"></lable></div>

for Some require specific input text, and styles can be handled specially (.has-warning):
such as:

  <div class="form-group has-warning">
    <label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
    </div>
  </div>

Control size and style class:
.input-lg .input-sm

6.Bootstrap button -input.btn input.btn-info input.btn-warning input.btn-sm input.active button
is also a commonly used front-end component
Mainly for color, size, status, etc., bootstrap also sets a label

<button class="btn btn-default" type="submit">按钮</button>

7.Bootstrap image -img.img-rounded img.img-circle img.img-thumbnail img .img-responsive
bootstrap supports images as the above class

8.Bootstrap auxiliary class -div.center-block a.text-danger a.text-success a.bg-danger a.show a.hidden button.close

auxiliary style Classes such as text style, background style, or text centering components show and hide, etc.

9.Bootstrap responsive utility -span.visible-xs-* span.hidden-sm
can show or hide certain elements according to different devices

Bootstrap layout components
1. Bootstrap Font Icons (Glyphicons) -span.glyphicon span.glyphicon-user

The font icon is mainly applied to the background of the button. You
can make a specific icon according to your needs. Address:
http://www.runoob.com/try/demo_source/bootstrap-glyph -customization.htm
such as:

<button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-user"></span>
    User
</button>

2. Bootstrap drop- down menu (Dropdowns) -div.dropdown ul.dropdown-menu
drop-down menu is also used more, if you want to have a good-looking drop-down menu, bootstrap is a good choice

ul.dropdown-menu can be used alone It does not have to be placed under div.dropdown, users can use it flexibly

3.Bootstrap button group -div.btn-group

4.Bootstrap button drop-down menu -div.btn-group span.cacert

5.Bootstrap input box group - div.input -group

6.Bootstrap navigation elements -ul.nav ul.nav-tabs ul.nav-pills ul.nav-stacked

7.Bootstrap navigation bar -nav.navbar nav.navbar-default nav.navbar-fixed-top

8.Bootstrap Breadcrumbs -ol.breadcrumb
breadcrumbs -indicates the location of the current page, each part can continue to navigate

I have seen this navigation method before, but I don't know what it is called

9.Bootstrap paging -ul.pagination ul.pager

Page turning does not necessarily have to be placed under ul.pager, it can also be used together with ul.pagination. These classes are flexible to use

10.Bootstrap label-label.label label-default

11.Bootstrap badge (Badges) -span.badge

badge

12.Bootstrap large screen (Jumbotron) -div.jumbotron

13.Bootstrap page title (Page Header) -div.page-header

14.Bootstrap Thumbnails -a.thumbnail

do not quite understand its role

15.Bootstrap warning (Alerts) -div.alert alert-success

website, if you need to mark some information. Generally, special styles are set for the text or background. Bootstrap has already written these special styles for us, and you can use them directly.

<div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                ×
            </button>
            success! Well done submission.
        </div>

16.Bootstrap progress bar - div.progress div.progress-bar

If you want your website to look dazzling, it is a good feature to design a progress bar with a beautiful interface. Bootstrap has already written the style, just use it.

17.Bootstrap Multimedia Object (Media Object) -div.media

If you develop some blog or thesis websites, insert some pictures in the text, it may be more ornamental

18.Bootstrap list group -ul.list-group li.list -group-item a.list-group-item

list-group-item does not have to be used under ul.list-group, it can be used independently. For example,
a.list-group-item can have the same style effect. It's just easier to control the position under div.list-group or ul.list-group

19.Bootstrap Panels (Panels)

If you need to use panels in the development of web pages, bootstrap has already written the styles for you. But for me, it seems to be used less, so I am also unfamiliar with some features that I have not seen before. It may be related to the industry you are in, or you have been working in the background, and you have no way to access these dazzling features.

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            Panel title with title
        </h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>

20.Bootstrap Well -div.well

Well is a container <div> that will cause the content to be displayed indented or illustrated.

Bootstrap plugin - the above components or styles are static, the plugin is more interactive
1.Bootstrap plugin overview - integration 12 jquery plugins

2.Bootstrap transition effect (Transition) plugin-Transition.js 3.Bootstrap

modal box (Modal) plugin- modal.js
data-api:data-toggle="model" data-target="#id " id is the id of the modal box div

4.Bootstrap drop-down menu (Dropdown) plugin- dropdown.js

5.Bootstrap scroll monitor (Scrollspy) plugin- scrollspy.js

According to the position of the viewing content, the menu or label is dynamically marked

6.Bootstrap Tab page (Tab) plugin- tab.js dynamically displays the

content div under the label

Mouse click, pop

- up window information Interaction, such as controlling button states, or creating button groups for other components ( such as toolbars ) . Carousel) plugin- carousel.js slides to display content, an essential feature of a beautiful website 13.Bootstrap additional navigation (Affix) plugin- affix.js fixes a navigation bar in a certain position on the page and does not move with the page Bootstrap Others 1.Bootstrap UI editor - design page like dreamweaver See : http://www.runoob.com/bootstrap/bootstrap-ui-editor.html 2.Bootstrap HTML coding specification page add the following elements or features: <!DOCTYPE html> <html lang="zh-CN">

Front-end style selection 1-bootstrap study notes

Guess you like