How to set div border in bootstrap-Bootstrap Tutorial-php.cn

How to set div border in bootstrap

尚

Release： 2019-07-31 13:14:11

Original

14742 people have browsed it

How to set div border in bootstrap

div border style:

##border:1px solid #FF0000;

means 4 bars All sides are 1 pixel straight border, red.
1px represents the border width, solid represents a straight line (dashed lines can be used), #FF0000 is the color value

Several common DIV border styles, no border, dotted border, dashed line Type borders, linear borders, double-line borders, grooved borders, ridged borders, inline-effect borders, protruding-effect borders, etc.

If you want to define four different sides, use:

border-top:
border-right:
border-bottom:
border-left:

div border style implementation code:

1. Outer convex border:

Effect:

Log text
Code:

<div style="BORDER-RIGHT: 3px outset;
 BORDER-TOP: 3px outset; 
 BACKGROUND: #ffffff; 
 BORDER-LEFT: 3px outset; 
 WIDTH: 100%; 
 BORDER-BOTTOM: 3px outset; 
 HEIGHT: 100%" align=left>日志文字</DIV>

Copy after login

Code description:

The blue part is the modifiable part, explain one by one:
Four 2 represents the width of the raised border. If you use 1, it will not be obvious. 2 or 3 compare Suitable;
The four outsets indicate that the border type is "raised". If they are changed to inset or double, they will be the effects of sunken borders and double-line borders respectively. The complete codes for other effects will be given below;
WIDTH : 100%; and HEIGHT: 100% means that the width of this box accounts for 100% of the width of the log. When the window expands and contracts, the width of the box will also expand and contract. HEIGHT represents the height. In addition, there is another way to express it in px. , the unit is pixels, for example: WIDTH: 355px means the width of the box is 355 pixels. Different layouts have different log widths. You can refer to the values given here. In general, it can be expressed as a percentage. Yes, but sometimes you need to use pixels to determine the size, so just play it by ear;
align=left means that the content in the box is arranged in a left-aligned manner. Change left to center or right to center-align and right-align respectively. , if you want left alignment, you can delete align=left. The default is left alignment;
ffffff represents the background color in the box, ffffff represents white (000000 represents black), and the color value can refer to this table Select, in addition, change #ffffff to transprant to have a transparent background. Personally, I think transparent backgrounds are more commonly used; in order to facilitate copying and pasting, the border code for a transparent background is given as follows: (The red part in the box is the code)

Log Text

The log text is the log content in the box. There is no need to edit it in the code. Return to the normal design mode and double-click the generated box to enter the box to edit the text.

2. Concave border:

Code:

<DIV style="BORDER-RIGHT: 3px inset;
BORDER-TOP: 3px inset; 
BACKGROUND: #ffffff; 
BORDER-LEFT: 3px inset; 
WIDTH: 100%; 
BORDER- BOTTOM: 3px inset; 
HEIGHT: 100%" align=left>日志文字</DIV>

Copy after login

Transparent background concave border code:

<DIV style="BORDER- RIGHT: 3px inset; 
BORDER-TOP: 3px inset; 
BACKGROUND: transprant; 
BORDER-LEFT: 3px inset; 
WIDTH: 100%; 
BORDER-BOTTOM: 3px inset; 
HEIGHT: 100%" align=left>日志文字</DIV> 代码

Copy after login

3. Double Line border:

<DIV style="BORDER-RIGHT: 3px double #000000;
 BORDER-TOP: 3px double #000000; 
 BACKGROUND: #ffffff; 
 BORDER-LEFT: 3px double #000000; 
 WIDTH: 100%; 
 BORDER-BOTTOM: 3px double #000000; 
 HEIGHT: 100%" align=left>日志文字</DIV>

Copy after login

Transparent background double line border code:

<DIV style="BORDER-RIGHT: 3px double #000000; 
BORDER-TOP: 3px double #000000; 
BACKGROUND: transprant; 
BORDER-LEFT: 3px double #000000; 
WIDTH: 100%; 
BORDER-BOTTOM: 3px double #000000; 
HEIGHT: 100%" align=left>日志文字</DIV>

Copy after login

In fact, the front border can also set the color like the double line border, but personally feel that the bump is The color of the effect is better to be the default.

4. Dotted border:

<DIV style="BORDER-RIGHT: 2px dashed #000000; 
BORDER-TOP: 2px dashed #000000; 
BACKGROUND: #ffffff; 
BORDER-LEFT: 2px dashed #000000; 
WIDTH: 100%; 
BORDER-BOTTOM: 2px dashed #000000;
 HEIGHT: 100%" align=left>日志文字</DIV>

Copy after login

Transparent background dotted border code:

<DIV style="BORDER-RIGHT: 2px dashed #000000; 
BORDER-TOP: 2px dashed #000000; 
BACKGROUND: transpant; 
BORDER-LEFT: 2px dashed #000000; 
WIDTH: 100%;
 BORDER-BOTTOM: 2px dashed #000000;
  HEIGHT: 100%" align=left>日志文字</DIV>

Copy after login

5. Groove three-dimensional effect border

<DIV style="BORDER-RIGHT: 7px groove; 
BORDER-TOP: 7px groove; 
BACKGROUND: transprant; 
BORDER-LEFT: 7px groove; 
WIDTH: 100%; BORDER-BOTTOM: 7px groove; 
HEIGHT: 100%" align=left>日志文字</DIV>

Copy after login

Personally think that the background color of this border is best to be transparent, and the thickness value of the border cannot be too small, otherwise the effect will not be obvious

6. Ridge three-dimensional effect border

<DIV style="BORDER-RIGHT: 7px ridge; 
BORDER-TOP: 7px ridge; BACKGROUND: #ffffff; 
BORDER-LEFT: 7px ridge;
 WIDTH: 100%; 
 BORDER-BOTTOM: 7px ridge; 
 HEIGHT: 100%" align=left>日志文字</DIV>

Copy after login

The above is the detailed content of How to set div border in bootstrap. For more information, please follow other related articles on the PHP Chinese website!