Bootstrap---css

端木安国

2023-12-01

1.Bootstrap 是一个基于 HTML、CSS、JAVASCRIPT 的响应式(其内置css中存在大量的媒体查询)前端框架;
2.Bootstrap框架特点：移动设备优先；为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3.Bootstrap有内置的css, 存在于bootstrap.css文件中，可以在需要的页面中引用；
4.由于各大浏览器之间存在差异性，Bootstrap 使用 Normalize 来建立跨浏览器的一致性；Normalize.css叫重置浏览器的样式；

一、bootstrap 布局容器

固定模式布局 container—宽度及内外边距走内置css的设置

<style>
   .container{
      height:100px;
      border:1px solid #000;
    }
</style>
<link rel="stylesheet" href="css/bootstrap.3.3.7.min.css"/>
<link rel="stylesheet" href="css/normalize.css"/>

<body>
<div class="container"></div>    //其宽度及样式设备宽度自适应
</body>

在bootstrap的内置css中存在container的相关样式设置

.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media (min-width: 768px) {
    .container {
        width: 750px
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px
    }
}

流动式 container-fluid—同上

<div class="container-fluid"></div>    //同上，其宽度及样式设备宽度自适应

二、bootstrap—栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列

响应式的列设置

<div class="row">
    // row 默认设置了左右margin各-15px 是为了处理两种布局容器的左右各15px的槽宽
    <div class="col col-lg-4 col-md-5 col-sm-1  col-xs-9">
        <div></div>
    </div>
    <div class="col col-lg-4 col-md-6 col-sm-9 col-xs-1">
        <div></div>
    </div>
    <div class="col col-lg-4 col-md-1 col-sm-2 col-xs-2">
        <div></div>
    </div>
</div>

列的偏移

1.col-lg/md/sm/xs-offset-*
相当于当前列的marginleft值
被偏移的列在文档流中的实际位置改变，后续元素位置的也随之变化

  <div class="row">
        <div class="col col-lg-3 col-lg-offset-2"></div>
  </div>

2.col-lg/md/sm/xs-push-*
相当于当前列的left值
被偏移的列在文档流中的实际位置是不变的，不影响后续元素位置的计算

<div class="row">
        <div class="col col-sm-2 col-sm-push-1"></div>
        <div class="col col-sm-3 col-sm-push-4"></div>
</div>

3.col-lg/md/sm/xs-pull-*
相当于当前列的right值
被偏移的列在文档流中的实际位置是不变的，不影响后续元素位置的计算

<div class="row">
        <div class="col col-sm-9 col-sm-pull-1"></div>
</div>

三、bootsrap 排版类

 1. .lead	使段落突出显示 
 2. .small	设定小文本 (设置为父文本的 85% 大小)	
 3.  .text-left	设定文本左对齐
 4. .text-center	设定文本居中对齐
 5.  .text-right	设定文本右对齐
 6. .text-justify	设定文本对齐,段落中超出屏幕部分文字自动换行 
 7. .text-nowrap	段落中超出屏幕部分不换行
 8. .text-lowercase	设定文本小写 .text-uppercase	设定文本大写
 9. .text-capitalize	设定单词首字母大写
 10.  .initialism	显示在 <abbr>元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
 11. .list-unstyled	移除默认的所有列表样式（<ul> 和 <ol>），列表项中左对齐，这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
 12. .list-inline	将所有列表项放置同一行
 13. .dl-horizontal	该类设置了浮动和偏移，添加给<dl>元素，作用于<dt>元素

四、bootstrap 代码段

//添加当行代码段
<code>document.getElementById("btn");</code>
//添加多行代码段
<pre>for(var i=0;i<10;i++){
     console.log(i);
 }</pre>

五、bootstrap 表单

1.垂直表单--文本标签元素单独占一行
a.把标签和控件放在一个带有 class .form-group 的 <div> 中
b.给所有文本标签 <input>,<textarea>,<select>添加 .form-control类

2.内联表单--表单单行显示
a.form元素添加 .form-inline 类
b.把标签和控件放在一个带有 class .form-group 的 <div> 中
c.给所有文本标签 <input>,<textarea>,<select>添加 .form-control类

3.水平表单
a.form元素添加 .form-horizontal  类
b.把标签和控件放在一个带有 class .form-group 的 <div> 中
c.label添加 .control-label 类

六、单选框和复选框

1.复选框—把每个复选框的标签放在一个带有 class .checkbox 的 “div” 中

<div class="checkbox">
    <label for=""> <input type="checkbox"/>选项1</label>
</div>
<div class="checkbox">
    <label for=""> <input type="checkbox"/>选项2</label>
</div>

2.单选框—把每个单选框放的标签在一个带有 class .radio 的 “div” 中,input中添加name属性

<div class="radio">
    <label for=""> <input name="optionsRadios"  type="radio"/>选项1</label>
</div>
<div class="radio">
    <label for=""> <input name="optionsRadios" type="radio"/>选项2</label>
</div>

内联的单选框和多选框

复选框---label添加 .checkbox-inline 类
<div>
    <label class="checkbox-inline"> <input type="checkbox"/>选项1</label>
    <label class="checkbox-inline"> <input type="checkbox"/>选项2</label>
    <label class="checkbox-inline"> <input type="checkbox"/>选项3</label>
</div>
单选框---label添加 .radio-inline 类
<div>
    <label class="radio-inline"> <input name="options"  type="radio"/>选项1</label>
    <label class="radio-inline"> <input name="options" type="radio"/>选项2</label>
</div>

七、bootstrap 按钮

.btn	为按钮添加基本样式
.btn-default	默认/标准按钮
.btn-primary	原始按钮样式（未被操作）
.btn-success	表示成功的动作
.btn-info	该样式可用于要弹出信息的按钮
.btn-warning	表示需要谨慎操作的按钮
.btn-danger	表示一个危险动作的按钮操作
.btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
.btn-lg	制作一个大按钮
.btn-sm	制作一个小按钮
.btn-xs	制作一个超小按钮
.btn-block 块级按钮(拉伸至父元素100%的宽度)

八、bootstrap 图片样式类

.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

九、其他辅助类

.pull-left—左浮动类
.pull-right —右浮动类
.clearfix—父元素添加，自动清除浮动
.center-block—设置元素为 display:block 并居中显示

<div class="clearfix" style="border: 1px solid red;">
    <div class="pull-left" style="width: 100px;height: 100px;border: 1px solid #000;"></div>
    <div class="pull-right" style="width: 100px;height: 100px;border: 1px solid #000;"></div>
</div>
<span class="center-block" style="width:100px;height:50px;border:1px solid #000"></span>

Bootstrap---css

相关阅读

相关文章

相关问答

相关文档