bootstrap table 徽章
2017-01-14 13:40:44 Silent_Paladin 阅读数 984

1 HTML

(1) 语法

  • 缩进使用两个空格代替 Tab

  • 嵌套元素缩进一次

  • 属性定义全部使用双引号,避免单引号

  • 不需要在自闭和元素的尾部添加斜杠(/),如 <input type="password">

  • 不能省略可选的结束标签,如 </li></body>

(2) HTML5 DOCTYPE

在每个 HTML 页面第一行添加标准模式(Standard Mode)声明,确保在每个浏览器中表现一致

<!DOCTYPE html>

(3) IE 兼容模式

IE 支持根据特定的 <meta> 标签确定绘制当前页面所应采用的 IE 版本,建议设置如下

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

(4) 字符编码

明确声明字符编码,确保浏览器能够快速定位页面内容的渲染方式,建议采用 UTF-8 编码

<head>
  <meta charset="UTF-8">
</head>

(5) 引入 CSS 文件

根据 HTML5 规范,引入 CSS 文件时不需要指定 type 属性,默认值是 text/css,如

<link rel="stylesheet" href="xxx.css">

(6) 引入 JavaScript 文件

根据 HTML5 规范,引入 JavaScript 文件时不需要指定 type 属性,默认值是 text/javascript,如

<script src="xxx.js"></script>

(7) 属性顺序

HTML 属性建议按照以下顺序依次排列

  • class

  • id, name

  • data-*

  • src, for, type, href

  • title, alt

  • aria-*, role

注意:

  • class 用于标识可复用组件,应该放在首位

  • id 用于标识某一具体组件,应该放在次位

(8) boolean 类型属性

根据 HTML5 规范,boolean 类型属性在声明时不需要赋值,如

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

(9) 尽量减少嵌套的标签数量

(10) 尽量避免通过 JavaScript 动态生成标签,这样做不利于查找、编辑且影响性能

2 CSS

(1) 语法

  • 缩进使用两个空格代替 Tab

  • 将单独的选择器单独放在一行

  • 在每个声明块的左花括号前添加一个空格

  • 声明块的右花括号单独成行

  • 每条声明语句的 : 后插入一个空格

  • 每条声明独占一行

  • 所有声明语句以分号结尾

  • 对于以逗号分隔的属性值,每个逗号后面插入一个空格 margin: 0 0 15px 0;

  • 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值(既加逗号也加空格)中区分多个颜色值(只加逗号,不加空格),如 background-color: rgba(0,0,0,.5);

  • 对于属性值或颜色参数,省略小于 1 的小数前面的 0,如 background-color: rgba(0,0,0,.5);

  • 十六进制值应该全部小写,如使用 #fff 替代 #FFF

  • 尽量使用简写形式的十六进制值,如使用 #fff 替代 #ffffff

  • 为选择器中的属性添加双引号,如使用 input[type="text"] 替代 input[type=text]

  • 避免为 0 值指定单位,如使用 margin: 0; 替代 margin: 0px;

(2) 声明顺序

/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;

/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;

/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;

/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;

/* Misc */
opacity: 1;

(3) 避免使用 @import

<link> 标签相比,@import 指令慢很多

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

解决方案:

  • 使用多个 <link> 元素

  • 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件

  • 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

(4) class 命名

  • class 名称中只能出现小写字符和破折号(-_

  • class 名称应当尽可能短,并且意义明确

  • 避免过度简写

  • 基于最近的父 class 或基本(base) class 作为新 class 的前缀

(5) 选择器

  • 对于通用元素使用 class ,这样利于渲染性能的优化
  • 对于经常出现的组件,避免使用属性选择器
  • 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3

(6) 设置文件编码为 UTF-8

(7) 在文件结尾添加一个空白行

2017-12-25 17:44:31 qq_33272864 阅读数 1119

使用bootstrap时,先去bootstrap官网(http://www.bootcss.com/)下载最新版本bootstrap,然后根据下载页面下提示使用。

通常

必须存在
然后引用bootstrap.js、bootstrap.css、jquery.js三个文件
如:

<!-- bootstrap规定使用前置设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- js样式 -->
<link href="boot/css/bootstrap.css" rel="stylesheet" type="text/css" />
<!-- css样式 -->
<script type="text/javascript" src="boot/js/jquery.js"></script>
<script type="text/javascript" src="boot/js/bootstrap.js"></script>

使用bootstrap时可以使用界面生成器(layoutit)自动生成基本的html页面

也可在bootstrap官网查询全局 CSS 样式

2019-02-12 17:47:03 weixin_41461967 阅读数 1290

一、什么是bootstrap?

bootstrap是一个前端开发时使用的框架。前端开发主要写HTML5、css3、JavaScript。而bootstrap框架主要为我们提供两个最重要的文件:bootstrap.min.css和bootstrap.min.js。为什么没有.min.html呢?不知道,或许有一天会有吧~

在bootstrap4.x版本中,bootstrap.min.js需要依赖两个文件:jquery-3.3.1.slim.min.js和popper.min.js。jquery不用多说了,但是popper.min.js这个框架没怎么听说过,对制作和美化下拉框、文字提示、弹出框等非常有用。

二、怎么使用bootstrap框架?

上面说了,bootstrap重要的是两个文件,bootstrap.min.css和bootstrap.min.js。使用bootstrap框架有两个方法,一是在官网下载bootstrap,解压缩后找到bootstrap.min.css和bootstrap.min.js复制粘贴到您正在开发的项目下,具体放在工程里面的哪一级哪个目录下自己决定,然后在需要用到该框架的.html文件里用<link>标签引入bootstrap.min.css,用<script>标签引入bootstrap.min.js。在引入bootstrap.min.js文件之前必须引入jquery-3.3.1.slim.min.js和popper.min.js(这两个文件需要自行去各自官网下载然后复制粘贴到正在开发的项目的任意位置)。下面贴出一份模板供大家参考:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--你自己写的样式文件,尽量不要放在bootstrap.min.css之前-->
    <link href="css/your-style.css" rel="stylesheet"> 

  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <!--官方建议这三个<script>标签写在body结束标签之前,三个标签顺序不能搞乱-->
    <script src="js/jquery-3.3.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

二是不需要下载任何文件,使用BootstrapCDN快速地将 Bootstrap 应用到你的项目中。模板如下:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

所有文件会通过http请求自动下载并引入到自己的项目中。

三、一些重要的设置

1. HTML5 doctype

Bootstrap 要求设置 HTML5 doctype,也就是.html文件需要使用HTML5的声明。如果没有这个设置,你会看到一些奇怪的、不完整的样式,但是只要添加了这个设置就不会出现任何错误了。

<!doctype html>
<html lang="en">
  ...
</html>

lang属性可以不用添加。

2. 响应式meta标签

Bootstrap 本着 移动设备优先 的策略开发的,按照这一策略,我们优先为移动设备优化代码,然后根据每个组件的情况并利用 CSS 媒体查询(CSS media queries)技术为组件设置合适的样式。为了确保在所有设备上能够正确渲染并支持触控缩放,务必将设置 viewport 属性的 meta 标签添加到 <head> 中。如下所示。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

3. 盒模型

bootstrap框架内部已经将全局的 box-sizing 值从默认的 content-box 修改为 border-box。这就确保了 padding 不会影响元素最终的宽度计算,但是这可能会导致第三方组件出现问题,例如 Google 地图和 Google 定制搜索。

所以有的时候需要手动设置回默认值去。怎么设置呢?看下面代码:

.selector-for-some-widget {
  box-sizing: content-box;
}

关于box-sizing属性的值,我们可以参考文章:css的两种盒模型

4. Reboot

为了改善跨浏览器的渲染,我们使用 Reboot 修正跨浏览器和设备之间的不一致性,同时对常用的 HTML 元素设置统一的效果。


bootstrap4.2.1官方文档:https://getbootstrap.com/docs/4.2/getting-started/introduction/

bootstrap4.x通用的中文文档:https://v4.bootcss.com/docs/4.0/getting-started/introduction/

2017-04-15 23:47:02 u014326004 阅读数 3715

bootstrap table是一个非常好用,且功能很全的表格插件

在使用bootstrap table之前,需要将bootstrap-table.js 和bootstrap-table.css引入到工程中,两个文件的现在地址为:http://bootstrap-table.wenzhixin.net.cn/

我的工程目录如下图所示:


我的测试文件是test2.html,文件中引用table的语法为,属性具体含义去以下网址参考(http://bootstrap-table.wenzhixin.net.cn/documentation/):


(1)想调用bootstrap table的已存在的函数和系统事件需要自己在页面中按照官网方式调用,对于系统事件调用而言有两种方式:


我的工程例子如下图所示,调用了两个系统事件:


(2)调用其自身的函数有一种方式,$('#table').bootstrapTable('method', parameter);

我的例子下图所示:


至于函数中的参数去网站上查,就是上面一个网址

效果如下图(第一图是点击一行之后,背景变绿色,第二个图是点击增加按钮后,会增加一行)


2018-03-12 16:09:08 heshuaicsdn 阅读数 1073

概念: 它是前端开发框架,让web开发更迅速、简单。
来自Twitter,是目前很受欢迎的前端框架之一。
Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

特点
1.移动设备优先、
2.响应式设计:采用栅格布局、
3.偏UI,综合框架,包括一些常用的UI组件以及一些JS组件
4.Bootstrap3兼容到IE8

应用场景:bootstrap适应于偏展示类的网站或者项目

固定布局:container
根据浏览器不同分辨率,固定尺寸不同
不同阈值对应的宽度如下:

=1200 width为1170px
=992 width为970px
=768 width为750px
<768 为自适应宽度auto

速成class类
1.Container 固定布局
2. Container-fluid 流体布局
3. Row 行
4. Col-lg-1 栅格占1/12列
5. Col-lg-1 col-sm-3 组合
6. Col-lg-offset-4 偏移4列
7. Col-lg-push-1 从前往后排序1列
8. Col-lg-pull-1 从后往前排序1列
9. Clearfix 清浮动(在要清浮动的元素前写一个空标签,加类)
10.Visible-lg-block 响应式显示
11.Hidden-lg 响应式隐藏
12.Visible-print-lg 打印机显示
13.Hidden-print 打印机隐藏
14.Alert-success 提示框
15.Alert alert-success 圆角提示框
16.Panel-primary 面板父级
17.Panel-heading 面板标题
18.Panel-body 面板主体
19.Form-group 表单form
20.Form-control 表单控件加的,
21.Sr-only 隐藏label
22.Btn 按钮
23.Btn-primary 按钮首选项蓝色
24.Bg-primary 背景蓝色
25.Text-primary 字蓝色
26.Btn-default 默认按钮
27.Btn-link 模仿a链接按钮
28.Btn-lg 按钮大小
29.Active 默认选中
30.Disabled 禁用
31.Btn-block 自适应占满父级宽度
32.Btn-group 普通按钮组
33.Btn-group-justified 自适应按钮组
34.Btn-group-vertical 纵向按钮组
35.Btn-group-lg 按钮组大小
36.Caret 加小三角
37.Dropup 小三角朝上,给btn加
38.Dropdown 下拉列表父级
39.Dropdown-toggle 给btn加
40.Data-toggle=”dropdown” 给btn加
41.Dropdown-menu 给无序列表加
42.Dropdown-menu-right 下拉列表靠右
43.Open 默认打开下拉列表
44.Dropdown-header 添加标题
45.Divider 下拉列表分割线
46.Disabled 下拉列表禁用项给项加
47.Dropup 下拉列表向上弹出
48.Text-center 文字居中
49.Nav nav-tabs 给ul加的,导航
50.Nav-tabs-justified 线的两端对齐导航条
51.Nav-pills 胶囊导航
52.Nav-stacked 纵向导航
53.Nav-justified 自适应
54.Disabled 禁用(给li加)
55.Nav nav-tabs 同49.
56.Tab-content 导航要切换内容的父级
57.Data-toggle=”tab” 触发器加的
58.tab-pane 要切换一条条内容加的
59.Fade 淡入淡出效果
60.In 当前淡入
61.Navbar 导航条
62.Navbar-default 默认(白色)
63.Navbar-inverse 黑色导航条
64.Navbar-static-top 去掉两端圆角
65.Navbar-fixed-top 固定定位页面最上面
66.Navbar-header Logo的父级
67.Navbar-brand logo
68.Navbar-right 右浮动(给ul加)
69.Navbar-btn 导航里的按钮
70.Navbar-link 导航里的A连接
71.Navbar-text 导航里的文字
72.Navbar-form 导航里的表单form,(导航里的搜索框)
73.Navbar-group 导航里的控件父级
74.Navbar-control 导航里的控件
75.
76.Icon-bar 响应式导航的三条杠
77.Data-toggle=’collapse’ 给按钮加
78.Data-traget=”隐藏元素的类” 给按钮加
79.Navbar-toggle 给按钮加
80.Collapse navbar-collapse 给隐藏元素的父级加
81.Table 给表格加的
82.Table-striped 斑马线
83.Table-bordered 给表格加border
84.Table-hover 移入效果
85.Table-condensed 使table更加紧凑, 上下padding减少二分之一
86.Success info warning danger 给th\tr\td加
87.Table-responsive 不换行,宽不够加滚条
88.Form-inline 给form加(一行显示
89.
90.Input-group 搜索框父级
91.Input-group-addon 给span(如放大镜)加
92.Form-control 给控件加
93.Form-horizontal 给form加(栅格布局)
94.Control-label 给label加,(上下居中)
95.Checkbox 多选按钮
96.Radio 单选按钮
97.Multiple 给下拉列表加的,内容展开
98.Form-control-static 静态控件
99.Has-success 加颜色绿色

input后加图标
100.Has-feedback 给form-group加
101.Form-control-feedback 给图标加
102.Input-lg 改变input的高度

bootstrap的部署

阅读数 632

bootstrap4中文文档

阅读数 978

bootstrapPrintThis打印插件

博文 来自: qq_34117825

bootstrap入门步骤

阅读数 1616

没有更多推荐了,返回首页