bootstrap-css-class-name使用相關名套用樣式

一直以來使用bootstrap開發網站，對於在寫css時如果要將變數名的框架做統一寫在一個樣式中，要將名稱一個個整理起來在將屬性 (Property)、屬性值 (Value)寫入聲明區塊 (declaration block)內，最近發現個一個寫法可以直接針對同名架構直接使用聲明區塊 (declaration block)。簡單的說，就是只要class命名內有符合一樣的名稱就會套用到此樣式。

使用方法：元素名稱[class*="關連類的名稱"]
例如： div[class*="col-lg"] ，只要是類名有出現 col-lg 的相關名都會用到，正好可以拿來使用 col-lg-1 至 col-lg-12

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap-css-class-name使用相關名套用樣式_測試</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--[if lt IE 7] >
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 9]>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/*.col-lg-** { background-color: #ccc;}*/
/*.row  { height:150px; }*/
/*.row > * { height:150px; background-color: #ccc; }*/

div[class*="col-lg"] {
	background: #ffff00; 
}

div[class*="col-sm"] {
	background: blue; 
}

div[class*="col-xs"] {
	background: red; 
}

div[class*="col-"] { height: 3vh;}

/*.row > div { height: 3vh;}*/

</style>
</head>

<body>
<!--col-lg-**-->
<div class="row">
	<div class="col-lg-1"></div>
</div>
<div class="row">
	<div class="col-lg-2"></div>
</div>
<div class="row">
	<div class="col-lg-3"></div>
</div>
<div class="row">
	<div class="col-lg-4"></div>
</div>
<div class="row">
	<div class="col-lg-5"></div>
</div>
<div class="row">
	<div class="col-lg-6"></div>
</div>
<div class="row">
	<div class="col-lg-7"></div>
</div>
<div class="row">
	<div class="col-lg-8"></div>
</div>
<div class="row">
	<div class="col-lg-9"></div>
</div>
<div class="row">
	<div class="col-lg-10"></div>
</div>
<div class="row">
	<div class="col-lg-11"></div>
</div>
<div class="row">
	<div class="col-lg-12"></div>
</div>
<!--/col-lg-**-->

<!--col-sm-**-->
<div class="row">
	<div class="col-sm-1"></div>
</div>
<div class="row">
	<div class="col-sm-2"></div>
</div>
<div class="row">
	<div class="col-sm-3"></div>
</div>
<div class="row">
	<div class="col-sm-4"></div>
</div>
<div class="row">
	<div class="col-sm-5"></div>
</div>
<div class="row">
	<div class="col-sm-6"></div>
</div>
<div class="row">
	<div class="col-sm-7"></div>
</div>
<div class="row">
	<div class="col-sm-8"></div>
</div>
<div class="row">
	<div class="col-sm-9"></div>
</div>
<div class="row">
	<div class="col-sm-10"></div>
</div>
<div class="row">
	<div class="col-sm-11"></div>
</div>
<div class="row">
	<div class="col-sm-12"></div>
</div>
<!--/col-sm-**-->

<div class="row">
	<div class="col-xs-1"></div>
</div>
<div class="row">
	<div class="col-xs-2"></div>
</div>
<div class="row">
	<div class="col-xs-3"></div>
</div>
<div class="row">
	<div class="col-xs-4"></div>
</div>
<div class="row">
	<div class="col-xs-5"></div>
</div>
<div class="row">
	<div class="col-xs-6"></div>
</div>
<div class="row">
	<div class="col-xs-7"></div>
</div>
<div class="row">
	<div class="col-xs-8"></div>
</div>
<div class="row">
	<div class="col-xs-9"></div>
</div>
<div class="row">
	<div class="col-xs-10"></div>
</div>
<div class="row">
	<div class="col-xs-11"></div>
</div>
<div class="row">
	<div class="col-xs-12"></div>
</div>

</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

<!doctype html>

<html>

<head>

<title>bootstrap-css-class-name使用相關名套用樣式_測試</title>

<!--[if lt IE 7] >

<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

<style>

/*.col-lg-** { background-color: #ccc;}*/

/*.row { height:150px; }*/

/*.row > * { height:150px; background-color: #ccc; }*/

div[class*="col-lg"] {

background: #ffff00;

}

div[class*="col-sm"] {

background: blue;

}

div[class*="col-xs"] {

background: red;

}

div[class*="col-"] { height: 3vh;}

/*.row > div { height: 3vh;}*/

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

See the Pen bootstrap css class*=”” 測試 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap-css-class-name使用相關名套用樣式_測試-2</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--[if lt IE 7] >
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 9]>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>

div[class*="col-lg"] {
	background: #ffff00; margin-bottom: 20px;
}

div[class*="col-lg"] div[class*="col-md"] {
	background: blue; 
}

div[class*="col-"] { height: 3vh;}

</style>
</head>

<body class="clearfix">

<div class="row">
	<div class="col-lg-1 cleafix">
		<div class="col-md-1 cleafix"></div>
	</div>
</div>
<div class="row">
	<div class="col-lg-2 cleafix">
		<div class="col-md-2 cleafix"></div>
	</div>
</div>
<div class="row">
	<div class="col-lg-3 cleafix">
		<div class="col-md-3 cleafix"></div>
	</div>
</div>
<div class="row">
	<div class="col-lg-4 cleafix">
		<div class="col-md-4 cleafix"></div>
	</div>
</div>
<div class="row">
	<div class="col-lg-5 cleafix">
		<div class="col-md-5 cleafix"></div>
	</div>
</div>
<div class="row">
	<div class="col-lg-6 cleafix">
		<div class="col-md-6 cleafix"></div>
	</div>
</div>
<div class="row">
	<div class="col-lg-7 cleafix">
		<div class="col-md-7 cleafix"></div>
	</div>
</div>
<div class="row">
	<div class="col-lg-8 cleafix">
		<div class="col-md-8 cleafix"></div>
	</div>
</div>
<div class="row">
	<div class="col-lg-9 cleafix">
		<div class="col-md-9 cleafix"></div>
	</div>
</div>
<div class="row">
	<div class="col-lg-10 cleafix">
		<div class="col-md-10 cleafix"></div>
	</div>
</div>
<div class="row">
	<div class="col-lg-11 cleafix">
		<div class="col-md-11 cleafix"></div>
	</div>
</div>
<div class="row">
	<div class="col-lg-12 cleafix">
		<div class="col-md-12 cleafix"></div>
	</div>
</div>

</body>
</html>

<!doctype html>

<html>

<head>

<title>bootstrap-css-class-name使用相關名套用樣式_測試-2</title>

<!--[if lt IE 7] >

<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

<style>

div[class*="col-lg"] {

background: #ffff00; margin-bottom: 20px;

}

div[class*="col-lg"] div[class*="col-md"] {

background: blue;

}

div[class*="col-"] { height: 3vh;}

</style>

</head>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

See the Pen bootstrap css class*=”” 測試-2 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

js bin展示開新視窗

資料來源：
CSS3 [attribute*=value] Selector
展示頁

標籤雲