Continuation of the basic part of the previous section, mainly on the following tables, tables, forms related bootstrap framework changes and basic knowledge.
1. List of articles
In addition to the three basic list styles provided by HTML:
Unordered list
<ul> <li>...</li></ul>
Ordered list
<ol> <li>...</li></ol>
Definition List
<dl> <dt>...</dt> <dd>...</dd></dl>
Bootstrap provides a list of six forms based on the usual usage situation:
? General List
? Ordered list
? Go to Dot List
? Inline list
? Description List
? Horizontal Description List
Take an ordered list for example sometimes we don't need the numbers in front of the list then we need to use a class name of ". list-unstyled" in the framework, so that you can remove the style of the default list style.
To put it bluntly is to remove all the styles that have been brought before.
Speaking of here, a lot of frameworks have some seemingly very chicken style, such as this and some of the removal of font style Balabala (to tell the truth, I think it is superfluous) but use the framework so try not to manually modify or write some style to replace the frame style, Maybe it's time for you to fix it. After the code maintenance site updates These fragmented changes will affect the overall site layout, so use frame style as far as possible and do not modify.
{padding-left: 0; List-style: none;}Bootstrap like to go to a list, by adding the class name ". List-inline" To implement the inline list, simply by replacing the vertical list with the horizontal list , and removing the Bullets (numbering), Keep the level displayed.
For the definition list, bootstrap does not make much adjustments, but adjusts the line spacing , margins , and font bold effects.
/* Source Please view Bootstrap.css file line No. 594 ~ No. 607 Line * *
DL {margin-top:0;margin-bottom:20px;} DT,DD {line-height:1.42857143;} DT {font-weight:bold;} dd {margin-left:0;}
This list can also be displayed horizontally,Horizontal definition lists like inline lists, bootstrap can add the class name ". Dl-horizontal" to the definition list for horizontal display.
/* Source Please view Bootstrap.css file line No. 608 ~ No. 621 Line * *
@media (min-width:768px) {. dl-horizontal dt {float:left;width:160px;overflow:hidden;clear:left;text-align:right; Text-overflow:ellipsis;white-space:nowrap; }. Dl-horizontal dd {margin-left:180px; }}
A media query has been added here. In other words, adding the class name ". Dl-horizontal" only has a horizontal definition list effect when the screen is larger than 768px . The main way to achieve this:
1, the DT set a left float, and set a width of 160px
2, the DD set a margin-left value of 180px, to achieve the level of effect
3. When the title width exceeds 160px, three ellipses will be displayed
Code blocks (usually less by then):
When working with code, users can use different types according to their specific needs:
1,<code>: Usually for single word or single sentence code
2,<pre>: Generally for multi-line code (that is, block code)
3,<kbd>: Generally speaking, users want to enter through the keyboard content
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Code</title><Linkrel= "stylesheet"href= "//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"></Head><Body>Code Style:<Div>There are three types of bootstrap code styles:<Code><Code></Code>、<Code><Pre></Code>And<Code><Kbd></Code></Div>Pre-style:<Div><Pre><Ul><Li>...</li><Li>...</li><Li>...</li></ul></Pre></Div>KBD Style:<Div>Please enter<KBD>CTRL + C</KBD>To copy the code and then use the<KBD>CTRL + V</KBD>To paste the code</Div><!--Here is the Code task section -<P>Use ctrl+x to copy the code, and then use Ctrl+shift+v to paste the copied code where you want it.</P></Body></HTML>
Two. Forms
Bootstrap provides different class names for different style styles in the table, mainly including:
? . Table: Base table
? . table-striped: Zebra crossing table
? . table-bordered: Table with borders
? . Table-hover: Table with mouse hover highlighting
? . table-condensed: Compact Form
? . table-responsive: Responsive table
There are both less and sass versions of two, please refer to Bootstrap source code for details.
Here's a look at the responsive table, here's what the framework describes:
With the advent of a variety of handheld devices, responsive design is becoming more and more demanding to make your Web pages suitable for browsing the thousand-million-image devices. The bootstrap also provides a responsive effect to the table, which is called a responsive table .
Bootstrap provides a container, and this container sets the class name ". Table-responsive", which has a responsive effect and then places the <table class= "table" > into the container, so that the table has a responsive effect.
The response table in bootstrap shows that when your browser's viewable area is less than 768px , a horizontal scroll bar appears at the bottom of the table. When your browser's viewable area is larger than 768px, the horizontal scroll bar at the bottom of the table disappears. Examples are as follows:
<div class= "table-responsive" ><table class= "Table table-bordered" > ...</table></div>
The table part changes relatively less feeling than the usual table style form, so there is not too much to write this understanding.
Here's a look at the form section:
Bootstrap did not design too many custom effects on it, only fieldset,legend, and label tags within the form were customized. Such as:
/* Source please refer to bootstrap.css file line 1631th ~ Line 1652th * *
fieldset {min-width:0;padding:0;margin:0;border:0;} Legend {display:block;width:100%;p adding:0;margin-bottom:20px;font-size:21px;line-height:inherit;color: #333; border:0;border-bottom:1px solid #e5e5e5;} label {display:inline-block;margin-bottom:5px;font-weight:bold;}These elements, such as margin,padding , and border , are mainly set up in detail.
Of course, in addition to these elements, there are input,select,textarea and other elements, in the bootstrap framework, by customizing a class name 'Form-control ', that is, if these elements use the class name "Form-control", some design-specific effects will be implemented.
1, the width becomes 100%
2. A light gray (#ccc) border is set
3, with 4px rounded corners
4. Shadow and border effects change when the shadow effect is set and the element gets focus
5, set the color of the placeholder for #999
Bootstrap framework (Basic article) list, form, form
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
