您的位置：首页 > Web前端 > BootStrap

Bootstrap笔记：辅助类，输入框组，复选框等

2018-03-11 16:44 447 查看 
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scaleable=no"></meta>
<title>辅助类笔记</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<style type="text/css">
.top{
width:500px;
border:1px solid blue;
margin: 10px auto;
overflow: hidden;
}
.pull-left{
width: 200px;
height: 200px;
background: red;
}
.pull-right{
width: 260px;
height: 200px;
background: blue;
}
</style>
</head>

<body>
<!--辅助类，文本情景 .text-muted(柔和) .text-success .text-warning .text-danger .text-primary  .text-info-->
<p>辅助类，文本情景 .text-muted(柔和) .text-success .text-warning .text-danger .text-primary  .text-info</p>
<p>背景文本颜色 .bg-success .bg-info .bg-primary .bg-warning .bg-danger </p>
<div class="container" style="background:#e6e6e6;">

<p class="text-muted">Animal is part of the nature. If they die out from the earth, then human being won’t</p>

<p class="text-primary bg-success">live long, either. We have been always educated to treat pets as our friends and </p>

<p class="text-success bg-primary">there are so many touching stories between pets and their masters, but some people are </p>

<p class="text-info bg-danger">cold blooded and kill animals for their selfish reasons.</p>

<p class="warning bg-danger">Recently, it has been reported that a woman killed a pet dog because of her</p>

<p class="text-danger bg-warning">unsatisfactory desire of the money from the owner. The woman picked up a lost pet</p>

</div>

<div class="container" style="background:#e6e6e6">
<p>快速浮动 左浮动pull-left  右浮动pull-right </p>
<p>清除浮动，给父元素加，.clearfix</p>
<div class="top clearfix">
<div class="pull-left">
左浮动，我在左边
</div>
<div class="pull-right">
右浮动，我在右边
</div>
</div>

<p>下拉三角</p>
<!-- <span class="caret"></span> 中间没有内容-->
<span class="caret"></span>
</div>

<div class="container" style="background:#e6e6e6">
<h3 class="page-header">表单</h3>
<form>
<div clas="form-group">
<label for="cemail">邮箱</label>
<input type="email" name="cemail" id="cemail" class="form-control">
</div>
<div class="form-group">
<label for="pwd">密码</label>
<input type="password" name="pwd" id="pwd" class="form-control">
</div>
<div class="form-group">
<label for="tel">手机</label>
<input type="text" name="tel" id="tel" class="form-control">
</div>
<!--复选框 disabled 禁止选中 禁止修改-->
<p>复选框，disabled禁止选中 禁止修改  form-group 分组产生一定距离</p>
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" name="hobby" >唱歌</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby" >旅游</label>
<label class="checkbox-inline"><input type="checkbox" name="hobby">睡觉</label>
<label class="checkbox-inline disabled"><input type="checkbox" name="hobby" disabled>打代码</label>
</div>

<p>单选框 radio-inline 加样式</p>
<div class="form-group">
<label calss="radio-inline"><input type="radio" name="sex" value="男">男</label>
<label class="radio-inline disabled"><input type="radio" name="sex" value="女" disabled="">女</label>
</div>
<p>form-control 给输入框加</p>
<!--form-control给输入框加，<input> <textarea></textarea>   .form-group给输入框的父元素加，给外面包含的盒子加<div class="form-group">  .checkbox给labe标签加，给包含<input>和内容加颜色，radio-inline给label标签加，给<input>和内容加样式-->
</form>
</div>

<div class="container" style="background:#e6e6e6">
<h3 class="page-header">输入框组</h3>
<form class="form-horizontal">
<div class="form-goup">
<!--输入框组-->
<div class="input-group">  <!--input-group输入框组合到一起-->
<span class="input-group-addon">搜索</span>  <!--美化搜索框-->
<input type="search" name="sc" id="sc" class="form-control"> <!--.form-contorl输入框变成圆角-->
</div>
</div>
<div class="form-group">
<!--输入框组-->
<div class="input-group">
<input type="search" name="sear" id="sear" class="form-control">
<div class="input-group-addon">查询内容</div>
</div>
</div>

<!--输入框组 用户框-->
<h3 clas="page-header">用户框</h3>
<div class="input-group">
<span class="input-group-addon">用户</span>
<input type="text" name="username" class="form-control">
<!--把“用户”变成图标-->
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" name="username1" class="form-control">
</div>

<p>.input-group-addon给组合的内容加； .input-group给组合的父元素加</p>
<p> 在form标签后加.from-inline 所有表单内容横向显示，不常用</p>
<!--<form class="form-inline">-->
<p>响应式表单 form-horizontal,给表单加，变成响应式效果，但必须结合栅格系统</p>
<!--<form clas="form-horizontal-->

</form>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航