BootstarpCSS的使用方法_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

BootstarpCSS的使用方法_javascript技巧

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>

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">//禁止页面缩放（可选）

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

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列，然后从右往左插入元素

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>红

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>

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>

list-unstyled is used for unstyled list ul, list-inline is used for horizontal list ul
pre-scrollable makes pre scrollable
displays code inline, <pre class="brush:php;toolbar:false"> displays multiple lines of code</pre>

About the form

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.

<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>

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 , and <select>. </select>

<input type="text" class="form-control" placeholder="文本输入"/> <textarea class="form-control" rows="3"></textarea> <label for="name">可多选的选择列表</label> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>

在form加上类calss=form-inline，那么表单元素就会变成内联的

在form加上类class=form-horizontal，那么表单元素就会变成水平的

1）设置表单控件padding和margin值
2）改变“form-group”的表现形式，类似于网格系统的“row”。
3）向标签添加 class .control-label。

复选框和单选框

1）对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

当您需要在一个水平表单内的表单标签后放置纯文本时，请在
上使用 class .form-control-static。

禁用的输入框 input，如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性

对
添加 disabled 属性来禁用
内的所有控件。

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

.input-lg 和.input-sm可以改变输入框的高度样式

help-block Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在后使用 .help-block。

<input class="form-control" type="text" placeholder=""> <span class="help-block">一个较长的帮助文本块，超过一行，需要扩展到下一行。本实例中的帮助文本总共有两行。</span>

关于按钮

<button type="button" class="btn btn-default">默认按钮</button>  <button type="button" class="btn btn-primary">原始按钮</button>  <button type="button" class="btn btn-success">成功按钮</button>  <button type="button" class="btn btn-info">信息按钮</button>  <button type="button" class="btn btn-warning">警告按钮</button>  <button type="button" class="btn btn-danger">危险按钮</button>  <button type="button" class="btn btn-link">链接按钮</button>

按钮的大小

<p> <button type="button" class="btn btn-primary btn-lg"> 大的原始按钮 </button> </p> <p> <button type="button" class="btn btn-primary"> 默认大小的原始按钮 </button> </p> <p> <button type="button" class="btn btn-primary btn-sm"> 小的原始按钮 </button> </p> <p> <button type="button" class="btn btn-primary btn-xs"> 特别小的原始按钮 </button> </p> <p> <button type="button" class="btn btn-primary btn-lg btn-block"> 块级的原始按钮 </button> </p>

class为active表示激活按钮

class为disabled表示禁用按钮

在a和input上使用按钮class也能弄成按钮的样子，但是考虑到跨浏览器的问题还是在button上比较好。

关于图片

关于图片的样式除了之前提到的img-responsive用于图片的自适应之外还有以下三个样式：

.img-rounded 圆角图片

.img-circle 圆形图片

.img-thumbnail 缩略图功能

关于其它样式类

.pull-left左浮动

.pull-right右浮动

center-block内容居中

.clearfix清除浮动

.caret显示下拉式

.close关闭图标

关于不同设备

以上就是Bootstarp中CSS的使用方法，希望大家会喜欢。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。