Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home Web Front-end JS Tutorial How to use CSS in Bootstarp_javascript skills

How to use CSS in Bootstarp_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:15 PM
css

Bootstrap uses some HTML5 elements and CSS properties, so it needs to use the HTML5 document type. 

<!DOCTYPE html>
<html lang="zh-CN">
 ...
</html>
Copy after login

In order to make the website developed by Bootstrap mobile-friendly and ensure proper drawing and touch screen scaling, you need to add the viewport meta tag to the head of the web page, as shown below: 

<meta name="viewport" content="width=device-width, //视口宽度为设备宽度
          initial-scale=1.0, //缩放程度
          maximum-scale=1.0, //最大缩放级别（可选）
          user-scalable=no">//禁止页面缩放（可选）
Copy after login

Bootstrap uses Normalize to establish cross-browser consistency. Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements.

About layout

Bootstrap provides a responsive, mobile-first fluid grid system that is automatically divided into up to 12 columns as the screen or viewport size increases.

img-responsive is used for img elements

container element used to wrap content on the page

    The
  • row needs to be placed in the container and is used to create horizontal groups of columns.
  • Predefined grid classes, such as .row and .col-xs-4, can be used to quickly create grid layouts.

  • Rows and columns can be nested into each other, and the adaptation after nesting is based on the parent element, not the device width
  • To create three equal columns, use three col-xs-4, or 12 col-xs-1 for 12 columns. 
<div class="container">
 <div class="row">
  <div class="col-xs-6 col-md-2 col-md-offset-1"></div>
  <div class="col-xs-6 col-md-3"></div>
  <div class="col-xs-6 col-md-3"></div>
  <div class="col-xs-6 col-md-3"></div>
 </div>
 <div class="row">...</div>
</div>
<div class="container">.... 
<!--以上代码在手机上就是两行两列，在电脑上是一行四列，其中第一列前面有空白，比其它列宽度小三分之一-->
//可使用.col-md-push-* 和 .col-md-pull-* 这种类设定显示，col-md-push-6按照我个人的理解，是在左面浮动了6列，然后再插入元素，col-md-pull-3则是在右边浮动了3列，然后从右往左插入元素
Copy after login
  • Media queries are very fancy "conditional CSS rules". It only works with some CSS based on certain specified conditions. If those conditions are met, the corresponding style is applied.

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
//For all devices with min-width: @screen-sm-min, if the width of the screen is smaller than @screen-sm-max, some processing will be done.

About typesetting

  • About text
<small>本行内容是在标签内</small><br>
<strong>本行内容是在标签内</strong><br>
<em>本行内容是在标签内，并呈现为斜体</em><br>
<p class="text-left">向左对齐文本</p>
<p class="text-center">居中对齐文本</p>
<p class="text-right">向右对齐文本</p>
<p class="text-muted">本行内容是减弱的</p>灰
<p class="text-primary">本行内容带有一个 primary class</p>蓝
<p class="text-success">本行内容带有一个 success class</p>绿
<p class="text-info">本行内容带有一个 info class</p>深蓝
<p class="text-warning">本行内容带有一个 warning class</p>黄
<p class="text-danger">本行内容带有一个 danger class</p>红
Copy after login

Bootstrap defines the style of the element as a dashed border that appears at the bottom of the text, with the full text appearing when the mouse is hovered over it (as long as you add text for the title attribute). To get a smaller font size for text, add .initialism to . 

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

  • Using the
    tag, you can display contact information on your web page.
  • Use the tag as a quote
<blockquote>这是一个带有源标题的引用。<small>Someone famous in Source Title</small></blockquote>
Copy after login
  • list-unstyled is used for unstyled list ul, list-inline is used for horizontal list ul
  • pre-scrollable makes pre scrollable
  • displays code inline, 
     displays multiple lines of code</strong></span><br />
  </li>
</ul>
<p><strong>About the form</strong></p>
<p style="text-align: center"><img src="/static/imghw/default1.png"  data-src="http://files.jb51.net/file_images/article/201602/201621793115393.png&#63;201611793123"  class="lazy"  id="theimg" alt="" onclick="window.open(this.src)" /></p>
<p style="text-align: center"><img src="/static/imghw/default1.png"  data-src="http://files.jb51.net/file_images/article/201602/201621793141588.png&#63;201611793156"  class="lazy"  id="theimg" alt="" onclick="window.open(this.src)" /></p>
<p>By wrapping any .table in a .table-responsive class, you can make the table scroll horizontally to fit on small devices (less than 768px). You won't see any difference when viewing on large devices larger than 768px wide. <br />
</p>
<div class="jb51code">
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>
<div class="table-responsive">
 <table class="table">
  <caption>响应式表格布局</caption>
  <thead>
   <tr>
   <th>产品</th>
   <th>付款日期</th>
   <th>状态</th>
   </tr>
  </thead>
  <tbody>
   <tr>
   <td>产品1</td>
   <td>23/11/2013</td>
   <td>待发货</td>
   </tr>
  </tbody>
 </table>
</div>
    Copy after login

About the form

  • Add the attribute role="form" to the form and the basic form structure of Bootstrap will be applied. At this time, the default is a vertical form
  • Put the labels and controls in a
    with class .form-group. This is necessary to obtain optimal spacing.
  • Add class .form-control to all text elements ,