黑马程序员技术交流社区

标题: 【石家庄校区】Bootstrap_简单使用 [打印本页]

作者: 水煮牛蛙 时间: 2018-5-9 15:36
标题: 【石家庄校区】Bootstrap_简单使用
本帖最后由小石姐姐于 2018-5-11 10:14 编辑

Bootstrap_简单使用

1. css 和 js插件的引入

      <head>
            //viewport 用于绘图和缩放
            <meta name="viewport" content="width=device-width, initial-scale=1">

            
            <link rel="stylesheet" href="../../css/bootstrap.min.css" />
            <link rel="stylesheet" href="../../css/bootstrap-theme.min.css" />
            
            <script type="text/javascript" src="../../js/jquery-1.11.3.min.js" ></script>
            <script type="text/javascript" src="../../js/bootstrap.min.js" ></script>
      </head>

2.系统会自动将每行分为最多12列
      * 使用.row样式定义栅格的行  例: <div class="row"></div>
      * 定义列：其中 n 为数字所占 12 的比例
            .col-lg-n (大屏幕 >= 1200px )
            .col-md-n (中等屏幕 >= 992px )
            .col-sm-n (小屏幕 >= 768px )
            .col-xs-n       (超小屏幕 < 768px )

      * 列偏移:
            .col-md-offset-4 类将 .col-md-4 元素向右侧偏移4个列(column)的宽度;

      例:
            * 第一种方式:
                     <div class = "container">
                     <div class = "row">  //使用row后,下边的四个div块会把该行占满
                              <div class = "col-md-3 col-sm-6 col-xs-12"></div>
                              <div class = "col-md-3 col-sm-6 col-xs-12"></div>
                              <div class = "col-md-3 col-sm-6 col-xs-12"></div>
                              <div class = "col-md-3 col-sm-6 col-xs-12"></div>
                     </div>
                     </div>

            * 第二种方式: //这种形式会在行两端留有间隙,不能占满,超出后会跳到下一行
                              <div class = "col-md-3 col-sm-6 col-xs-12"></div>
                              <div class = "col-md-3 col-sm-6 col-xs-12"></div>
                              <div class = "col-md-3 col-sm-6 col-xs-12"></div>
                              <div class = "col-md-3 col-sm-6 col-xs-12"></div>

3.布局容器
      container-fluid 占满屏幕
      container 不占满屏幕

4. 实现响应式布局,依赖于它的媒体选择器
5.BootStrap的全局CSS
      ** BootStrap的框架提供了一系列的CSS的样式,这些样式可以直接使用
            5.1布局容器
            5.2排版功能
                     * 标题
                     * 对齐
                     * 改变大小写
            5.3表单(单独的表单控件)

6.表单样式:
      单独的表单控件会被自动赋予一些全局样式.所以设置了 .form-control
      类的<input> , <textarea> , <select> 元素都将被默认设置宽度属性为
      width: 100%;  将 label 元素和前面提到的控件包裹在.form-group中可以获得最好的排列
      <form class = "form-control"></form>

* label for= 用来标识与id名形同的标签
      form-group (组的意思)

7.disable 禁用样式
      在标签的属性中加入 class = "disable" 样式,就可以实现禁用
8.组件中的字体 icon (专业术语) 指的就是它的字体
9.navbar导航条
      navbar-def 默认导航条
      navbar-inver 反色导航条
10.图片轮播
      代码分三部分:
                                    * 图片上的小点
                                    * 图片
                                    * 图片左右选择
11.placeholder 文本框内的文字提示
12.模态框
            1.自动弹出
            2.可以手动让模态框弹出
* 其它插件
            13.滑动插件swiper (也是开源的)
            14.弹出层插件

* 练习:
      弹出框
      标签页
      导航栏
      模态框
      横向列表
13.实际开发时少用宽高定值,不方便用于响应式

14.css / js / fonts 引入这三个文件时要放在同级的目录下

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2